<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 @blur="blurChange('10000', $event)" v-model="inputData['10000']" @input="change('10000', $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 upload-content1">
                        <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">
                        通道传感器1-16
                    </div>
                    <div class="upload-content">
                        <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">
                        通道传感器17-32
                    </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">
                        通道传感器33-48
                    </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">
                        通道传感器49-64
                    </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 class="upload-view">
                    <div class="page-title upload-title">
                        通道传感器65-80
                    </div>
                    <div class="upload-content">
                        <div @click="selList7(index)" v-for="item, index in list7" :key="index">
                            <div v-if="actList7.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">
                        通道传感器81-96
                    </div>
                    <div class="upload-content">
                        <div @click="selList8(index)" v-for="item, index in list8" :key="index">
                            <div v-if="actList8.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: ['1#水肥PH',
                '1#水肥EC',
                '1#水温传感器',
                ],

                actList3: [],
            actList3New: [],
            list3: ['通道传感器1',
                '通道传感器2',
                '通道传感器3',
                '通道传感器4',
                '通道传感器5',
                '通道传感器6',
                '通道传感器7',
                '通道传感器8',
                '通道传感器9',
                '通道传感器10',
                '通道传感器11',
                '通道传感器12',
                '通道传感器13',
                '通道传感器14',
                '通道传感器15',
                '通道传感器16',],

                actList4: [],
            actList4New: [],
            list4: ['通道传感器17',
                '通道传感器18',
                '通道传感器19',
                '通道传感器20',
                '通道传感器21',
                '通道传感器22',
                '通道传感器23',
                '通道传感器24',
                '通道传感器25',
                '通道传感器26',
                '通道传感器27',
                '通道传感器28',
                '通道传感器29',
                '通道传感器30',
                '通道传感器31',
                '通道传感器32',],

                actList5: [],
            actList5New: [],
            list5: ['通道传感器33',
                '通道传感器34',
                '通道传感器35',
                '通道传感器36',
                '通道传感器37',
                '通道传感器38',
                '通道传感器39',
                '通道传感器40',
                '通道传感器41',
                '通道传感器42',
                '通道传感器43',
                '通道传感器44',
                '通道传感器45',
                '通道传感器46',
                '通道传感器47',
                '通道传感器48',],

                actList6: [],
            actList6New: [],
            list6: ['通道传感器49',
                '通道传感器50',
                '通道传感器51',
                '通道传感器52',
                '通道传感器53',
                '通道传感器54',
                '通道传感器55',
                '通道传感器56',
                '通道传感器57',
                '通道传感器58',
                '通道传感器59',
                '通道传感器60',
                '通道传感器61',
                '通道传感器62',
                '通道传感器63',
                '通道传感器64',],

                actList7: [],
            actList7New: [],
            list7: ['通道传感器65',
                '通道传感器66',
                '通道传感器67',
                '通道传感器68',
                '通道传感器69',
                '通道传感器70',
                '通道传感器71',
                '通道传感器72',
                '通道传感器73',
                '通道传感器74',
                '通道传感器75',
                '通道传感器76',
                '通道传感器77',
                '通道传感器78',
                '通道传感器79',
                '通道传感器80',],

                actList8: [],
            actList8New: [],
            list8: ['通道传感器81',
                '通道传感器82',
                '通道传感器83',
                '通道传感器84',
                '通道传感器85',
                '通道传感器86',
                '通道传感器87',
                '通道传感器88',
                '通道传感器89',
                '通道传感器90',
                '通道传感器91',
                '通道传感器92',
                '通道传感器93',
                '通道传感器94',
                '通道传感器95',
                '通道传感器96',],
            inputData: [],
      loading:null,

        }
    },
    mounted() { 
        this.loading = this.$loading({
    lock: true,
    text: '加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
        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['10001']
            var num2 = this.padString(num.toString(2), 16)
            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['10002']
            var num2 = this.padString(num.toString(2), 3)
            this.actList2New=num2.split("")
            this.actList2New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList2.push(this.actList2New.length-index-1)
                }
            })
        },
        
        getActList1() {
            this.actList3=[]
            var num = this.inputData['10003']
            var num3 = this.padString(num.toString(2), 16)
            this.actList3New=num3.split("")
            this.actList3New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList3.push(this.actList3New.length-index-1)
                }
            })
        },
        getActList2() {
            this.actList4=[]
            var num = this.inputData['10004']
            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)
                }
            })
        },
        getActList3() {
            this.actList5=[]
            var num = this.inputData['10005']
            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)
                }
            })
        },
        getActList4() {
            this.actList6=[]
            var num = this.inputData['10006']
            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)
                }
            })
        },
        getActList5() {
            this.actList7=[]
            var num = this.inputData['10007']
            var num7 = this.padString(num.toString(2), 16)
            this.actList7New=num7.split("")
            this.actList7New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList7.push(this.actList7New.length-index-1)
                }
            })
        },
        getActList6() {
            this.actList8=[]
            var num = this.inputData['10008']
            var num8 = this.padString(num.toString(2), 16)
            this.actList8New=num8.split("")
            this.actList8New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList8.push(this.actList8New.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.readFi_datauploadfi(data).then((res) => {
                this.loading.close()
                if (res.data.code == 200) {
                    this.inputData = res.data.data;

                    this.getAct1()
                    this.getAct2()
                    this.getActList1()
                    this.getActList2()
                    this.getActList3()
                    this.getActList4()
                    this.getActList5()
                    this.getActList6()
                } 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.postwriteFi_write(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
          });
        },
        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','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('10001', 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','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('10002', 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','0','0','0','0','0','0','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('10003', 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('10004', 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('10005', 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('10006', dataNum);
        },
        selList7(index) {
            if (this.actList7.indexOf(index) == -1) {
                this.actList7.push(index)
            } else {
                this.actList7.splice(this.actList7.indexOf(index), 1)
            }
            this.actList7New=['0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0']
            this.actList7.forEach((el, index) => {
                this.actList7New[this.actList7New.length-el-1] = '1'
            })
          
            var num = this.actList7New.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn('10007', dataNum);
        },
        selList8(index) {
            if (this.actList8.indexOf(index) == -1) {
                this.actList8.push(index)
            } else {
                this.actList8.splice(this.actList8.indexOf(index), 1)
            }
            this.actList8New=['0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0']
            this.actList8.forEach((el, index) => {
                this.actList8New[this.actList8New.length-el-1] = '1'
            })
          
            var num = this.actList8New.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn('10008', dataNum);
        },
    },

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