<template>
    <div class="formula irrigateSet sensorSet">
        <set-params></set-params>
        <div class="page-content ">
            <div class="table-title">
                <img src="../../assets/image/sensor.png" alt=""> 传感器配置界面
            </div>
            <div class="sensor-view">
                <div class="left scroll">
                    <div @click="toIndex(index)" :class="active == index ? 'active' : ''" v-for="item, index in 6"
                        :key="index">
                        <div>
                            {{ index + 1 }}#传感器通道
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="right-top">
                        <div class="right-sel">
                            <div @click="changeOpen()">
                                <div v-if="openList.indexOf(active) == -1" class="no-sel"></div>
                                <div v-else class="sel"></div>
                                有效性
                            </div>
                        </div>
                        <div class="input-sel">
                            <div class="title">传感器类型</div>
                            <el-dropdown  @command="handleCommand">
                                <div class="el-dropdown-link">
                                    <input v-model="sensorType" type="text" class="input-input" placeholder="选择传感器类型">
                                    <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item  v-for="item, index in typeList" :key="index" :command="item.value">{{
                                        item.label }}</el-dropdown-item>

                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <!-- <div class="right-sel">
                            <div @click="sel2 = !sel2">
                                <div v-if="!sel2" class="no-sel"></div>
                                <div v-else class="sel"></div>
                                通讯类传感器
                            </div>
                            <div @click="sel3 = !sel3">
                                <div v-if="!sel3" class="no-sel"></div>
                                <div v-else class="sel"></div>
                                模拟量传感器
                            </div>
                        </div> -->
                    </div>
                    <div class="right-bottom">
                        <div>
                            <div class="input-main">
                                <div>标定低点AD值</div>
                                <input @blur="blurChange(numberList[active] + 1, $event)" v-model="inputData[numberList[active] + 1]"
                                    @input="change(numberList[active] + 1, $event)"
                                     type="number" placeholder="0.0">
                            </div>
                            <div class="input-main">
                                <div>标定低点数据</div>
                                <input @blur="blurChange1(numberList[active] + 2, $event)" v-model="inputData[numberList[active] + 2]"
                                    @input="change1(numberList[active] + 2, $event)"
                                     type="number" placeholder="0.0">
                            </div>
                        </div>
                        <div>
                            <div class="input-main">
                                <div>标定高点AD值</div>
                                <input @blur="blurChange(numberList[active] + 3, $event)" v-model="inputData[numberList[active] + 3]"
                                    @input="change(numberList[active] + 3, $event)"
                                     type="number" placeholder="0.0">
                            </div>
                            <div class="input-main">
                                <div>标定高点数据</div>
                                <input @blur="blurChange1(numberList[active] + 4, $event)" v-model="inputData[numberList[active] + 4]"
                                    @input="change1(numberList[active] + 4 , $event)"
                                     type="number" placeholder="0.0">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import setParams from '../../components/setParams.vue';
export default {
    components: {
        setParams
    },
    data() {
        return {
            active: 0,
            sel1: true,
            sel2: false,
            sel3: false,
            numberList: [273, 278, 283, 288, 293, 298],
            inputData: [],
            sensorType:'',//当前传感器类型
            openList: [],//当前有效的传感器
            typeList:this.$store.state.typeList
        }
    },
    watch:{
        'active'(newVal,oldVal){
            this.getSensorType()
            // this.getCountData()
        },
    },
    mounted() { 
        this.dataInit() 
          //input获取焦点后全选
    let inputList = document.querySelectorAll('input');
   for (let index = 0; index < inputList.length; index++) {
     inputList[index].onfocus = this.selectValue;//input放入焦点，全选文本
   }
        },
    methods: {
             //countType计算类型 
        //0是原数据 
        //1是原数据-400 
        //2是原数据/10 
        //3是(原数据-400) / 10
        countType1(data) {
            var num = data - 400
            return num
        },
        countType2(data) {
            var num = data / 10
            return num
        },
        countType3(data) {

            var num = (data - 400) / 10
            return num
        },
        //反向计算提交
        sendCountType1(data) {
            var num = data + 400
            return num
        },
        sendCountType2(data) {
            var num = data * 10
            return num
        },
        sendCountType3(data) {

            var num = (data* 10)+400
            return num
        },
        //类型选择
        handleCommand(command){
            this.typeList.forEach((el,index)=>{
                if(el.value==command){
                    this.sensorType=el.label
                }
            })
            var dataNum = {
                target: {
                    value:command,
                },
            };
            this.changeBtn(this.numberList[this.active], dataNum);
        },
           //根据类型修改数据
           getCountData(){
            for (var i = 0; i < 6; i++) {
            this.typeList.forEach((el, index) => {
                if (el.value == this.inputData[this.numberList[i]]) {
                   if(el.countType==0){

                   }else if(el.countType==1){
                    this.inputData[this.numberList[i] + 2]=this.countType1(this.inputData[this.numberList[i] + 2])
                   this.inputData[this.numberList[i] + 4]=this.countType1(this.inputData[this.numberList[i] + 4])
                   }else if(el.countType==2){
                    this.inputData[this.numberList[i] + 2]=this.countType2(this.inputData[this.numberList[i] + 2])
                   this.inputData[this.numberList[i] + 4]=this.countType2(this.inputData[this.numberList[i] + 4])
                   }else if(el.countType==3){
                    this.inputData[this.numberList[i] + 2]=this.countType3(this.inputData[this.numberList[i] + 2])
                   this.inputData[this.numberList[i] + 4]=this.countType3(this.inputData[this.numberList[i] + 4])
                   }
                  
                }
            })
        }
        },
        getSensorType(){
            this.typeList.forEach((el,index)=>{
                if(el.value==this.inputData[this.numberList[this.active]]){
                    this.sensorType=el.label
                }
            })
        },
        toIndex(index) {
            this.active = index
        },
        padString(str, length) {
            return str.padStart(length, '0');
        },
        changeOpen() {
            var inputData = this.inputData
            var list1 = this.padString(inputData['272'].toString(2), 6)
            var listData = list1.split('')

            if (Number(listData[listData.length - 1 - this.active])) {
                listData[listData.length - 1 - this.active] = '0'
                this.openList.splice(this.openList.indexOf(this.active), 1)
            } else {
                listData[listData.length - 1 - this.active] = '1'
                this.openList.push(this.active)
            }
            var listNew = listData.join("");
            var dataNum = {
                target: {
                    value: parseInt(listNew, 2),
                },
            };
            this.changeBtn('272', dataNum);
        },
        getData272() {
            var inputData = this.inputData
            var list1 = this.padString(inputData['272'].toString(2), 6)
            var number = 6
            this.openList = []

            for (var i = 0; i < number; i++) {
                console.log(Number(list1[list1.length - 1 - i]));
                if (Number(list1[list1.length - 1 - i])) {
                    this.openList.push(i)
                }
            }

        },
        dataInit() {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                pattern: 272, //需要根据文档填写 //6目标ph-数值
                regNum: 31,//从pattern取多少个数据
            };
            this.api.postReg(data).then((res) => {
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.getData272()
                    this.getSensorType()
                    this.getCountData()
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
            //全选文本
selectValue(e) {
	e.currentTarget.select();
},
getSendData(number){
            var number1=number
            this.typeList.some((el, index)  => {
                if (el.value == this.inputData[this.numberList[this.active]]) {
                   if(el.countType==0){
                    number1=number
                   }else if(el.countType==1){
                    number1=this.sendCountType1(number)
                   }else if(el.countType==2){
                    number1=this.sendCountType2(number)
                   }else if(el.countType==3){
                    number1=this.sendCountType3(number)
                   }
                }
            })
            return number1
        },
        //需要反向计算提交
        change1(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: this.getSendData(el.target.value),
            };
            this.delayTimer(0, data);
        },
        //需要反向计算提交
        blurChange1(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num:this.getSendData(el.target.value) ,
            }; //避免开启多个计时器
            if (this.timer) {
                this.timer && clearInterval(this.timer);
                this.changeData(data);
            }

        },
  //失去焦点
    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.postWriteFs(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
            });
        },
    },

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