<template>
    <div class="skylight fan">
        <div class="table-title">
            <img src="../../assets/image/skylight.png" alt=""> 风机{{ indexs }}
        </div>
        <div class="title-tips">
            <div class="input-btn">
                <div class="btn btn-tips"  @click="changeOpen(0)" :class="openIndex == 0 ? 'blue' : 'green'">
                    {{ openIndex == 0 ? '无效' : '有效' }}
                </div>
            </div>
        </div>
        <div class="flex-view">
            <div class="input-btn">
                <div @click="changeOpen(1)" class="btn" :class="openIndex == 1 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
                </div>

                <div @click="changeOpen(2)" class="btn" :class="openIndex == 2 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
                </div>
                <div @click="changeOpen(3)" class="btn" :class="openIndex == 3 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
                </div>
            </div>

        </div>
        <div class="flex-view">
            <div class="input-btn">
                <div @click="changeIndexOpen(0)" class="btn" :class="actList1[0]=='1'?'blue':'off'">
                一号风组
            </div>
            <div @click="changeIndexOpen(1)" class="btn" :class="actList1[1]=='1'?'blue':'off'">
                二号风组
            </div>
            <div @click="changeIndexOpen(2)" class="btn" :class="actList1[2]=='1'?'blue':'off'">
                三号风组
            </div>
            <div @click="changeIndexOpen(3)" class="btn" :class="actList1[3]=='1'?'blue':'off'">
                四号风组
            </div>
            <div @click="changeIndexOpen(4)" class="btn" :class="actList1[4]=='1'?'blue':'off'">
                五号风组
            </div>
            </div>
            
        </div>
        <div class="flex-view padding-none">
            <div class="input-main-60" style="width: auto;">
        <span>温度确认时间</span>
        <input @blur="blurChange('21665', $event)" v-model="inputData['21665']" @input="change('21665', $event)"
          type="text" value="60" placeholder="60" />
        <span>分钟</span>
      </div>
        </div>
        <div class="bold-title">通道输入信号类型</div>
        <div class="input-100-view">
            <span>风机控温宽度</span>
            <input @blur="blurChange10(21602, $event)" v-model="inputData[21602]" @input="changeCount10(21602, $event)"
                class="input-180" type="text" placeholder="0.0">
            <span>℃</span>
        </div>
        <div v-if="indexs==1" class="input-100-view">
            <div class="title">
                一号风机
            </div>
            <div class="line"></div>
            <span>室内1#平均温度大于</span>
            <input @blur="blurChangeCount(21603, $event)" v-model="inputData[21603]" @input="changeCountData(21603, $event)"
                class="input-140" type="text" placeholder="0.0">
            <span>℃启动</span>
            <div class="line"></div>
            <span>风机通道</span>
            <input @blur="blurChange(21604, $event)" v-model="inputData[21604]" @input="change(21604, $event)"
                class="input-100" type="text" placeholder="0.0">
        </div>
        <div v-if="indexs==2" class="input-100-view">
            <div class="title">
                二号风机
            </div>
            <div class="line"></div>
            <span>室内1#平均温度大于</span>
            <input @blur="blurChangeCount(21605, $event)" v-model="inputData[21605]" @input="changeCountData(21605, $event)"
                class="input-140" type="text" placeholder="0.0">
            <span>℃启动</span>
            <div class="line"></div>
            <span>风机通道</span>
            <input @blur="blurChange(21606, $event)" v-model="inputData[21606]" @input="change(21606, $event)"
                class="input-100" type="text" placeholder="0.0">
        </div>
        <div v-if="indexs==3" class="input-100-view">
            <div class="title">
                三号风机
            </div>
            <div class="line"></div>
            <span>室内1#平均温度大于</span>
            <input @blur="blurChangeCount(21607, $event)" v-model="inputData[21607]" @input="changeCountData(21607, $event)"
                class="input-140" type="text" placeholder="0.0">
            <span>℃启动</span>
            <div class="line"></div>
            <span>风机通道</span>
            <input @blur="blurChange(21608, $event)" v-model="inputData[21608]" @input="change(21608, $event)"
                class="input-100" type="text" placeholder="0.0">
        </div>
        <div v-if="indexs==4" class="input-100-view">
            <div class="title">
                四号风机
            </div>
            <div class="line"></div>
            <span>室内1#平均温度大于</span>
            <input @blur="blurChangeCount(21609, $event)" v-model="inputData[21609]" @input="changeCountData(21609, $event)"
                class="input-140" type="text" placeholder="0.0">
            <span>℃启动</span>
            <div class="line"></div>
            <span>风机通道</span>
            <input @blur="blurChange(21610, $event)" v-model="inputData[21610]" @input="change(21610, $event)"
                class="input-100" type="text" placeholder="0.0">
        </div>
        <div v-if="indexs==5" class="input-100-view margin-none">
            <div class="title">
                五号风机
            </div>
            <div class="line"></div>
            <span>室内1#平均温度大于</span>
            <input @blur="blurChangeCount(21611, $event)" v-model="inputData[21611]" @input="changeCountData(21611, $event)"
                class="input-140" type="text" placeholder="0.0">
            <span>℃启动</span>
            <div class="line"></div>
            <span>风机通道</span>
            <input @blur="blurChange(21612, $event)" v-model="inputData[21612]" @input="change(21612, $event)"
                class="input-100" type="text" placeholder="0.0">
        </div>


    </div>
</template>
<script>
export default {
    data() {
        return {
            indexs: 1,
            inputData: [],
            //有效性设置
            openIndex: 0,
            actList1:[],
      loading:null,
        }
    },
    watch: {
        $route(newVal, oldVal) {
            const that = this;
            this.indexs = this.$route.query.id ? this.$route.query.id : 1;
            // setTimeout(() => {
            //     that.dataInit();
            // }, 0);
        },
    },

    mounted() {
        const that = this;
        this.indexs = this.$route.query.id ? this.$route.query.id : 1;
        this.loading = this.$loading({
    lock: true,
    text: '加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
        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: {
        padString(str, length) {
            return str.padStart(length, '0');
        },
        //开启几号风机
        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.changeBtn('21601', dataNum);
        },
        //有效性修改
        changeOpen(index) {
            this.openIndex = index
            var dataNum = {
                target: {
                    value: this.openIndex,
                },
            };
            this.changeBtn('21600', dataNum);
        },
        //失去焦点 计算公式 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 (store.nowInput != el.target.value) {
                this.changeData(data);
            }
            // 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
        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 (store.nowInput != el.target.value) {
                this.changeData(data);
            }
            // if (this.timer) {
            //     this.timer && clearInterval(this.timer);
            //     this.changeData(data);
            // }

        },
           //反向计算 计算公式 (x-400) / 10
        changeCountData(code, el) {
            var data = (el.target.value * 10) + 400
            var sendData = {
                target: {
                    value: data
                }
            }
            this.change(code, sendData)
        },
        // 计算展示值 计算公式 (x-400) / 10
        countData(data) {
            if (data) {
                return (data - 400) / 10
            } else {
                return 0
            }
        },
        getAct21601(){
            this.actList1=[]
            var num = this.inputData['21601']
            var num1 = this.padString(num.toString(2), 5)
            var openListNew=[]
            openListNew = num1.split("")
            openListNew.forEach((el, index) => {
                this.actList1.push(openListNew[openListNew.length - index - 1])
            })
        },
        dataInit() {
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,

            };
            this.api.getReadControlliShuiControl(data).then((res) => {
                this.loading.close()
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.openIndex = this.inputData[21600]
                    this.getAct21601()
                    this.inputData[21603] = this.countData(this.inputData[21603])
                    this.inputData[21605] = this.countData(this.inputData[21605])
                    this.inputData[21607] = this.countData(this.inputData[21607])
                    this.inputData[21609] = this.countData(this.inputData[21609])
                    this.inputData[21611] = this.countData(this.inputData[21611])
                    this.inputData[21602] = this.countData10(this.inputData[21602])

                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
    //全选文本
    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 (store.nowInput != el.target.value) {
                this.changeData(data);
            }
            // 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>
    