<template>
    <view class="home-warp">
        <view class="clientInfo">
            <view class="wifItem" @click="goDeviceSetting()">
                <text>设备参数</text>
                <image
                    src="../../static/rightArrow.png"
                    style="width: 30rpx; height: 30rpx"
                ></image>
            </view>
            <view class="wifItem" @click="roomSetting">
                <text>房间配置</text>
                <image
                    src="../../static/rightArrow.png"
                    style="width: 30rpx; height: 30rpx"
                ></image>
            </view>
            <view class="wifItem">
                <text>坐摔检测</text>
                <view class="inputBox">
                    <switch
                        :checked="fallSettingEnabled == 1"
                        @change="onFallSettingChange"
                        :active-value="1"
                        :inactive-value="0"
                        size="24px"
                        active-color="#07c160"
                        inactive-color="#eeeff1"
                        style="transform: scale(0.8); margin-left: auto"
                    />
                </view>
            </view>
        </view>

        <view class="modal-mask" v-if="showFallSettingModle">
            <view class="modal-container">
                <view class="modal-header">
                    <text class="title">坐摔参数配置</text>
                </view>
                <view class="modal-body">
                    <view class="wifItem" style="margin-top: 30rpx">
                        <text>坐摔最低高度</text>
                        <view class="inputBox">
                            <input
                                v-model="lowZMax"
                                placeholder="请输入坐摔最低高度"
                            />
                        </view>
                    </view>
                    <view class="wifItem" style="margin-top: 30rpx">
                        <text>坐摔门限</text>
                        <view class="inputBox">
                            <input
                                v-model="humanPredThreshold"
                                placeholder="请输入坐摔门限"
                            />
                        </view>
                    </view>
                    <view class="wifItem" style="margin-top: 30rpx">
                        <text>坐摔判断阈值</text>
                        <view class="inputBox">
                            <input
                                type="number"
                                v-model="minEventsForDetection"
                                placeholder="请输入最坐摔判断阈值"
                            />
                        </view>
                    </view>
                    <view class="wifItem" style="margin-top: 30rpx">
                        <text>坐摔状态阈值</text>
                        <view class="inputBox">
                            <input
                                type="number"
                                v-model="minHumanEventsForDetection"
                                placeholder="请输入坐摔状态阈值"
                            />
                        </view>
                    </view>
                </view>
                <view class="modal-buttons">
                    <button class="btn cancle-btn" @click="cancleFall">
                        <text>取消</text>
                    </button>
                    <button class="btn phone-btn" @click="saveFallSetting">
                        <text>保存</text>
                    </button>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { save } from "../../utils/mqtt";

export default {
    name: "my",
    data() {
        return {
            devInfo: "",
            // 坐摔参数
            preFallSettingEnabled: 0,
            fallSettingEnabled: 0,
            lowZMax: 0.5,
            humanPredThreshold: 0.78,
            minEventsForDetection: 3,
            minHumanEventsForDetection: 2,
            lowHighSnrRatio: false,
            lowMidSnrRatio: false,
            // 坐摔检测弹窗
            showFallSettingModle: false,
        };
    },
    computed: {},

    watch: {
        fallSettingEnabled(newVal, oldVal) {
            this.preFallSettingEnabled = oldVal;

            if (newVal === 1) {
                // 显示弹窗（由 onFallSettingChange 控制即可）
                // this.showFallSettingModle = true;
            } else {
                this.showFallSettingModle = false;
                this.updateFallSetting(false); // 关闭时自动保存
            }
        },
    },

    methods: {
        goDeviceSetting() {
            uni.navigateTo({
                url: `/pagesA/adDevice/adDevice?devInfo=${JSON.stringify(
                    this.devInfo
                )}`,
            });
        },

        roomSetting() {
            const { devId, clientId } = this.devInfo;
            uni.navigateTo({
                url: `/pagesA/roomSetting/roomSetting?devId=${devId}&clientId=${clientId}`,
            });
        },
        cancleFall() {
            this.fallSettingEnabled = this.preFallSettingEnabled;
            this.showFallSettingModle = false;
        },
        // ====================== 初始化参数 ======================
        setFallSetting(devInfo) {
            console.log("初始化坐摔参数:", devInfo);
            Object.assign(this, {
                preFallSettingEnabled: devInfo.preFallSettingEnabled,
                fallSettingEnabled: devInfo.fallSettingEnabled ?? 0,
                lowZMax: devInfo.lowZMax == 0 ? 0.5 : devInfo.lowZMax,
                humanPredThreshold:
                    devInfo.humanPredThreshold == 0
                        ? 0.78
                        : devInfo.humanPredThreshold,
                minEventsForDetection:
                    devInfo.minEventsForDetection == 0
                        ? 3
                        : devInfo.minEventsForDetection,
                minHumanEventsForDetection:
                    devInfo.minHumanEventsForDetection == 0
                        ? 2
                        : devInfo.minHumanEventsForDetection,
                showFallSettingModle: false,
            });
        },

        // ====================== 监听切换 ======================
        onFallSettingChange({ detail }) {
            this.fallSettingEnabled = detail.value ? 1 : 0;
            this.showFallSettingModle = this.fallSettingEnabled === 1;
        },

        cancelFall() {
            this.fallSettingEnabled = this.preFallSettingEnabled;
            this.showFallSettingModle = false;
        },

        // ====================== 通用更新方法 ======================
        async updateFallSetting(showToast = true) {
            // 整理更新参数
            const payload = {
                ...this.devInfo,
                preFallSettingEnabled: this.preFallSettingEnabled,
                fallSettingEnabled: this.fallSettingEnabled,
                lowZMax: this.lowZMax,
                humanPredThreshold: this.humanPredThreshold,
                minEventsForDetection: this.minEventsForDetection,
                minHumanEventsForDetection: this.minHumanEventsForDetection,
            };

            try {
                const res = await this.$http.post(
                    "wap/device/updateDevice",
                    payload,
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                    }
                );

                if (res.data.code === 200) {
                    if (showToast) {
                        uni.showToast({
                            title: "设置成功",
                            icon: "success",
                            duration: 1500,
                        });
                    }
                } else {
                    uni.showToast({
                        title: res.data.message || "设置失败",
                        icon: "none",
                        duration: 1500,
                    });
                }
            } catch (err) {
                uni.showToast({
                    title: "网络异常，请稍后再试",
                    icon: "none",
                    duration: 1500,
                });
            }
        },

        // ====================== 保存/关闭 ======================
        async saveFallSetting() {
            await this.updateFallSetting();
            this.showFallSettingModle = false;
        },
    },

    onLoad(options) {
        if (JSON.stringify(options) != "{}") {
            this.devInfo = JSON.parse(options.devInfo);
        }
        this.setFallSetting(this.devInfo);
        // console.log("devInfo11111111", this.devInfo);
    },

    onUnload(options) {},
    onShow() {},
};
</script>
<style lang="less" scoped>
.home-warp {
    position: relative;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    .clientInfo {
        width: 700rpx;
        height: 180px;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 38rpx;
        box-sizing: border-box;
        padding: 30rpx 30rpx;
        .wifItem {
            width: 640rpx;
            display: flex;
            align-content: center;
            justify-content: space-between;
            border-bottom: 2rpx solid #ebeff5;
            padding-top: 30rpx;
            padding-bottom: 20rpx;
            image {
                width: 40rpx;
                height: 40rpx;
            }
            input {
                margin-left: auto;
                text-align: right;
            }
        }
    }

    .modal-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 333;

        .modal-container {
            width: 80%;
            background: #fff;
            border-radius: 16rpx;
            // overflow: hidden;
            animation: fadeIn 0.3s;

            .modal-header {
                padding: 30rpx;
                text-align: center;
                border-bottom: 1rpx solid #f5f5f5;

                .title {
                    font-size: 36rpx;
                    display: block;
                    margin-bottom: 10rpx;
                }
            }
            .modal-body {
                margin: 0 auto 0 auto;
                box-sizing: border-box;
                padding: 0 30rpx 20rpx 30rpx;
                .wifItem {
                    width: 550rpx;
                    display: flex;
                    align-content: center;
                    justify-content: space-between;
                    border-bottom: 2rpx solid #ebeff5;
                    padding-top: 30rpx;
                    padding-bottom: 20rpx;
                    image {
                        width: 40rpx;
                        height: 40rpx;
                    }
                    input {
                        margin-left: auto;
                        text-align: right;
                    }
                }
            }

            .modal-buttons {
                display: flex;
                padding: 20rpx;

                .btn {
                    flex: 1;
                    height: 90rpx;
                    margin: 15rpx 0;
                    border-radius: 45rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 32rpx;
                    border: none;
                    background: none;
                    position: relative;
                }
                .cancle-btn {
                    width: 40rpx;
                    background: linear-gradient(
                        105.95deg,
                        #ba978a 0%,
                        #a27867 100%
                    );
                    color: white;
                }

                .phone-btn {
                    margin-left: 10rpx;
                    background: linear-gradient(
                        105.95deg,
                        #ba978a 0%,
                        #a27867 100%
                    );
                    color: white;
                }
            }
        }
    }
}
</style>
