<template>
    <div class="wetFan">
        <div class="table-title">
            <img src="../../assets/img/LED.png" alt="">补光灯&nbsp;&nbsp;&nbsp;&nbsp;
            <div @click="changeOpen(0)" class="flex-view border-none">
             <div  :class="inputData[21400] == 0 ? 'sel' : 'no-sel'"></div>
              有效性
           </div>
        </div>
        <div class="title-tips">
            工作方式选择
        </div>
        <div class="flex-view">
            <div class="input-btn ">
                <div class="btn" @click="changeOpen(1)" :class="inputData[21400] == 1 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
                </div>
                <div class="btn" @click="changeOpen(2)" :class="inputData[21400] == 2 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
                </div>
                <div class="btn" @click="changeOpen(3)" :class="inputData[21400] == 3 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
                </div>
            </div>
        </div>
        <div class="text-tips">手动启动时开灯</div>
        <div class="flex-view">
            <div class="input-btn ">
                <div class="btn btn-w80" @click="changeIndexOpen1(0)" :class="actList2[0] == '1' ? 'blue' : 'off'">
                    1#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen1(1)" :class="actList2[1] == '1' ? 'blue' : 'off'">
                    2#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen1(2)" :class="actList2[2] == '1' ? 'blue' : 'off'">
                    3#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen1(3)" :class="actList2[3] == '1' ? 'blue' : 'off'">
                    4#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen1(4)" :class="actList2[4] == '1' ? 'blue' : 'off'">
                    5#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen1(5)" :class="actList2[5] == '1' ? 'blue' : 'off'">
                    6#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen1(6)" :class="actList2[6] == '1' ? 'blue' : 'off'">
                    7#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen1(7)" :class="actList2[7] == '1' ? 'blue' : 'off'">
                    8#灯
                </div>
            </div>
        </div>
        <div class="flex-view padding-none border-none shrink-none">
            <div class="input-btn">
                <div class="btn btn-w80" @click="changeIndexOpen2(0)" :class="actList3[0] == '1' ? 'blue' : 'off'">
                    {{actList3[0] == '1' ? '有效' : '无效'}}
                </div>
            </div>
            <div class="input-main-80">
                <span>高温报警时，禁止启动补光灯</span>
            </div>
            <div class="input-btn">
                <div class="btn btn-w80" @click="changeIndexOpen2(1)" :class="actList3[1] == '1' ? 'blue' : 'off'">
                    {{actList3[1] == '1' ? '有效' : '无效'}}
                </div>
            </div>
            <div class="input-main-80">
                <span>使用1#日标温度</span>
            </div>
            <div class="input-btn">
                <div class="btn btn-w80" @click="changeIndexOpen2(2)" :class="actList3[2] == '1' ? 'blue' : 'off'">
                    {{actList3[2] == '1' ? '有效' : '无效'}}
                </div>
            </div>
            <div class="input-main-80">
                <span>使用2#日标温度</span>
            </div>
        </div>
        <div class="flex-view padding-none border-none shrink-none">
            <div class="input-btn">
                <div class="btn btn-w80" @click="changeIndexOpen2(3)" :class="actList3[3] == '1' ? 'blue' : 'off'">
                    {{actList3[3] == '1' ? '有效' : '无效'}}
                </div>
            </div>
            <div class="input-main-80">
                <span>室外关照大于</span>
                <input @blur="blurChange10(21403, $event)" v-model="inputData[21403]" @input="changeCount10(21403, $event)"
                 type="text" placeholder="0">
                <span>时，禁止启用补光灯。 (KLux)</span>
            </div>
        </div>
        <div class="flex-view padding-none shrink-none">
            <div class="input-main-80">
                <span>多组补光灯启动时，间隔</span>
                <input @blur="blurChange(21424, $event)" v-model="inputData[21424]" @input="change(21424, $event)"
                 type="text" placeholder="0">
                <span>秒顺序启动，防止同时启动瞬间功率过大</span>
            </div>
        </div>
        <div class="text-tips">时段{{indexs}}</div>
        <div class="flex-view border-none padding-none shrink-none">
            <div class="input-main-80">
                <input @blur="blurChange(startList[indexs-1]-4, $event)" v-model="inputData[startList[indexs-1]-4]" @input="change(startList[indexs-1]-4, $event)"
                 type="text" placeholder="0">
                <span>:</span>
                <input @blur="blurChange(startList[indexs-1]-3, $event)" v-model="inputData[startList[indexs-1]-3]" @input="change(startList[indexs-1]-3, $event)"
                 type="text" placeholder="0">
                <span>-</span>
                <input @blur="blurChange(startList[indexs-1]-2, $event)" v-model="inputData[startList[indexs-1]-2]" @input="change(startList[indexs-1]-2, $event)"
                 type="text" placeholder="0">
                <span>:</span>
                <input @blur="blurChange(startList[indexs-1]-1, $event)" v-model="inputData[startList[indexs-1]-1]" @input="change(startList[indexs-1]-1, $event)"
                 type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="input-btn ">
                <div class="btn btn-w80" @click="changeIndexOpen(0)" :class="actList1[0] == '1' ? 'blue' : 'off'">
                    1#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen(1)" :class="actList1[1] == '1' ? 'blue' : 'off'">
                    2#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen(2)" :class="actList1[2] == '1' ? 'blue' : 'off'">
                    3#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen(3)" :class="actList1[3] == '1' ? 'blue' : 'off'">
                    4#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen(4)" :class="actList1[4] == '1' ? 'blue' : 'off'">
                    5#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen(5)" :class="actList1[5] == '1' ? 'blue' : 'off'">
                    6#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen(6)" :class="actList1[6] == '1' ? 'blue' : 'off'">
                    7#灯
                </div>
                <div class="btn btn-w80" @click="changeIndexOpen(7)" :class="actList1[7] == '1' ? 'blue' : 'off'">
                    8#灯
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            inputData: [],
            indexs: 1,
            actList1: [],
            actList2: [],
            actList3: [],
            startList:[21408,21413,21418,21423],
        }
    },
    watch: {
        $route(newVal, oldVal) {
            const that = this;
            this.indexs = this.$route.query.id ? this.$route.query.id : 1;
            setTimeout(() => {
            that.getActive1();
        }, 0);
        },
    },
    mounted() { 
        const that = this;
        this.indexs = this.$route.query.id ? this.$route.query.id : 1;
        setTimeout(() => {
            that.dataInit();
        }, 0);
        //input获取焦点后全选
        let inputList = document.querySelectorAll('input');
        for (let index = 0; index < inputList.length; index++) {
            inputList[index].onfocus = this.selectValue;//input放入焦点，全选文本
        }
    },
    methods: {
         //失去焦点 计算公式 x/10
         blurChange10(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: el.target.value * 10,
            }; //避免开启多个计时器
            if (this.timer) {
                this.timer && clearInterval(this.timer);
                this.changeData(data);
            }

        },
        //反向计算 计算公式 x/10
        changeCount10(code, el) {
            var data = el.target.value * 10
            var sendData = {
                target: {
                    value: data
                }
            }
            this.change(code, sendData)
        },
        // 计算展示值 计算公式 x/10
        countData10(data) {
            if (data) {
                return data / 10
            } else {
                return 0
            }
        },
        // 计算展示值 计算公式 (x - 400) / 10
        countData(data) {
            if (data) {
                return (data - 400) / 10
            } else {
                return 0
            }
        },
        //失去焦点
        blurChangeCount(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: (el.target.value * 10) + 400,
            }; //避免开启多个计时器
            if (this.timer) {
                this.timer && clearInterval(this.timer);
                this.changeData(data);
            }
        },
        changeCountData(code, el) {
            var data = (el.target.value * 10) + 400
            var sendData = {
                target: {
                    value: data
                }
            }
            this.change(code, sendData)
        },
         //开关无效
         changeIndexOpen(active) {
            if (this.actList1[active] == '1') {
                this.actList1[active] = '0'
            } else {
                this.actList1[active] = '1'
            }
            this.$forceUpdate();
            var revList = this.actList1.slice().reverse()
            var num = revList.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.inputData[this.startList[this.indexs - 1]]=parseInt(num, 2)
            this.changeBtn(this.startList[this.indexs - 1], dataNum);
        },
            //开关无效
            changeIndexOpen1(active) {
            if (this.actList2[active] == '1') {
                this.actList2[active] = '0'
            } else {
                this.actList2[active] = '1'
            }
            this.$forceUpdate();
            var revList = this.actList2.slice().reverse()
            var num = revList.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn(21401, dataNum);
        },
            //开关无效
            changeIndexOpen2(active) {
            if (this.actList3[active] == '1') {
                this.actList3[active] = '0'
            } else {
                this.actList3[active] = '1'
            }
            this.$forceUpdate();
            var revList = this.actList3.slice().reverse()
            var num = revList.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn(21402, dataNum);
        },
        getActive1() {
            this.actList1 = []
            var num = this.inputData[this.startList[this.indexs - 1]]
            
            var num1 = this.padString(num.toString(2), 8)
            var openListNew = []
            openListNew = num1.split("")
            this.actList1 = openListNew.reverse();
        },
        getActive2() {
            this.actList2 = []
            var num = this.inputData[21401]
            
            var num1 = this.padString(num.toString(2), 8)
            var openListNew = []
            openListNew = num1.split("")
            this.actList2 = openListNew.reverse();
        },
        getActive3() {
            this.actList3 = []
            var num = this.inputData[21402]
            
            var num1 = this.padString(num.toString(2), 4)
            var openListNew = []
            openListNew = num1.split("")
            this.actList3 = openListNew.reverse();
        },
          // 工作方式选择
          changeOpen(index) {
            this.inputData[21400] = index;
            var dataNum = {
                target: {
                    value: index,
                },
            };
            this.changeBtn(21400, dataNum);
        },
        dataInit() {
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            };
            this.api.readfilllight(data).then(res => {
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.getActive1()
                    this.getActive2()
                    this.getActive3()
                }
            })
        },
        //二进制转换后的补全
        padString(str, length) {
            return str.padStart(length, '0');
        },
        //反转数组 不影响原数组
        myReverse(arr) {
            return [...arr].reverse()
        },
        //全选文本
        selectValue(e) {
            var store = this.$store.state
            store.nowInput = e.target.value
            e.currentTarget.select();
        },
        //失去焦点
        blurChange(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: el.target.value,
            }; //避免开启多个计时器
            if (this.timer) {
                this.timer && clearInterval(this.timer);
                this.changeData(data);
            }

        },
        //修改数据的函数
        changeBtn(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: el.target.value,
            };
            this.delayTimerBtn(0, data);
        },
        //切换btn的限制 写入停止后j*100毫秒调取函数
        delayTimerBtn(i, data) {
            const that = this;
            //整体接口
            let j = this.$store.state.lateSendBtn;
            //避免开启多个计时器
            this.timer && clearInterval(this.timer);

            this.timer = setInterval(() => {
                ++i;
                if (i == j) {
                    that.changeData(data);
                    clearInterval(this.timer);
                }
            }, 100);
        },
        change(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: el.target.value,
            };
            this.delayTimer(0, data);
        },
        //限制 写入停止后j*100毫秒调取函数
        delayTimer(i, data) {
            const that = this;
            //整体接口
            let j = this.$store.state.lateSend;
            //避免开启多个计时器
            this.timer && clearInterval(this.timer);

            this.timer = setInterval(() => {
                ++i;
                if (i == j) {
                    that.changeData(data);
                    clearInterval(this.timer);
                }
            }, 100);
        },
        changeData(data) {
            var store = this.$store.state
            this.api.postControlWrite(data).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: "success",
                    });
                    store.nowInput = ''
                    // this.dataInit();
                } else {
                    this.inputData[data.regAddress] = store.nowInput
                    this.$message.error(res.data.msg);
                }
                this.timer = null
            });
        },
    },

}
</script>
<style lang="scss"></style>
  