<template>
    <div class="formula irrigateSet upload">
        <set-params></set-params>
        <div class="page-content ">
            <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('502', $event)" v-model="inputData['502']" @input="change('502', $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>
        </div>
    </div>
</template>
<script>
import setParams from '../../components/setParams.vue';
export default {
    components: {
        setParams
    },
    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#通道传感器数据',
                "1#水温传感器数据",
                "2#水温传感器数据",
                ],
            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['500']
            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['501']
            var num2 = this.padString(num.toString(2), 16)
            this.actList2New=num2.split("")
            this.actList2New.forEach((el,index)=>{
                if(el=='1'){
                    this.actList2.push(this.actList2New.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 = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                pattern: 500, //需要根据文档填写 //6目标ph-数值
                regNum: 3,
            };
            this.api.postReg(data).then((res) => {
                this.loading.close()
                if (res.data.code == 200) {
                    this.inputData = res.data.data;

                    this.getAct1()
                    this.getAct2()
                } 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.postWriteFs(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('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','0','0',]
            this.actList2.forEach((el, index) => {
                this.actList2New[this.actList2New.length-el-1] = '1'
            })
            console.log(this.actList2,this.actList2New,this.actList2New.join(""));
            var num = this.actList2New.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn('501', dataNum);
        },
    },

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