<template>
  <div class="formula">
    <set-params></set-params>
    <div class="page-content">
      <div class="table-title">
        <img src="../../assets/image/formula.png" alt=""> {{ titleName }}参数 <div class="tips">种植作物配方1</div>
      </div>
      <div class="input-view">
        <div class="input-sel">
          <span>配肥模式选择</span>
          <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link">
              <input type="text" v-model="dataSel" class="input-input" placeholder="流量定比例模式">
              <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="item.value" v-for="item, index in selList" :key="index">{{ item.label
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="input-main">
          <span>目标PH值</span>
          <input  @blur="blurChangeCount(store.formulaNum[indexs - 1], $event)"
           v-model="inputData[store.formulaNum[indexs - 1]]"
            @input="changeCount(store.formulaNum[indexs - 1], $event)" type="number" placeholder="0.0">
        </div>
        <div class="input-main">
          <span>目标EC值</span>
          <input  @blur="blurChangeCount(store.formulaNum[indexs - 1] + 1, $event)"
           v-model="inputData[store.formulaNum[indexs - 1] + 1]"
            @input="changeCount(store.formulaNum[indexs - 1] + 1, $event)" type="number" placeholder="0.0">
        </div>
      </div>
      <div class="table-view">
        <el-table :data="tableData" :row-class-name="tableRowClassName" height="620" style="width: 100%">
          <el-table-column prop="data0" label="肥料种类">
            <template slot-scope="scope">
              <div @click="openType(scope.$index)" class="status" :class="'status' + scope.row.status + (scope.row.open ? '' : ' noSel')">{{ scope.row.data0 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="清水与肥料的比例">
            <template slot-scope="scope">
              <div class="input-main-80">
                <input @blur="blurChange(store.formulaNum[indexs - 1] + 5 + scope.$index, $event)"
                 v-model="inputData[store.formulaNum[indexs - 1] + 5 + scope.$index]"
                  @input="change(store.formulaNum[indexs - 1] + 5 + scope.$index, $event)" type="number"
                  style="height: 34px;margin: 0 auto;" placeholder="0.0">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="固定吸肥强度">
            <template slot-scope="scope">
              <div class="input-main-80">
                <input  @blur="blurChange(store.formulaNum[indexs - 1] + 15 + scope.$index, $event)"
                v-model="inputData[store.formulaNum[indexs - 1] + 15 + scope.$index]"
                  @input="change(store.formulaNum[indexs - 1] + 15 + scope.$index, $event)" type="number"
                  style="height: 34px;margin: 0 auto;" placeholder="0.0">
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="data3" label="目标PH、EC模式">
            <template slot-scope="scope">
              <div class="type0" v-if="scope.row.type == 0">
                <div class="input-main-80 table-input">
                  <span> {{ scope.row.data3 }}</span>
                  <input  @blur="blurChangeCount(store.formulaNum[indexs - 1] + 24 + scope.$index, $event)"
                   v-model="inputData[store.formulaNum[indexs - 1] + 24]"
                    @input="changeCount(store.formulaNum[indexs - 1] + 24, $event)" type="number" style="height: 34px;"
                    placeholder="0.0">
                </div>
              </div>
              <div class="type0" v-if="scope.row.type == 1">
                <div class="input-main-80 table-input">
                  <span> {{ scope.row.data3 }}</span>
                  <input  @blur="blurChangeCount(store.formulaNum[indexs - 1] + 25 + scope.$index, $event)"
                   v-model="inputData[store.formulaNum[indexs - 1] + 25]"
                    @input="changeCount(store.formulaNum[indexs - 1] + 25, $event)" type="number" style="height: 34px;"
                    placeholder="0.0">
                </div>
              </div>
              <div class="type1" v-if="scope.row.type == 2">
                <div class="input-main-80">
                  <span> 肥料通道最大值</span>
                  <input  @blur="blurChange(store.formulaNum[indexs - 1] + 4 + scope.$index, $event)"
                   v-model="inputData[store.formulaNum[indexs - 1] + 4]"
                    @input="change(store.formulaNum[indexs - 1] + 4, $event)" type="number" style="height: 34px;"
                    placeholder="0.0">
                </div>
              </div>
              <div class="type2"
                @click="change14(store.formulaNum[indexs - 1] + 14, inputData[store.formulaNum[indexs - 1] + 14])"
                :class="inputData[store.formulaNum[indexs - 1] + 14] ? '' : 'noSel'" v-if="scope.row.type == 3">
                <img src="../../assets/image/left-img1.png" alt="">
                {{ scope.row.data3 }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import setParams from '../../components/setParams.vue';
export default {
  components: {
    setParams
  },
  data() {
    return {
      selList: [{ label: '流量定比例', value: 1 },
      { label: '固定吸肥流量', value: 2 },
      { label: 'PH,EC模式（PID调节）', value: 3 }],
      tableData: [{
        data0: 'A肥选择',
        open: true,
        status: 0,
        data1: '0',
        data2: '0',
        data3: 'EC允许最大偏差',
        type: 0
      }, {
        data0: 'B肥选择',
        open: true,
        status: 0,
        data1: '0',
        data2: '0',
        data3: 'PH允许最大偏差',
        type: 1
      }, {
        data0: 'C肥选择',
        open: true,
        status: 0,
        data1: '0',
        data2: '0',
        data3: '',
        type: 4
      }, {
        data0: 'D肥选择',
        open: true,
        status: 0,
        data1: '0',
        data2: '0',
        data3: '0',
        type: 2
      }, {
        data0: 'E肥选择',
        open: true,
        status: 0,
        data1: '0',
        data2: '0',
        data3: '目标值限制',
        type: 3
      }, {
        data0: 'F肥选择',
        open: true,
        status: 0,
        data1: '0',
        data2: '0',
        data3: '',
        type: 4
      }, {
        data0: 'G肥选择',
        open: true,
        status: 0,
        data1: '0',
        data2: '0',
        data3: '',
        type: 4
      }, {
        data0: 'H肥选择',
        open: true,
        status: 0,
        data1: '0',
        data2: '0',
        data3: '',
        type: 4
      }, {
        data0: '酸 选择',
        open: true,
        status: 1,
        data1: '0',
        data2: '0',
        data3: '',
        type: 4
      }],
      indexs: 1,
      titleName: '',
      inputData: [],
      dataSel: '',
      store: this.$store.state,
    }
  },
  watch: {
    $route(newVal, oldVal) {
      const that = this;
      var store = this.$store.state
      this.indexs = this.$route.query.id ? this.$route.query.id : 1;
      this.titleName = store.equipmentName['fertilization' + store.nameList[this.indexs - 1]]
      setTimeout(() => {
        that.dataInit();
      }, 0);
    },
  },
  mounted() {
    const that = this;
    var store = this.$store.state
    this.indexs = this.$route.query.id ? Number(this.$route.query.id) : 1;
    this.titleName = store.equipmentName['fertilization' + store.nameList[this.indexs - 1]]
    setTimeout(() => {
      that.dataInit();
    }, 0);
    this.$nextTick(() => {
      let inputList = document.querySelectorAll('input');
   for (let index = 0; index < inputList.length; index++) {
     inputList[index].onfocus = this.selectValue;//input放入焦点，全选文本
   }
  });
     //input获取焦点后全选
  
  },
  methods: {
    openType(index){   
      var store = this.$store.state
      if(this.tableData[index].open){
        this.numlist[this.numlist.length - 1 - index]='0'
      this.tableData[index].open=false
      }else{
        this.numlist[this.numlist.length - 1 - index]='1'
      this.tableData[index].open=true
      }
      var num = this.numlist.join("");
      var dataNum = {
        target: {
          value: parseInt(num, 2),
        },
      };
      this.change(store.formulaNum[this.indexs - 1] + 3, dataNum);
    },
    getSeldata3(num) {
      var number = this.padString(num.toString(2), 9)
      this.numlist = number.split('')
      this.numlist.forEach((el, index) => {
        if (Number(el)) {
          this.tableData[this.tableData.length - 1 - index].open = true
        } else {
          this.tableData[this.tableData.length - 1 - index].open = false
        }
      })
    },
    padString(str, length) {
      return str.padStart(length, '0');
    },
    dataInit() {
      var store = this.$store.state
      var data = {
        equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
        pattern: store.formulaNum[this.indexs - 1], //需要根据文档填写 //6目标ph-数值
        regNum: 26,
      };
      this.api.postReg(data).then((res) => {
        if (res.data.code == 200) {
          this.inputData = res.data.data;
          this.inputData[store.formulaNum[this.indexs - 1]] = this.countData1(this.inputData[store.formulaNum[this.indexs - 1]])
          this.inputData[store.formulaNum[this.indexs - 1] + 1] = this.countData1(this.inputData[store.formulaNum[this.indexs - 1] + 1])
          this.inputData[store.formulaNum[this.indexs - 1] + 24] = this.countData1(this.inputData[store.formulaNum[this.indexs - 1] + 24])
          this.inputData[store.formulaNum[this.indexs - 1] + 25] = this.countData1(this.inputData[store.formulaNum[this.indexs - 1] + 25])
          this.getSeldata(this.inputData[store.formulaNum[this.indexs - 1] + 2])
          this.getSeldata3(this.inputData[store.formulaNum[this.indexs - 1] + 3])
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //点击限制按钮 打开/关闭
    change14(code, data) {
      var store = this.$store.state
      if (data) {
        this.inputData[store.formulaNum[this.indexs - 1] + 14] = 0
      } else {
        this.inputData[store.formulaNum[this.indexs - 1] + 14] = 1
      }
      var data = {
        target: {
          value: this.inputData[store.formulaNum[this.indexs - 1] + 14]
        }
      }
      this.change(code, data)
    },
    //反向计算 上传前 *10
    changeCount(code, el) {
      var store = this.$store.state
      var data = {
        target: {
          value: el.target.value * 10
        }
      };
      console.log(data,11);
      this.change(code, data)
    },
      //失去焦点
      blurChangeCount(code, el) {
      var store=this.$store.state
      var data = {
        equipmentId: store.equipmentList[store.equipmentIndex-1].deviceId,
        regAddress: code,
        num: el.target.value * 10,
      }; //避免开启多个计时器
     if(this.timer){
        this.timer && clearInterval(this.timer);
      this.changeData(data);
     }
     
    },
    //计算数据  /10
    countData1(data) {
      return data / 10
    },
    getSeldata(index) {
      var data = index;
      var textSel = "";
      if (data == "1") {
        textSel = "流量定比例";
      } else if (data == "2") {
        textSel = "固定吸肥流量";
      } else if (data == "3") {
        textSel = "PH,EC模式（PID调节）";
      }
      this.dataSel = textSel;
    },
    handleCommand(command) {
      var store = this.$store.state
      this.inputData[store.formulaNum[this.indexs - 1] + 2] = command;
      this.getSeldata(command)
      var dataSel = {
        target: {
          value: this.inputData[store.formulaNum[this.indexs - 1] + 2],
        },
      }
      this.change(store.formulaNum[this.indexs - 1] + 2, dataSel);
    },
        //全选文本
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);
     }
     
    },
    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
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    }
  },

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