<template>
  <div class="irrigateSet">
    <div class="table-title">
      <img src="../../assets/img/intrinsicParameter.png" alt="" />{{ pageName }}
    </div>
      <div class="title-tips">控制模式选择
            <div class="input-btn">
                <div class="btn btn-tips" @click="changeOpen(0)" :class="inputData['600'] == 0 ? 'green' : 'blue'">
                    {{ inputData['600'] == 0 ? $t('text.invalid') : $t('text.valid') }}
                </div>
            </div>
        </div>
    <div class="flex-view">
      <div class="input-btn">
        <div
          class="btn"
          @click="change00(2)"
          :class="topActive[2] == 1 ? 'blue' : 'green'"
        >
          <img src="../../assets/image/irrigateSet1.png" alt="" />{{
            $t("text.stop")
          }}
        </div>
        <div
          class="btn"
          @click="change00(1)"
          :class="topActive[1] == 1 ? 'blue' : 'green'"
        >
          <img src="../../assets/image/irrigateSet3.png" alt="" />{{
            $t("text.manual")
          }}
        </div>
        <div
          class="btn"
          @click="change00(0)"
          :class="topActive[0] == 1 ? 'blue' : 'green'"
        >
          <img src="../../assets/image/irrigateSet2.png" alt="" />{{
            $t("text.auto")
          }}
        </div>
      </div>
    </div>
    <div class="flex-view border-none padding-none">
      <div class="input-main-60">
        <span>手动启动时间</span>
        <input
          @blur="blurChange10('601', $event)"
          v-model="inputData['601']"
          @input="changeData10('601', $event)"
          type="text"
          value="60"
          placeholder="60"
        />
        <span>分</span>
      </div>
    </div>
    <div class="text-tips">手自动启动搅拌电机选择:</div>
    <div class="flex-view">
      <div class="input-btn">
        <div
          class="btn btn-w70"
          @click="changeIndexOpen1(0)"
          :class="actList1[0] == '1' ? 'blue' : 'off'"
        >
          A肥
        </div>
        <div
          class="btn btn-w70"
          @click="changeIndexOpen1(1)"
          :class="actList1[1] == '1' ? 'blue' : 'off'"
        >
          B肥
        </div>
        <div
          class="btn btn-w70"
          @click="changeIndexOpen1(2)"
          :class="actList1[2] == '1' ? 'blue' : 'off'"
        >
          C肥
        </div>
        <div
          class="btn btn-w70"
          @click="changeIndexOpen1(3)"
          :class="actList1[3] == '1' ? 'blue' : 'off'"
        >
          D肥
        </div>
        <div
          class="btn btn-w70"
          @click="changeIndexOpen1(4)"
          :class="actList1[4] == '1' ? 'blue' : 'off'"
        >
          E肥
        </div>
        <div
          class="btn btn-w70"
          @click="changeIndexOpen1(5)"
          :class="actList1[5] == '1' ? 'blue' : 'off'"
        >
          F肥
        </div>
        <div
          class="btn btn-w70"
          @click="changeIndexOpen1(6)"
          :class="actList1[6] == '1' ? 'blue' : 'off'"
        >
          G肥
        </div>
        <div
          class="btn btn-w70"
          @click="changeIndexOpen1(7)"
          :class="actList1[7] == '1' ? 'blue' : 'off'"
        >
          H肥
        </div>
        <div
          class="btn btn-w70"
          @click="changeIndexOpen1(8)"
          :class="actList1[8] == '1' ? 'blue' : 'off'"
        >
          酸
        </div>
      </div>
    </div>
    <div class="flex-view padding-none shrink-none">
      <div class="input-sel input-sel-w180">
        <span>运行模式选择:</span>
        <el-dropdown @command="handleCommand1($event, 603)">
          <div class="el-dropdown-link">
            <input
              v-model="inputDataNew[603]"
              type="text"
              class="input-input"
              placeholder="无"
            />
            <div class="arrow">
              <img src="../../assets/image/arrow.png" alt="" />
            </div>
          </div>
          <el-dropdown-menu class="input-menu-180" slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in typeList1"
              :key="index"
              :command="item.value"
              >{{ item.label }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 时间点模式 -->
    <!--  -->
    <block v-show="inputData['603'] == 1">
      <template>
        <div class="title-tips-bold">时间点模式：</div>
        <div class="flex-view border-none padding-none shrink-none">
          <div class="input-main-60">
            <span>每次启动时长</span>
            <input
              @blur="blurChange10('604', $event)"
              v-model="inputData['604']"
              @input="changeData10('604', $event)"
              type="text"
              value="60"
              placeholder="60"
            />
            <span>分</span>
          </div>
        </div>
        <div class="flex-view border-none padding-none shrink-none">
          <div class="number circle">1</div>
          <div class="input-main-60">
            <input
              @blur="blurChange('605', $event)"
              v-model="inputData['605']"
              @input="change('605', $event)"
              type="number"
              placeholder="0"
            />
            <span>:</span>
            <input
              @blur="blurChange('606', $event)"
              v-model="inputData['606']"
              @input="change('606', $event)"
              type="number"
              placeholder="0"
            />
          </div>
        </div>
        <div class="flex-view border-none padding-none shrink-none">
          <div class="number circle">2</div>
          <div class="input-main-60">
            <input
              @blur="blurChange('607', $event)"
              v-model="inputData['607']"
              @input="change('607', $event)"
              type="number"
              placeholder="0"
            />
            <span>:</span>
            <input
              @blur="blurChange('608', $event)"
              v-model="inputData['608']"
              @input="change('608', $event)"
              type="number"
              placeholder="0"
            />
          </div>
        </div>
        <div class="flex-view border-none padding-none shrink-none">
          <div class="number circle">3</div>
          <div class="input-main-60">
            <input
              @blur="blurChange('609', $event)"
              v-model="inputData['609']"
              @input="change('609', $event)"
              type="number"
              placeholder="0"
            />
            <span>:</span>
            <input
              @blur="blurChange('610', $event)"
              v-model="inputData['610']"
              @input="change('610', $event)"
              type="number"
              placeholder="0"
            />
          </div>
        </div>
        <div class="flex-view border-none padding-none shrink-none">
          <div class="number circle">4</div>
          <div class="input-main-60">
            <input
              @blur="blurChange('611', $event)"
              v-model="inputData['611']"
              @input="change('611', $event)"
              type="number"
              placeholder="0"
            />
            <span>:</span>
            <input
              @blur="blurChange('612', $event)"
              v-model="inputData['612']"
              @input="change('612', $event)"
              type="number"
              placeholder="0"
            />
          </div>
        </div>
        <div class="flex-view padding-none shrink-none">
          <div class="number circle">5</div>
          <div class="input-main-60">
            <input
              @blur="blurChange('613', $event)"
              v-model="inputData['613']"
              @input="change('613', $event)"
              type="number"
              placeholder="0"
            />
            <span>:</span>
            <input
              @blur="blurChange('614', $event)"
              v-model="inputData['614']"
              @input="change('614', $event)"
              type="number"
              placeholder="0"
            />
          </div>
        </div>
      </template>
    </block>

    <!-- 时间段模式 -->
    <!--  -->
    <block v-show="inputData['603'] == 2">
      <template>
        <div class="title-tips-bold">时间段模式：</div>
        <div class="flex-view border-none padding-none shrink-none">
          <div class="input-main-60">
            <span>每次启动时长</span>
            <input
              @blur="blurChange10('615', $event)"
              v-model="inputData['615']"
              @input="changeData10('615', $event)"
              type="text"
              value="60"
              placeholder="60"
            />
            <span>分</span>
          </div>
        </div>
        <div class="flex-view border-none padding-none shrink-none">
          <div class="number circle">1</div>
          <div class="input-main-60">
            <input
              @blur="blurChange('617', $event)"
              v-model="inputData['617']"
              @input="change('617', $event)"
              type="number"
              placeholder="0"
            />
            <span>:</span>
            <input
              @blur="blurChange('618', $event)"
              v-model="inputData['618']"
              @input="change('618', $event)"
              type="number"
              placeholder="0"
            />
            <span>-</span>
            <input
              @blur="blurChange('619', $event)"
              v-model="inputData['619']"
              @input="change('619', $event)"
              type="number"
              placeholder="0"
            />
            <span>:</span>
            <input
              @blur="blurChange('620', $event)"
              v-model="inputData['620']"
              @input="change('620', $event)"
              type="number"
              placeholder="0"
            />
            <span style="font-size: 16px">{{
              $t("irrigateSetSoil.intervalStart.timesInRange")
            }}</span>
            <input
              @blur="blurChange('616', $event)"
              v-model="inputData['616']"
              @input="change('616', $event)"
              type="number"
              placeholder="0"
            />
          </div>
        </div>
        <div class="flex-view shrink-none">
          <div class="number circle">2</div>
          <div class="input-main-60">
            <input
              @blur="blurChange('622', $event)"
              v-model="inputData['622']"
              @input="change('622', $event)"
              type="number"
              placeholder="0"
            />
            <span>:</span>
            <input
              @blur="blurChange('623', $event)"
              v-model="inputData['623']"
              @input="change('623', $event)"
              type="number"
              placeholder="0"
            />
            <span>-</span>
            <input
              @blur="blurChange('624', $event)"
              v-model="inputData['624']"
              @input="change('624', $event)"
              type="number"
              placeholder="0"
            />
            <span>:</span>
            <input
              @blur="blurChange('625', $event)"
              v-model="inputData['625']"
              @input="change('625', $event)"
              type="number"
              placeholder="0"
            />
            <span style="font-size: 16px">{{
              $t("irrigateSetSoil.intervalStart.timesInRange")
            }}</span>
            <input
              @blur="blurChange('621', $event)"
              v-model="inputData['621']"
              @input="change('621', $event)"
              type="number"
              placeholder="0"
            />
          </div>
        </div>
      </template>
    </block>

    <!-- 联动模式 -->
    <!--  -->
    <block v-show="inputData['603'] == 3">
      <template>
        <div class="title-tips-bold">联动模式：</div>
        <div class="flex-view shrink-none">
          <div class="input-main-60">
            <span>施肥机启动时提前</span>
            <input
              @blur="blurChange('626', $event)"
              v-model="inputData['626']"
              @input="change('626', $event)"
              type="text"
              value="60"
              placeholder="60"
            />
            <span>秒，联动施肥配方搅拌。</span>
          </div>
        </div>
      </template>
    </block>

    <div class="flex-view padding-none border-none shrink-none">
      <div class="input-main-60">
        <span>A肥搅拌通道选择</span>
        <input
          @blur="blurChange('627', $event)"
          v-model="inputData['627']"
          @input="change('627', $event)"
          type="text"
          value="60"
          placeholder="60"
        />
      </div>
      <span>，</span>
      <div class="input-main-60">
        <span>B肥搅拌通道选择</span>
        <input
          @blur="blurChange('628', $event)"
          v-model="inputData['628']"
          @input="change('628', $event)"
          type="text"
          value="60"
          placeholder="60"
        />
      </div>
      <span>，</span>
      <div class="input-main-60">
        <span>C肥搅拌通道选择</span>
        <input
          @blur="blurChange('629', $event)"
          v-model="inputData['629']"
          @input="change('629', $event)"
          type="text"
          value="60"
          placeholder="60"
        />
      </div>
      <span>;</span>
    </div>

    <div class="flex-view padding-none border-none shrink-none">
      <div class="input-main-60">
        <span>D肥搅拌通道选择</span>
        <input
          @blur="blurChange('630', $event)"
          v-model="inputData['630']"
          @input="change('630', $event)"
          type="text"
          value="60"
          placeholder="60"
        />
      </div>
      <span>，</span>
       <div class="input-main-60">
        <span>E肥搅拌通道选择</span>
        <input
          @blur="blurChange('631', $event)"
          v-model="inputData['631']"
          @input="change('631', $event)"
          type="text"
          value="60"
          placeholder="60"
        />
      </div>
      <span>，</span>
      <div class="input-main-60">
        <span>F肥搅拌通道选择</span>
        <input
          @blur="blurChange('632', $event)"
          v-model="inputData['632']"
          @input="change('632', $event)"
          type="text"
          value="60"
          placeholder="60"
        />
      </div>
      <span>;</span>
    
    </div>

    <div class="flex-view padding-none border-none shrink-none">
        <div class="input-main-60">
        <span>G肥搅拌通道选择</span>
        <input
          @blur="blurChange('633', $event)"
          v-model="inputData['633']"
          @input="change('633', $event)"
          type="text"
          value="60"
          placeholder="60"
        />
      </div>
      <span>，</span>
      <div class="input-main-60">
        <span>H肥搅拌通道选择</span>
        <input
          @blur="blurChange('634', $event)"
          v-model="inputData['634']"
          @input="change('634', $event)"
          type="text"
          value="60"
          placeholder="60"
        />
      </div>
      <span>，</span>
      <div class="input-main-60">
        <span>酸搅拌通道选择</span>
        <input
          @blur="blurChange('635', $event)"
          v-model="inputData['635']"
          @input="change('635', $event)"
          type="text"
          value="60"
          placeholder="60"
        />
      </div>
      <span>。</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      topActive: 1,
      inputData: [],
      inputDataNew: [],
      actList1: [],
      loading: null,
      pageName: "搅拌配置",
      typeList1: [
        { label: "时间点模式", value: 1 },
        { label: "时间段模式", value: 2 },
        { label: "联动模式", value: 3 },
      ],
    };
  },
  watch: {
    $route(newVal, oldVal) {
      const that = this;
      this.indexs = this.$route.query.id ? this.$route.query.id : 1;
      if (this.$route.query.name) {
        this.pageName = this.$route.query.name;
      }
      setTimeout(() => {
        that.getActive1();
      }, 0);
    },
    "$store.state.equipmentIndex"(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放入焦点，全选文本
    }
    if (this.$route.query.name) {
      this.pageName = this.$route.query.name;
    }
  },
  methods: {
    //失去焦点 计算公式 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 (store.nowInput != el.target.value) {
        this.changeData(data);
      }
      // 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);
    },
    // 计算展示值 计算公式 x/10
    countData10(data) {
      if (data) {
        return data / 10;
      } else {
        return 0;
      }
    },
    // 计算展示值 计算公式 (x - 400) / 10
    countData(data) {
      if (data) {
        return (data - 400) / 10;
      } else {
        return 0;
      }
    },
    //失去焦点
    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 (store.nowInput != el.target.value) {
        this.changeData(data);
      }
      // 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);
    },
    getData1(data) {
      var name = "";
      this.typeList1.forEach((el, index) => {
        if (el.value == data) {
          name = el.label;
        }
      });
      return name;
    },
    handleCommand1(command, code) {
      this.typeList1.forEach((el, index) => {
        if (el.value == command) {
          this.inputDataNew[code] = el.label;
        }
      });
      this.inputData[code] = command;
      var dataNum = {
        target: {
          value: command,
        },
      };
      this.changeBtn(code, dataNum);
    },
    changeIndexOpen1(active) {
      if (this.actList1[active] == "1") {
        this.actList1[active] = "0";
      } else {
        this.actList1[active] = "1";
      }
      this.$forceUpdate();
      var revList = this.actList1.slice().reverse();
      var num = revList.join("");
      var dataNum = {
        target: {
          value: parseInt(num, 2),
        },
      };
      this.changeBtn(602, dataNum);
    },
    getActive1() {
      this.actList1 = [];
      var num = this.inputData["602"]?this.inputData["602"]:0

      var num1 = this.padString(num.toString(2), 8);
      var openListNew = [];
      openListNew = num1.split("");
      this.actList1 = openListNew.reverse();
    },

    // 工作方式选择
    changeOpen(index) {
      this.inputData['600'] = index;
      var dataNum = {
        target: {
          value: index,
        },
      };
      
          this.getType00();
      this.changeBtn('600', dataNum);
    },
    change00(index) {
      var list = ["0", "0", "0"];
      list[index] = "1";
      this.topActive = list;
      this.$forceUpdate();
      var revList = list.slice().reverse();
      var num = revList.join("");
      var dataNum = {
        target: {
          value: parseInt(num, 2),
        },
      };
      this.inputData['600']=parseInt(num, 2)
      this.changeBtn("600", dataNum);
    },
    getType00() {
      var num =this.inputData["600"]?this.inputData["600"]:0
      var number = this.padString(num.toString(2), 3);
      console.log(number);
      var openListNew = [];
      openListNew = number.split("");
      this.topActive = openListNew.reverse();
      // if (Number(number[0])) {
      //   this.topActive = 1
      // } else if (Number(number[1])) {
      //   this.topActive = 2
      // } else if (Number(number[2])) {
      //   this.topActive = 3
      // } else {
      //   this.topActive = 0
      // }
    },
    dataInit() {
      this.loading = this.$loading({
        lock: true,
        text: this.$t("message.loading"),
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      var store = this.$store.state;
      var data = {
        equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
        pattern: 600, //需要根据文档填写 //6目标ph-数值
        regNum: 36,
      };
      this.api.postReg(data).then((res) => {
        this.loading.close();
        if (res.data.code == 200) {
          this.inputData = res.data.data;
          this.inputDataNew = JSON.parse(JSON.stringify(res.data.data));

          this.getType00();

          this.getActive1();

          this.inputDataNew[603] = this.getData1(this.inputData[603]);

          this.inputData[601] = this.countData10(this.inputData[601]);
          this.inputData[604] = this.countData10(this.inputData[604]);
          this.inputData[615] = this.countData10(this.inputData[615]);
        }
      });
    },
    //二进制转换后的补全
    padString(str, length) {
      return str.padStart(length, "0");
    },
    //反转数组 不影响原数组
    myReverse(arr) {
      return [...arr].reverse();
    },
    //全选文本
    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,
      }; //避免开启多个计时器
      console.log(store.nowInput, 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;
      });
    },
  },
};
</script>
<style lang="scss"></style>