<template>
    <view>
        <view class="home-warp" v-if="nextTip == 'one'">
            <view class="bodyContent">
                <view
                    class="deviceInfo"
                    v-if="clientId"
                    @click="scanCode"
                    :class="{ 'fade-in': showDeviceInfo }"
                >
                    <image src="../../static/ln_small.png" alt=""></image>
                    <view class="deviceText">{{ clientId }}</view>
                </view>
                <view class="wifiScan" @click="scanCode" v-if="!clientId">
                    <image src="../../static/wifiScan.png" alt=""></image>
                    <view class="wifiText" v-if="!clientId"
                        >点击扫一扫识别设备</view
                    >
                </view>
            </view>
            <view class="clientInfo">
                <view class="wifItem">
                    <text>设备名称</text>
                    <input v-model="devName" placeholder="请输入设备名称" />
                </view>
                <view class="wifItem" style="margin-top: 30rpx">
                    <text>安装位置</text>
                    <picker
                        @change="bindPickerChange"
                        :value="installPositionIndex"
                        :range="selectArray"
                        style="margin-left: auto"
                    >
                        <view class="uni-input">{{
                            selectArray[installPositionIndex]
                        }}</view>
                    </picker>

                    <image
                        src="../../static/rightArrow.png"
                        alt=""
                        @click="showPicker"
                    ></image>
                </view>
                <view class="wifItem" style="margin-top: 30rpx">
                    <text>安装方式</text>
                    <picker
                        @change="bindPickerChangeThree"
                        :value="mountPlainIndex"
                        :range="mountPlainArray"
                        style="margin-left: auto"
                    >
                        <view class="uni-input">{{
                            mountPlainArray[mountPlainIndex]
                        }}</view>
                    </picker>
                    <image
                        src="../../static/rightArrow.png"
                        alt=""
                        @click="showPicker"
                    ></image>
                </view>
            </view>
            <view class="bottom">
                <view class="nextTip" @click="goNextTip">完成</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            editFlag: false,
            selectArray: ["卫生间", "客厅", "餐厅", "卧室"],
            angleArray: ["0", "90", "180", "270"],
            mountPlainArray: ["墙装", "顶装"],
            installPositionIndex: 0,
            northAngleIndex: 0,
            mountPlainIndex: 0,
            pickModel: false,
            environmentJudge: true,
            nextTip: "one",
            // 设备信息参数
            clientId: "",
            userId: uni.getStorageSync("userId"),
            devName: "",
            width: "",
            length: "",
            height: "",
            wifiName: "",
            wifiPassword: "",
            northAngle: "0",
            mountPlain: "Wall",
            installPosition: "Toilet",
            xxStart: "",
            xxEnd: "",
            yyStart: "",
            yyEnd: "",
            zzStart: "",
            zzEnd: "",
            // statusLight: 1,
            showDeviceInfo: false,
            devInfo: "",
        };
    },
    watch: {
        clientId(newVal) {
            if (newVal) {
                this.$nextTick(() => {
                    this.showDeviceInfo = true;
                });
            } else {
                this.showDeviceInfo = false;
            }
        },
    },
    computed: {},
    methods: {
        scanCode() {
            wx.scanCode({
                success: (res) => {
                    this.clientId = res.result;
                },
            });
        },
        showPicker() {
            this.pickModel = true;
        },
        bindPickerChange(e) {
            this.installPositionIndex = e.detail.value;
            if (this.installPositionIndex == "0") {
                this.installPosition = "Toilet";
            } else if (this.installPositionIndex == "1") {
                this.installPosition = "LivingRoom";
            } else if (this.installPositionIndex == "2") {
                this.installPosition = "Restaurant";
            } else if (this.installPositionIndex == "3") {
                this.installPosition = "Bedroom";
            }
        },
        bindPickerChangeTwo(e) {
            this.northAngleIndex = e.detail.value;
            this.northAngle = this.angleArray[e.detail.value];
        },
        bindPickerChangeThree(e) {
            this.mountPlainIndex = e.detail.value;
            this.mountPlain = this.mountPlainArray[e.detail.value];
            if (this.mountPlainArray[e.detail.value] == "墙装") {
                this.mountPlain = "Wall";
            } else {
                this.mountPlain = "Ceiling";
            }
        },
        goNextTip() {
            if (!this.devName.length > 10) {
                uni.showModal({
                    content: "设备名称过长！",
                    showCancel: 1500,
                });
                return;
            }
            if (!this.clientId) {
                uni.showModal({
                    content: "请先开始扫码！",
                    showCancel: 1500,
                });
                return;
            }
            if (!this.devName) {
                uni.showModal({
                    content: "请输入设备名称！",
                    showCancel: 1500,
                });
                return;
            }
            this.bindDevice();
        },
        bindDevice() {
            let deviceBandingParams = {
                clientId: this.clientId,
                userId: uni.getStorageSync("userId"),
                devName: this.devName,
                mountPlain:
                    this.mountPlain == "" ? "mountPlain" : this.mountPlain,
                installPosition: this.installPosition,
            };
            this.$http
                .post("wap/device/deviceBinding", deviceBandingParams, {
                    header: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: "绑定成功",
                            icon: "success",
                            duration: 1500,
                        });
                        uni.reLaunch({
                            url: "/pages/home/home",
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: "none",
                            duration: 1500,
                        });
                    }
                });
        },
        setDevInfo(devInfo) {
            this.clientId = devInfo.clientId;
            this.devName = devInfo.devName;
            this.height = devInfo.height;
            this.wifiName = devInfo.wifiName;
            this.wifiPassword = devInfo.wifiPassword;
            this.northAngle = devInfo.northAngle;
            if (this.northAngle == 0) {
                this.northAngleIndex = 0;
            } else if (this.northAngle == 90) {
                this.northAngleIndex = 1;
            } else if (this.northAngle == 180) {
                this.northAngleIndex = 2;
            } else if (this.northAngle == 270) {
                this.northAngleIndex = 3;
            }
            this.mountPlain = devInfo.mountPlain;
            if (this.northAngle == "Wall") {
                this.mountPlainIndex = 0;
            } else if (this.northAngle == 90) {
                this.mountPlainIndex = 1;
            }
            this.installPosition = devInfo.installPosition;

            if (this.installPosition == "Toilet") {
                this.installPositionIndex = 0;
            } else if (this.installPosition == "LivingRoom") {
                this.installPositionIndex = 1;
            } else if (this.installPosition == "Restaurant") {
                this.installPositionIndex = 2;
            } else if (this.installPosition == "Bedroom") {
                this.installPositionIndex = 3;
            }
            this.xxStart = devInfo.xxStart;
            this.xxEnd = devInfo.xxEnd;
            this.yyStart = devInfo.yyStart;
            this.yyEnd = devInfo.yyEnd;
            this.zzStart = devInfo.zzStart;
            this.zzEnd = devInfo.zzEnd;
            // this.statusLight = devInfo.statusLight;
        },
    },
    onLoad(options) {
        if (JSON.stringify(options) != "{}") {
            this.devInfo = JSON.parse(options.devInfo);
            this.setDevInfo(this.devInfo);
            this.editFlag = true;
        } else {
            console.log("没有参数");
        }
    },

    onUnload(options) {},
    onShow() {},
};
</script>
<style lang="less" scoped>
.home-warp {
    position: relative;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    .bodyContent {
        width: 700rpx;
        height: 600rpx;
        position: relative;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 38rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        padding-top: 30rpx;
        .deviceInfo {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 24%;
            left: 36%;
            transform: translate(-50%, -50%);
            padding: 0 auto;
            padding-top: 40rpx;
            width: 200rpx;
            margin: 0 auto;
            transition: all 0.8s ease;
            opacity: 0;
            transform: translateY(20rpx);
            image {
                width: 200rpx;
                height: 200rpx;
            }
            .wifiText {
                margin-top: 20rpx;
                text-align: center;
                font-weight: 500;
            }
            .deviceText {
                text-align: center;
                // margin-left: -10px;
            }
        }

        .deviceInfo.fade-in {
            opacity: 1;
            transform: translateY(0);
        }

        .wifiScan {
            margin: 0 auto;
            width: 250rpx;
            height: auto;
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center; // 横向居中

            image {
                width: 188rpx;
                height: 188rpx;
            }

            .wifiText {
                margin-top: 20rpx;
                color: #95a4b3;
                font-size: 24rpx;
                text-align: center;
                width: auto; // 自适应宽度
                max-width: 400rpx; // 限制最大宽度，防止太宽撑开
                word-break: break-word; // 超出一行自动换行
            }
        }

        .wifItem {
            width: 640rpx;
            height: 40rpx;
            display: flex;
            align-content: center;
            border-bottom: 2rpx solid #ebeff5;
            padding-bottom: 38rpx;
            image {
                width: 40rpx;
                height: 40rpx;
            }
            text {
                margin-left: 20rpx;
                color: #111111;
                font-size: 32rpx;
            }
            input {
                margin-left: auto;
                text-align: right;
            }

            .refresh {
                width: 80rpx;
                height: 50rpx;
                margin-left: 10rpx;
                border-radius: 10rpx;
                background-color: #f3e2dd;
                color: #151515;
                text-align: center;
            }
        }

        .btn {
            margin: 0 auto;
            margin-top: 38rpx;
            width: 240rpx;
            height: 75rpx;
            background: #f3e2dd;
            border-radius: 60rpx;
            text-align: center;
            line-height: 75rpx;
            color: #111111;
            font-size: 32rpx;
        }
    }

    .clientInfo {
        width: 700rpx;
        height: 180px;
        margin: 20rpx auto 0 auto;
        background: #ffffff;
        border-radius: 38rpx;
        box-sizing: border-box;
        padding: 30rpx 30rpx;
        .wifItem {
            width: 640rpx;
            height: 40rpx;
            display: flex;
            border-bottom: 2rpx solid #ebeff5;
            padding-bottom: 38rpx;
            text {
                margin-left: 20rpx;
                color: #111111;
                font-size: 32rpx;
            }
            input {
                margin-left: auto;
                // width: 70%;
                text-align: right;
            }
            image {
                width: 30rpx;
                height: 30rpx;
                margin-top: 10rpx;
            }
        }
    }
    .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 170rpx;
        background: #ffffff;
        box-shadow: 0rpx 1.17rpx 0rpx #eaeaea inset;

        .nextTip {
            width: 675rpx;
            height: 95rpx;
            background: linear-gradient(97.91deg, #a27867 0%, #74483d 100%);
            border-radius: 28rpx;
            box-shadow: 0rpx 4.69rpx 18.75rpx rgba(72, 41, 29, 0.15),
                0rpx 9.38rpx 9.38rpx rgba(154, 132, 89, 0.2),
                0rpx -4.69rpx 28.13rpx 4.69rpx #a16647 inset;

            font-weight: 500;
            color: #ffffff;
            font-size: 32rpx;
            text-align: center;
            margin: 30rpx auto;
            line-height: 95rpx;
        }
    }
}
</style>
