<template>
    <div class=" irrigateSet upload">
            <div class="table-title">
                <img src="../../assets/image/upload.png" alt=""> 数据上传
            </div>
            <div class="flex-view">
                <div class="input-main">
                    <span>环境数据上传时间</span>
                    <input v-model="inputData['21500']" @input="change('21500', $event)" type="number" placeholder="0">
                    <span>秒</span>
                </div>

            </div>
            <div class="flex-view border-none">
                <div class="upload-view">
                    <div class="page-title upload-title">
                        气象站
                    </div>
                    <div class="upload-content">
                        <div @click="selList1(index)" v-for="item, index in list1" :key="index">
                            <div v-if="actList1.indexOf(index) == -1" class="no-sel"></div>
                            <div v-else class="sel"></div>
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div class="upload-view">
                    <div class="page-title upload-title">
                        平均值
                    </div>
                    <div class="upload-content">
                        <div @click="selList2(index)" v-for="item, index in list2" :key="index">
                            <div v-if="actList2.indexOf(index) == -1" class="no-sel"></div>
                            <div v-else class="sel"></div>
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div class="upload-view">
                    <div class="page-title upload-title">
                        目标值
                    </div>
                    <div class="upload-content upload-content1 ">
                        <div @click="selList3(index)" v-for="item, index in list3" :key="index">
                            <div v-if="actList3.indexOf(index) == -1" class="no-sel"></div>
                            <div v-else class="sel"></div>
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div class="upload-view">
                    <div class="page-title upload-title">
                        通道传感器1-16
                    </div>
                    <div class="upload-content">
                        <div @click="selList4(index)" v-for="item, index in list4" :key="index">
                            <div v-if="actList4.indexOf(index) == -1" class="no-sel"></div>
                            <div v-else class="sel"></div>
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div class="upload-view">
                    <div class="page-title upload-title">
                        通道传感器17-32
                    </div>
                    <div class="upload-content">
                        <div @click="selList5(index)" v-for="item, index in list5" :key="index">
                            <div v-if="actList5.indexOf(index) == -1" class="no-sel"></div>
                            <div v-else class="sel"></div>
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div class="upload-view">
                    <div class="page-title upload-title">
                        通道传感器33-48
                    </div>
                    <div class="upload-content">
                        <div @click="selList6(index)" v-for="item, index in list6" :key="index">
                            <div v-if="actList6.indexOf(index) == -1" class="no-sel"></div>
                            <div v-else class="sel"></div>
                            {{ item }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
export default {
    data() {
        return {
            //气象站数据
            actList1: [],
            actList1New: [],
            list1: ['室外平均温度传感器',
                '室外平均湿度传感器',
                '室外平均光照传感器',
                '室外平均风速传感器',
                '室外平均风向传感器',
                '室外平均雨雪传感器',
                '室外平均雨量传感器',
                '气象站电池电压(V)',
                '气象站信号强度(RSSI)',
                '气象站信噪比(SNR)',
                '室外平均露点温度',
                '室外平均C02传感器',
                '室外平均土温传感器',
                '室外平均土湿传感器'],

                //平均值数据
            actList2: [],
            actList2New: [],
            list2: ['目标水肥PH数据',
                '目标水肥EC数据',
                '平均水肥PH数据',
                '平均水肥EC数据',
                '1#水肥PH数据',
                '1#水肥EC数据',
                '2#水肥PH数据',
                '2#水肥EC数据',
                '1#通道传感器数据',
                '2#通道传感器数据',
                '3#通道传感器数据',
                '4#通道传感器数据',
                '5#通道传感器数据',
                '6#通道传感器数据'],
                //目标值数据
                actList3: [],
            actList3New: [],
            list3: ['目标温度传感器1',
                '目标温度传感器2',
                '目标湿度传感器1',
                '目标湿度传感器2',
                '目标CO2传感器1',],
//传感器1-16
                actList4: [],
            actList4New: [],
            list4: ['通道传感器1',
                '通道传感器2',
                '通道传感器3',
                '通道传感器4',
                '通道传感器5',
                '通道传感器6',
                '通道传感器7',
                '通道传感器8',
                '通道传感器9',
                '通道传感器10',
                '通道传感器11',
                '通道传感器12',
                '通道传感器13',
                '通道传感器14',
                '通道传感器15',
                '通道传感器16',],
//传感器17-32
                actList5: [],
            actList5New: [],
            list5: ['通道传感器17',
                '通道传感器18',
                '通道传感器19',
                '通道传感器20',
                '通道传感器21',
                '通道传感器22',
                '通道传感器23',
                '通道传感器24',
                '通道传感器25',
                '通道传感器26',
                '通道传感器27',
                '通道传感器28',
                '通道传感器29',
                '通道传感器30',
                '通道传感器31',
                '通道传感器32',],
                //传感器32-48
                actList6: [],
            actList6New: [],
            list6: ['通道传感器33',
                '通道传感器34',
                '通道传感器35',
                '通道传感器36',
                '通道传感器37',
                '通道传感器38',
                '通道传感器39',
                '通道传感器40',
                '通道传感器41',
                '通道传感器42',
                '通道传感器43',
                '通道传感器44',
                '通道传感器45',
                '通道传感器46',
                '通道传感器47',
                '通道传感器48',],
            inputData: [],

        }
    },
    mounted() {
        this.dataInit()
         //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');
        },
        //由于bit0和页面内是相反的 所以要倒着来 
        getAct1() {
            this.actList1=[]
            var num = this.inputData['21501']
            var num2 = this.padString(num.toString(2), 14)
            this.actList1New=num2.split("")
            this.actList1New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList1.push(this.actList1New.length-index-1)
                }
            })
        },
        getAct2() {
            this.actList2=[]
            var num = this.inputData['21503']
            var num2 = this.padString(num.toString(2), 14)
            this.actList2New=num2.split("")
            this.actList2New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList2.push(this.actList2New.length-index-1)
                }
            })
        },
        getAct3() {
            this.actList3=[]
            var num = this.inputData['21502']
            var num3 = this.padString(num.toString(2), 5)
            this.actList3New=num3.split("")
            this.actList3New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList3.push(this.actList3New.length-index-1)
                }
            })
        },
        getAct4() {
            this.actList4=[]
            var num = this.inputData['21504']
            var num4 = this.padString(num.toString(2), 16)
            this.actList4New=num4.split("")
            this.actList4New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList4.push(this.actList4New.length-index-1)
                }
            })
        },
        getAct5() {
            this.actList5=[]
            var num = this.inputData['21505']
            var num5 = this.padString(num.toString(2), 16)
            this.actList5New=num5.split("")
            this.actList5New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList5.push(this.actList5New.length-index-1)
                }
            })
        },
        getAct6() {
            this.actList6=[]
            var num = this.inputData['21506']
            var num6 = this.padString(num.toString(2), 16)
            this.actList6New=num6.split("")
            this.actList6New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList6.push(this.actList6New.length-index-1)
                }
            })
        },
        dataInit() {
            this.actList1New = []
            this.list1.forEach((el, index) => {
                this.actList1New.push('0')
            })
            this.actList1New = []
            this.list2.forEach((el, index) => {
                this.actList1New.push('0')
            })
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
           
            };
            this.api.getControldataUpload(data).then((res) => {
                if (res.data.code == 200) {
                    this.inputData = res.data.data;

                    this.getAct1()
                    this.getAct2()
                    this.getAct3()
                    
                    this.getAct4()
                    this.getAct5()
                    this.getAct6()
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
            //全选文本
selectValue(e) {
	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) {
            this.api.postControlWrite(data).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: "success",
                    });
                    this.dataInit();
                } else {
                    this.$message.error("请求出错");
                }
                       this.timer=null
            });
        },
        selList1(index) {
            if (this.actList1.indexOf(index) == -1) {
                this.actList1.push(index)
            } else {
                this.actList1.splice(this.actList1.indexOf(index), 1)
            }
            this.actList1New=['0','0','0','0','0','0','0','0','0','0','0','0','0','0',]
            this.actList1.forEach((el, index) => {
                this.actList1New[this.actList1New.length-el-1] = '1'
            })
           
            var num = this.actList1New.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn('500', dataNum);
        },
        selList2(index) {
            if (this.actList2.indexOf(index) == -1) {
                this.actList2.push(index)
            } else {
                this.actList2.splice(this.actList2.indexOf(index), 1)
            }
            this.actList2New=['0','0','0','0','0','0','0','0','0','0','0','0','0','0',]
            this.actList2.forEach((el, index) => {
                this.actList2New[this.actList2New.length-el-1] = '1'
            })
         
            var num = this.actList2New.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn('501', dataNum);
        },
        selList3(index) {
            if (this.actList3.indexOf(index) == -1) {
                this.actList3.push(index)
            } else {
                this.actList3.splice(this.actList3.indexOf(index), 1)
            }
            this.actList3New=['0','0','0','0','0']
            this.actList3.forEach((el, index) => {
                this.actList3New[this.actList3New.length-el-1] = '1'
            })
           
            var num = this.actList3New.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn('21502', dataNum);
        },
        selList4(index) {
            if (this.actList4.indexOf(index) == -1) {
                this.actList4.push(index)
            } else {
                this.actList4.splice(this.actList4.indexOf(index), 1)
            }
            this.actList4New=['0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0']
            this.actList4.forEach((el, index) => {
                this.actList4New[this.actList4New.length-el-1] = '1'
            })
          
            var num = this.actList4New.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn('21504', dataNum);
        },
        selList5(index) {
            if (this.actList5.indexOf(index) == -1) {
                this.actList5.push(index)
            } else {
                this.actList5.splice(this.actList5.indexOf(index), 1)
            }
            this.actList5New=['0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0']
            this.actList5.forEach((el, index) => {
                this.actList5New[this.actList5New.length-el-1] = '1'
            })
          
            var num = this.actList5New.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn('21505', dataNum);
        },
        selList6(index) {
            if (this.actList6.indexOf(index) == -1) {
                this.actList6.push(index)
            } else {
                this.actList6.splice(this.actList6.indexOf(index), 1)
            }
            this.actList6New=['0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0']
            this.actList6.forEach((el, index) => {
                this.actList6New[this.actList6New.length-el-1] = '1'
            })
          
            var num = this.actList6New.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn('21506', dataNum);
        },
    },

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