<template>
    <div class="irrigateSet upload">
        <div class="table-title">
                <img src="../../assets/image/upload.png" alt=""> {{$t('upload.dataUpload')}}
            </div>
            <div class="flex-view">
                <div class="input-main">
                    <span>{{$t('upload.envDataUploadTime')}}</span>
                    <input @blur="blurChange('10000', $event)" v-model="inputData['10000']" @input="change('10000', $event)" type="number" placeholder="0">
                    <span>{{$t('text.seconds')}}</span>
                </div>

            </div>
            <div class="flex-view border-none">
                <div class="upload-view">
                    <div class="page-title upload-title">
                        {{$t('index.weatherStation')}}
                    </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">
                        {{$t('upload.fertigationParams')}}
                    </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">
                        {{$t('upload.channelSensor')}}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">
                        {{$t('upload.channelSensor')}}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">
                        {{$t('upload.channelSensor')}}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">
                        {{$t('upload.channelSensor')}}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">
                       {{$t('upload.channelSensor')}}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">
                        {{$t('upload.channelSensor')}}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: [
                this.$t('upload.sensorTypes.outdoorAvgTemp'),
                this.$t('upload.sensorTypes.outdoorAvgHumidity'),
                this.$t('upload.sensorTypes.outdoorAvgLight'),
                this.$t('upload.sensorTypes.outdoorAvgWindSpeed'),
                this.$t('upload.sensorTypes.outdoorAvgWindDirection'),
                this.$t('upload.sensorTypes.outdoorAvgSnowRain'),
                this.$t('upload.sensorTypes.outdoorAvgRainfall'),
                this.$t('upload.sensorTypes.weatherStationVoltage'),
                this.$t('upload.sensorTypes.weatherStationRSSI'),
                this.$t('upload.sensorTypes.weatherStationSNR'),
                this.$t('upload.sensorTypes.outdoorAvgDewPoint'),
                this.$t('upload.sensorTypes.outdoorAvgCO2'),
                this.$t('upload.sensorTypes.outdoorAvgSoilTemp'),
                this.$t('upload.sensorTypes.outdoorAvgSoilMoisture'),
                this.$t('upload.sensorTypes.outdoorAvgPressure'),
                this.$t('upload.sensorTypes.outdoorAvgSolarRadiation')
                ],


            actList2: [],
            actList2New: [],
            list2: [  `1#${this.$t('upload.sensorTypes.ph')}`,
  `1#${this.$t('upload.sensorTypes.ec')}`,
  `1#${this.$t('upload.sensorTypes.waterTemp')}` ],

                actList3: [],
            actList3New: [],
            list3: Array.from({ length: 16 }, (_, i) => 
      `${this.$t('upload.channelSensor')}${i+1}`
    ),

                actList4: [],
            actList4New: [],
            list4: Array.from({ length: 16 }, (_, i) => 
      `${this.$t('upload.channelSensor')}${i+17}`
    ),

                actList5: [],
            actList5New: [],
            list5:Array.from({ length: 16 }, (_, i) => 
      `${this.$t('upload.channelSensor')}${i+33}`
    ),

                actList6: [],
            actList6New: [],
            list6:Array.from({ length: 16 }, (_, i) => 
      `${this.$t('upload.channelSensor')}${i+49}`
    ),

                actList7: [],
            actList7New: [],
            list7:Array.from({ length: 16 }, (_, i) => 
      `${this.$t('upload.channelSensor')}${i+65}`
    ),

                actList8: [],
            actList8New: [],
            list8:Array.from({ length: 16 }, (_, i) => 
      `${this.$t('upload.channelSensor')}${i+81}`
    ),
            inputData: [],
      loading:null,

        }
    },
    mounted() { 
        this.loading = this.$loading({
    lock: true,
    text: this.$t('message.loading'),
    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>
    