<template>
  <div class="irrigateSet PIDSet">
    <div class="">
      <div class="table-title">
        <img src="../../assets/image/set.png" alt=""> {{$t('PIDSet.pageTitle')}}
      </div>
      <div class="flex-view">
        <div class="PIDSet-view">
          <div class="page-title PIDSet-title">
            {{$t('PIDSet.phSettings')}}
          </div>
          <div class="PID-input-content">
            <div class="PID-input">
              <div>{{$t('PIDSet.proportionCoefficient')}}</div>
              <input @blur="blurChange('0', $event)" v-model="inputData['0']" @input="change('0', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>{{$t('PIDSet.integralCoefficient')}}</div>
              <input @blur="blurChange('1', $event)" v-model="inputData['1']" @input="change('1', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>{{$t('PIDSet.differentialCoefficient')}}</div>
              <input @blur="blurChange('2', $event)" v-model="inputData['2']" @input="change('2', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>{{$t('PIDSet.integralLimit')}}</div>
              <input @blur="blurChange('3', $event)" v-model="inputData['3']" @input="change('3', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>{{$t('PIDSet.pwmCycle')}}</div>
              <input @blur="blurChange('4', $event)" v-model="inputData['4']" @input="change('4', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>{{$t('PIDSet.calculationCycle')}}</div>
              <input @blur="blurChange('11', $event)" v-model="inputData['11']" @input="change('11', $event)" type="number" placeholder="0.0">
            </div>
          </div>
        </div>
        <div class="PIDSet-view">
          <div class="page-title PIDSet-title">
            {{$t('PIDSet.ecSettings')}}
          </div>
          <div class="PID-input-content">
            <div class="PID-input">
              <div>{{$t('PIDSet.proportionCoefficient')}}</div>
              <input @blur="blurChange('5', $event)" v-model="inputData['5']" @input="change('5', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>{{$t('PIDSet.integralCoefficient')}}</div>
              <input @blur="blurChange('6', $event)" v-model="inputData['6']" @input="change('6', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>{{$t('PIDSet.differentialCoefficient')}}</div>
              <input @blur="blurChange('7', $event)" v-model="inputData['7']" @input="change('7', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>{{$t('PIDSet.integralLimit')}}</div>
              <input @blur="blurChange('8', $event)" v-model="inputData['8']" @input="change('8', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>{{$t('PIDSet.pwmCycle')}}</div>
              <input @blur="blurChange('9', $event)" v-model="inputData['9']" @input="change('9', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>{{$t('PIDSet.calculationCycle')}}</div>
              <input @blur="blurChange('12', $event)" v-model="inputData['12']" @input="change('12', $event)" type="number" placeholder="0.0">
            </div>
          </div>
        </div>
        <div class="PIDSet-view">
          <div class="PID-input-content-full">
            <div class="PID-input-full">
              <div>{{$t('PIDSet.acidSuctionChannel')}}</div>
              <input @blur="blurChange('10', $event)" v-model="inputData['10']" @input="change('10', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input-full">
              <div>{{$t('PIDSet.waterPumpPreStart')}}{{$t('text.seconds')}}</div>
              <input @blur="blurChange('13', $event)" v-model="inputData['13']" @input="change('13', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input-full">
              <div>{{$t('PIDSet.waterFlowPulse')}}(P/L)</div>
              <input @blur="blurChange('14', $event)" v-model="inputData['14']" @input="change('14', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input-full">
               <div style="text-align: left;width:350px;font-size:12px">(1.5寸(DE50)对应41个脉冲；2寸(DE63)对应19个脉冲)</div>
            </div>
            <div class="PID-input-full">
              <div>{{$t('PIDSet.bypassValve')}}</div>
              <input @blur="blurChange('15', $event)" v-model="inputData['15']" @input="change('15', $event)" type="number" placeholder="0.0">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import setParams from '../../components/setParams.vue';
export default {
  components: {
    setParams
  },
  data() {
    return {
      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: {
    dataInit() {
      var store = this.$store.state
      var data = {
        equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
        pattern: 0, //需要根据文档填写 //6目标ph-数值
        regNum: 16,
      };
      this.api.postReg(data).then((res) => {
        this.loading.close()
        if (res.data.code == 200) {
          this.inputData = res.data.data;
        } 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);
    //  }
     
    },
    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
          });
    },
  },

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