<template>
  <div class="skylight">
    <div class="table-title">
      <img src="../../assets/image/skylight.png" alt=""> 顶卷膜{{ indexs }}
    </div>
    <div class="title-tips">
            <div class="input-btn">
                <div class="btn btn-tips"  @click="changeOpen(0)" :class="openIndex == 0 ? 'blue' : 'green'">
                    {{ openIndex == 0 ? '无效' : '有效' }}
                </div>
            </div>
        </div>
    <div class="flex-view border-bottom">
      <div class="input-btn">
        <div class="btn" @click="changeOpen(1)" :class="openIndex == 1 ? 'blue' : 'green'">
          <img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
        </div>
        <div class="btn" @click="changeOpen(2)" :class="openIndex == 2 ? 'blue' : 'green'">
          <img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
        </div>
        <div class="btn" @click="changeOpen(3)" :class="openIndex == 3 ? 'blue' : 'green'">
          <img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
        </div>
        <div class="btn" @click="changeOpen(4)" :class="openIndex == 4 ? 'blue' : 'green'">
          <img src="../../assets/image/irrigateSet1.png" alt="" />停止
        </div>
      </div>

    </div>
    <div class="flex-view border-bottom">
      <div class="flex-sel  border-right" @click="changeOpenTrue(0)">
        <div v-if="openTrue[0] == 0" class="no-sel"></div>
        <div v-else class="sel"></div>
        大风保护有效
      </div>
      <div class="flex-sel  border-right" @click="changeOpenTrue(1)">
        <div v-if="openTrue[1] == 0" class="no-sel"></div>
        <div v-else class="sel"></div>
        下雨保护
      </div>
      <div class="flex-sel" @click="changeOpenTrue(2)">
        <div v-if="openTrue[2] == 0" class="no-sel"></div>
        <div v-else class="sel"></div>
        有雨量桶检测
      </div>
    </div>
    <div class="flex-view  border-bottom">
      <div class="input-main border-right">
        <span>风速大于多少</span>
        <input @blur="blurChange10('21662', $event)" v-model="inputData['21662']" @input="changeCount10('21662', $event)"
          type="text" value="60" placeholder="60" />
        <span>m/s,禁止开窗</span>
      </div>
      <div class="input-main border-right">
        <span>大风保护时间</span>
        <input @blur="blurChange('21663', $event)" v-model="inputData['21663']" @input="change('21663', $event)"
          type="text" value="60" placeholder="60" />
        <span>分</span>
      </div>
      <div class="input-main">
        <span>下雨检测时间</span>
        <input @blur="blurChange('21664', $event)" v-model="inputData['21664']" @input="change('21664', $event)"
          type="text" value="60" placeholder="60" />
        <span>分</span>
      </div>
    </div>
    <div class="flex-view">
      <div class="input-sel">
        <div class="title">温度选择</div>
        <el-dropdown @command="handleCommand">
          <div class="el-dropdown-link">
            <input v-model="TypeSel" 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 typeSelList" :key="index" :command="index">{{ item.name
            }}</el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="input-main">
        <div>控温宽度</div>
        <input @blur="blurChange10(21614 + ((indexs - 1) * 11), $event)" v-model="inputData[21614 + ((indexs - 1) * 11)]"
          @input="changeCount10(21614 + ((indexs - 1) * 11), $event)" type="number" placeholder="0.0">
        <span>℃</span>
      </div>
    </div>
    <div class="input-100-view">
      <div class="title">
        ①室内温度 >
      </div>
      <input @blur="blurChangeCount(21615 + ((indexs - 1) * 11), $event)" v-model="inputData[21615 + ((indexs - 1) * 11)]"
        @input="changeCountData(21615 + ((indexs - 1) * 11), $event)" class="input-140" type="text" placeholder="0.0">
      <span>℃，打开</span>
      <input @blur="blurChange(21616 + ((indexs - 1) * 11), $event)" v-model="inputData[21616 + ((indexs - 1) * 11)]"
        @input="change(21616 + ((indexs - 1) * 11), $event)" class="input-140" type="text" placeholder="0">
      <span>%</span>
    </div>
    <div class="input-100-view">
      <div class="title">
        ②室内温度 >
      </div>
      <input @blur="blurChangeCount(21617 + ((indexs - 1) * 11), $event)" v-model="inputData[21617 + ((indexs - 1) * 11)]"
        @input="changeCountData(21617 + ((indexs - 1) * 11), $event)" class="input-140" type="text" placeholder="0.0">
      <span>℃，打开</span>
      <input @blur="blurChange(21618 + ((indexs - 1) * 11), $event)" v-model="inputData[21618 + ((indexs - 1) * 11)]"
        @input="change(21618 + ((indexs - 1) * 11), $event)" class="input-140" type="text" placeholder="0">
      <span>%</span>
    </div>
    <div class="input-100-view margin-none">
      <div class="title">
        ③室内温度 >
      </div>
      <input @blur="blurChangeCount(21619 + ((indexs - 1) * 11), $event)" v-model="inputData[21619 + ((indexs - 1) * 11)]"
        @input="changeCountData(21619 + ((indexs - 1) * 11), $event)" class="input-140" type="text" placeholder="0.0">
      <span>℃，打开</span>
      <input @blur="blurChange(21620 + ((indexs - 1) * 11), $event)" v-model="inputData[21620 + ((indexs - 1) * 11)]"
        @input="change(21620 + ((indexs - 1) * 11), $event)" class="input-140" type="text" placeholder="0">
      <span>%</span>
    </div>
    <div class="flex-view padding-none">
      <div class="input-main">
        <div>全程运行时间</div>
        <input @blur="blurChange(21621 + ((indexs - 1) * 11), $event)" v-model="inputData[21621 + ((indexs - 1) * 11)]"
          @input="change(21621 + ((indexs - 1) * 11), $event)" type="number" placeholder="0.0">
          <span></span>
      </div>
      <div class="input-main">
        <div>打开通道</div>
        <input @blur="blurChange(21622 + ((indexs - 1) * 11), $event)" v-model="inputData[21622 + ((indexs - 1) * 11)]"
          @input="change(21622 + ((indexs - 1) * 11), $event)" type="number" placeholder="0.0">
          <span></span>
      </div>
      <div class="input-main">
        <div>关闭通道</div>
        <input @blur="blurChange(21623 + ((indexs - 1) * 11), $event)" v-model="inputData[21623 + ((indexs - 1) * 11)]"
          @input="change(21623 + ((indexs - 1) * 11), $event)" type="number" placeholder="0.0">
        <span></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      indexs: 1,
      //类型选择
      TypeSel: '',
      TypeSelIndex: -1,
      //页面数据
      inputData: [],
      //选择内容
      typeSelList: [{ name: '1#平均空气温度', value: 1, },
      { name: '2#平均空气温度', value: 2, },
      { name: '1#空气温度', value: 3, },
      { name: '2#空气温度', value: 4, },
      { name: '3#空气温度', value: 5, },
      { name: '4#空气温度', value: 6, },
      { name: '5#空气温度', value: 7, },
      { name: '6#空气温度', value: 8, },
      { name: '7#空气温度', value: 9, },
      { name: '8#空气温度', value: 10, },],
      //有效性设置
      openIndex: 0,

      openTrue: [],
    }
  },
  watch: {
    $route(newVal, oldVal) {
      const that = this;
      this.indexs = this.$route.query.id ? this.$route.query.id : 1;
      setTimeout(() => {
        that.getNowData();
      }, 0);
    },
    '$route.query.change'(newVal, oldVal) {
      this.dataInit();
    },
  },

  mounted() {
    const that = this;
    this.indexs = this.$route.query.id ? this.$route.query.id : 1;
    setTimeout(() => {
      that.dataInit();
    }, 0);
    //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');
    },
    changeOpen(index) {
      this.openIndex = index
      var dataNum = {
        target: {
          value: this.openIndex,
        },
      };
      this.changeBtn(21613 + ((this.indexs - 1) * 11), dataNum);
    },
    //反转数组 不影响原数组
    myReverse(arr) {
      return [...arr].reverse()
    },
    changeOpenTrue(index) {
      if (this.openTrue[index] == 0) {
        this.openTrue[index] = 1
      } else {
        this.openTrue[index] = 0
      }
      this.$forceUpdate();
      var num = this.myReverse(this.openTrue).join("")

      var dataNum = {
        target: {
          value: parseInt(num, 2),
        },
      };
      this.changeBtn('21661', dataNum);
    },
    get21661() {
      var num1 = this.inputData['21661']?this.inputData['21661']:0
      var num11 = this.padString(num1.toString(2), 3)
      var openList1New
      openList1New = num11.split("")
      this.openTrue = openList1New.reverse()
    },
    //类型选择
    handleCommand(index) {
      this.TypeSel = this.typeSelList[index].name
      this.TypeSelIndex = this.typeSelList[index].value
      var dataNum = {
        target: {
          value: this.TypeSelIndex,
        },
      };
      this.changeBtn(21657 + (this.indexs - 1), dataNum);
    },
    //失去焦点 计算公式 x/10
    blurChange10(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);
      }

    },
    //反向计算 计算公式 x/10
    changeCount10(code, el) {
      var data = el.target.value * 10
      var sendData = {
        target: {
          value: data
        }
      }
      this.change(code, sendData)
    },
    //失去焦点
    blurChangeCount(code, el) {
      var store = this.$store.state
      var data = {
        equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
        regAddress: code,
        num: (el.target.value * 10) + 400,
      }; //避免开启多个计时器
      if (this.timer) {
        this.timer && clearInterval(this.timer);
        this.changeData(data);
      }

    },
    changeCountData(code, el) {
      var data = (el.target.value * 10) + 400
      var sendData = {
        target: {
          value: data
        }
      }
      this.change(code, sendData)
    },
    countData(data) {
      if (data) {
        return (data - 400) / 10
      } else {
        return 0
      }
    },
    // 计算展示值 计算公式 x/10
    countData10(data) {
      if (data) {
        return data / 10
      } else {
        return 0
      }
    },
    dataInit() {
      var store = this.$store.state
      var data = {
        deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,

      };
      this.api.getReadControlliShuiControl(data).then((res) => {
        if (res.data.code == 200) {
          this.inputData = res.data.data;
          this.getNowData()
          this.get21661()
          this.inputData[21662] = this.countData10(this.inputData[21662])
          
          this.inputData[21614] = this.countData10(this.inputData[21614])
          this.inputData[21615] = this.countData(this.inputData[21615])
          this.inputData[21617] = this.countData(this.inputData[21617])
          this.inputData[21619] = this.countData(this.inputData[21619])

          this.inputData[21625] = this.countData10(this.inputData[21625])
          this.inputData[21626] = this.countData(this.inputData[21626])
          this.inputData[21628] = this.countData(this.inputData[21628])
          this.inputData[21630] = this.countData(this.inputData[21630])

          this.inputData[21636] = this.countData10(this.inputData[21636])
          this.inputData[21637] = this.countData(this.inputData[21637])
          this.inputData[21639] = this.countData(this.inputData[21639])
          this.inputData[21641] = this.countData(this.inputData[21641])

          this.inputData[21647] = this.countData10(this.inputData[21647])
          this.inputData[21648] = this.countData(this.inputData[21648])
          this.inputData[21650] = this.countData(this.inputData[21650])
          this.inputData[21652] = this.countData(this.inputData[21652])
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //获取当前页面的参数
    getNowData() {
      this.openIndex = this.inputData[21613 + ((this.indexs - 1) * 11)]


      this.typeSelList.forEach((el, index) => {
        if (el.value == this.inputData[21657 + (this.indexs - 1)]) {

          this.TypeSel = el.name
          this.TypeSelIndex = el.value
        }
        if (this.inputData[21657 + (this.indexs - 1)] == 0) {
          this.TypeSel = ''
          this.TypeSelIndex = 0
        }
      })


    },
    //全选文本
    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 (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.postControlWrite(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>
  