<template>
  <div class="irrigateSet">
    <div class="">
      <div class="table-title">
        <img src="../../assets/image/irrigateSet.png" alt="" />
        {{
          $store.state.equipmentName[
            "solenoid" + $store.state.nameList[indexs - 1]
          ]
        }}
        <div class="tips">
          {{
            $store.state.equipmentName[
              "solenoid" + $store.state.nameList[indexs - 1]
            ]
          }}
        </div>
      </div>
      <div class="flex-view">
        <div class="input-btn">
          <span>{{ $t("irrigateSetSoil.label") }}</span>
          <div
            class="btn"
            @click="change00(1)"
            :class="topActive == 1 ? 'blue' : 'green'"
          >
            <img src="../../assets/image/irrigateSet1.png" alt="" />{{
              $t("text.stop")
            }}
          </div>
          <div
            class="btn"
            @click="change00(2)"
            :class="topActive == 2 ? 'blue' : 'green'"
          >
            <img src="../../assets/image/irrigateSet3.png" alt="" />{{
              $t("text.manual")
            }}
          </div>
          <div
            class="btn"
            @click="change00(3)"
            :class="topActive == 3 ? 'blue' : 'green'"
          >
            <img src="../../assets/image/irrigateSet2.png" alt="" />{{
              $t("text.auto")
            }}
          </div>
        </div>
        <div class="input-main">
          <span>{{ $t("irrigateSetSoil.manualStartTime") }}</span>
          <input
            @blur="blurChange10(10 + (indexs - 1) + '01', $event)"
            v-model="inputData[10 + (indexs - 1) + '01']"
            @input="changeData10(10 + (indexs - 1) + '01', $event)"
            type="text"
            value="60"
            placeholder="60"
          />
        </div>
      </div>
      <div class="flex-view">
        <div class="input-main-60">
          <span>{{ $t("irrigateSetSoil.autoRun.startDate") }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '02', $event)"
            v-model="inputData[10 + (indexs - 1) + '02']"
            @input="change(10 + (indexs - 1) + '02', $event)"
            type="number"
            placeholder="0"
          />
          <span>{{ $t("irrigateSetSoil.autoRun.year") }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '03', $event)"
            v-model="inputData[10 + (indexs - 1) + '03']"
            @input="change(10 + (indexs - 1) + '03', $event)"
            type="number"
            placeholder="0"
          />
          <span>{{ $t("irrigateSetSoil.autoRun.month") }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '04', $event)"
            v-model="inputData[10 + (indexs - 1) + '04']"
            @input="change(10 + (indexs - 1) + '04', $event)"
            type="number"
            placeholder="0"
          />
          <span>{{ $t("irrigateSetSoil.autoRun.day") }}</span>
        </div>
        <div class="input-main-60">
          <span>{{ $t("irrigateSetSoil.autoRun.intervalDays") }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '05', $event)"
            v-model="inputData[10 + (indexs - 1) + '05']"
            @input="change(10 + (indexs - 1) + '05', $event)"
            type="number"
            placeholder="0"
          />
        </div>
      </div>
      <div class="flex-view">
        <div class="input-main-60">
          <span>{{ $t("irrigateSet.irrigation") }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '51', $event)"
            v-model="inputData[10 + (indexs - 1) + '51']"
            @input="change(10 + (indexs - 1) + '51', $event)"
            type="number"
            placeholder="0"
          />
          <span>{{ $t("irrigateSet.clearWaterTimes") }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '52', $event)"
            v-model="inputData[10 + (indexs - 1) + '52']"
            @input="change(10 + (indexs - 1) + '52', $event)"
            type="number"
            placeholder="0"
          />
          <span>{{ $t("irrigateSet.fertilizationTimes") }}</span>
        </div>
      </div>
      <div class="flex-view">
        <div class="input-main-60">
          <span>{{ $t("irrigateSet.useFormula") }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '58', $event)"
            v-model="inputData[10 + (indexs - 1) + '58']"
            @input="change(10 + (indexs - 1) + '58', $event)"
            type="number"
            placeholder="0"
          />
          <span>{{ $t("irrigateSet.formulaNumber") }}</span>
          <span>{{ $t("irrigateSet.reachMidLevel") }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '66', $event)"
            v-model="inputData[10 + (indexs - 1) + '66']"
            @input="change(10 + (indexs - 1) + '66', $event)"
            type="number"
            placeholder="0"
          />
          <span>{{ $t("irrigateSet.solenoidValveOutput") }}</span>
        </div>
      </div>
      <div class="flex-view">
        <div class="input-main-60">
          <span>{{ $t("irrigateSet.solenoidValveChannel") }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '54', $event)"
            v-model="inputData[10 + (indexs - 1) + '54']"
            @input="change(10 + (indexs - 1) + '54', $event)"
            type="text"
            placeholder="0"
          />
          <input
            @blur="blurChange(10 + (indexs - 1) + '55', $event)"
            v-model="inputData[10 + (indexs - 1) + '55']"
            @input="change(10 + (indexs - 1) + '55', $event)"
            type="text"
            placeholder="0"
          />
          <input
            @blur="blurChange(10 + (indexs - 1) + '56', $event)"
            v-model="inputData[10 + (indexs - 1) + '56']"
            @input="change(10 + (indexs - 1) + '56', $event)"
            type="text"
            placeholder="0"
          />
          <input
            @blur="blurChange(10 + (indexs - 1) + '57', $event)"
            v-model="inputData[10 + (indexs - 1) + '57']"
            @input="change(10 + (indexs - 1) + '57', $event)"
            type="text"
            placeholder="0"
          />
          <input
            @blur="blurChange(10 + (indexs - 1) + '60', $event)"
            v-model="inputData[10 + (indexs - 1) + '60']"
            @input="change(10 + (indexs - 1) + '60', $event)"
            type="text"
            placeholder="0"
          />
          <input
            @blur="blurChange(10 + (indexs - 1) + '61', $event)"
            v-model="inputData[10 + (indexs - 1) + '61']"
            @input="change(10 + (indexs - 1) + '61', $event)"
            type="text"
            placeholder="0"
          />
          <input
            @blur="blurChange(10 + (indexs - 1) + '62', $event)"
            v-model="inputData[10 + (indexs - 1) + '62']"
            @input="change(10 + (indexs - 1) + '62', $event)"
            type="text"
            placeholder="0"
          />
          <input
            @blur="blurChange(10 + (indexs - 1) + '63', $event)"
            v-model="inputData[10 + (indexs - 1) + '63']"
            @input="change(10 + (indexs - 1) + '63', $event)"
            type="text"
            placeholder="0"
          />
          <input
            @blur="blurChange(10 + (indexs - 1) + '64', $event)"
            v-model="inputData[10 + (indexs - 1) + '64']"
            @input="change(10 + (indexs - 1) + '64', $event)"
            type="text"
            placeholder="0"
          />
          <input
            @blur="blurChange(10 + (indexs - 1) + '65', $event)"
            v-model="inputData[10 + (indexs - 1) + '65']"
            @input="change(10 + (indexs - 1) + '65', $event)"
            type="text"
            placeholder="0"
          />
        </div>
        <!-- <div class="btn green">
          <img src="../../assets/image/rotate.png" alt="" />轮模式启用
        </div> -->
      </div>
      <div class="flex-view" v-show="indexs >= 5 && indexs <= 8">
        <div class="input-main-60">
          <span>{{ $t("irrigateSet.activateFollowValve") }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '75', $event)"
            v-model="inputData[10 + (indexs - 1) + '75']"
            @input="change(10 + (indexs - 1) + '75', $event)"
            type="number"
            placeholder="0"
          />
        </div>
      </div>
      <div class="flex-view">
        <div
          @click="(open1 = !open1), change59()"
          class="open-btn"
          :class="open1 ? 'active' : ''"
        >
          <img
            v-if="!open1"
            src="../../assets/image/irrigateSet-icon1.png"
            alt=""
          />
          <img
            v-else
            src="../../assets/image/irrigateSet-icon1-act.png"
            alt=""
          />
          {{ $t("irrigateSet.options.noFertilizer") }}
        </div>
        <div
          @click="(open2 = !open2), change59()"
          class="open-btn"
          :class="open2 ? 'active' : ''"
        >
          <img
            v-if="!open2"
            src="../../assets/image/irrigateSet-icon2.png"
            alt=""
          />
          <img
            v-else
            src="../../assets/image/irrigateSet-icon2-act.png"
            alt=""
          />
          {{ $t("irrigateSet.options.emptyTank") }}
        </div>
        <div
          @click="(open3 = !open3), change59()"
          class="open-btn"
          :class="open3 ? 'active' : ''"
        >
          <img
            v-if="!open3"
            src="../../assets/image/irrigateSet-icon2.png"
            alt=""
          />
          <img
            v-else
            src="../../assets/image/irrigateSet-icon2-act.png"
            alt=""
          />
          {{ $t("irrigateSet.options.rotationMode") }}
        </div>
        <div
          @click="(open4 = !open4), change59()"
          class="open-btn"
          :class="open4 ? 'active' : ''"
        >
          <img
            v-if="!open4"
            src="../../assets/image/irrigateSet-icon0.png"
            alt=""
          />
          <img
            v-else
            src="../../assets/image/irrigateSet-icon0-act.png"
            alt=""
          />
          {{ $t("irrigateSet.options.noInletPump") }}
        </div>
      </div>
      <div class="input-view">
        <div class="input-sel">
          <span>{{ $t("irrigateSetSoil.fertilizerMode.label") }}</span>
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="el-dropdown-link">
              <input
                type="text"
                value="选择设定弹窗"
                v-model="data53"
                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="1">{{
                $t("irrigateSetSoil.fertilizerMode.timePoint")
              }}</el-dropdown-item>
              <el-dropdown-item command="2">{{
                $t("irrigateSetSoil.fertilizerMode.timeRange")
              }}</el-dropdown-item>
              <el-dropdown-item command="3">{{
                $t("irrigateSetSoil.fertilizerMode.soilSensor")
              }}</el-dropdown-item>
              <el-dropdown-item command="4">{{
                $t("irrigateSetSoil.fertilizerMode.lightSensor")
              }}</el-dropdown-item>
              <el-dropdown-item command="5">{{
                $t("irrigateSetSoil.fertilizerMode.externalSignal")
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div v-show="this.inputData[10 + (this.indexs - 1) + '53']==1">
      <div class="model1-top">
        <div class="btn blue">
          <img src="../../assets/image/play.png" alt="" />{{
            $t("irrigateSetSoil.timePointStart.title")
          }}
        </div>
        <div class="input-main-60">
          <span>{{ $t("irrigateSetSoil.timePointStart.durationLabel") }}</span>
          <input
            @blur="blurChange10(10 + (indexs - 1) + '06', $event)"
            v-model="inputData[10 + (indexs - 1) + '06']"
            @input="changeData10(10 + (indexs - 1) + '06', $event)"
            type="number"
            placeholder="0"
          />
          <span>{{ $t("text.min") }}</span>
        </div>
      </div>
      <div class="model1-bottom">
        <div class="title">
          {{ $t("irrigateSetSoil.timePointStart.startTimes") }}
        </div>
        <div class="model1-content">
          <div>
            <div class="number">1</div>
            <div class="input-main-60">
              <input
                @blur="blurChange(10 + (indexs - 1) + '07', $event)"
                v-model="inputData[10 + (indexs - 1) + '07']"
                @input="change(10 + (indexs - 1) + '07', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '08', $event)"
                v-model="inputData[10 + (indexs - 1) + '08']"
                @input="change(10 + (indexs - 1) + '08', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
          <div>
            <div class="number">2</div>
            <div class="input-main-60">
              <input
                @blur="blurChange(10 + (indexs - 1) + '09', $event)"
                v-model="inputData[10 + (indexs - 1) + '09']"
                @input="change(10 + (indexs - 1) + '09', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '10', $event)"
                v-model="inputData[10 + (indexs - 1) + '10']"
                @input="change(10 + (indexs - 1) + '10', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
          <div>
            <div class="number">3</div>
            <div class="input-main-60">
              <input
                @blur="blurChange(10 + (indexs - 1) + '11', $event)"
                v-model="inputData[10 + (indexs - 1) + '11']"
                @input="change(10 + (indexs - 1) + '11', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '12', $event)"
                v-model="inputData[10 + (indexs - 1) + '12']"
                @input="change(10 + (indexs - 1) + '12', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
          <div>
            <div class="number">4</div>
            <div class="input-main-60">
              <input
                @blur="blurChange(10 + (indexs - 1) + '13', $event)"
                v-model="inputData[10 + (indexs - 1) + '13']"
                @input="change(10 + (indexs - 1) + '13', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '14', $event)"
                v-model="inputData[10 + (indexs - 1) + '14']"
                @input="change(10 + (indexs - 1) + '14', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
          <div>
            <div class="number">5</div>
            <div class="input-main-60">
              <input
                @blur="blurChange(10 + (indexs - 1) + '15', $event)"
                v-model="inputData[10 + (indexs - 1) + '15']"
                @input="change(10 + (indexs - 1) + '15', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '16', $event)"
                v-model="inputData[10 + (indexs - 1) + '16']"
                @input="change(10 + (indexs - 1) + '16', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div  v-show="this.inputData[10 + (this.indexs - 1) + '53']==2">
      <div class="model1-top model2-top">
        <div class="btn blue">
          <img src="../../assets/image/play.png" alt="" />{{
            $t("irrigateSetSoil.intervalStart.title")
          }}
        </div>
        <div class="input-main-60">
          <span>{{ $t("irrigateSetSoil.timePointStart.durationLabel") }}</span>
          <input
            @blur="blurChange10(10 + (indexs - 1) + '17', $event)"
            v-model="inputData[10 + (indexs - 1) + '17']"
            @input="changeData10(10 + (indexs - 1) + '17', $event)"
            type="number"
            placeholder="0"
          />
          <span>{{ $t("text.min") }}</span>
        </div>
      </div>
      <div class="model1-bottom">
        <div class="title">
          {{ $t("irrigateSetSoil.timePointStart.startTimes") }}
        </div>
        <div class="model1-content">
          <div>
            <div class="number">1</div>
            <div class="input-main-60">
              <input
                @blur="blurChange(10 + (indexs - 1) + '19', $event)"
                v-model="inputData[10 + (indexs - 1) + '19']"
                @input="change(10 + (indexs - 1) + '19', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '20', $event)"
                v-model="inputData[10 + (indexs - 1) + '20']"
                @input="change(10 + (indexs - 1) + '20', $event)"
                type="number"
                placeholder="0"
              />
              <span>-</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '21', $event)"
                v-model="inputData[10 + (indexs - 1) + '21']"
                @input="change(10 + (indexs - 1) + '21', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '22', $event)"
                v-model="inputData[10 + (indexs - 1) + '22']"
                @input="change(10 + (indexs - 1) + '22', $event)"
                type="number"
                placeholder="0"
              />
              <span style="font-size: 16px">{{
                $t("irrigateSetSoil.intervalStart.timesInRange")
              }}</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '18', $event)"
                v-model="inputData[10 + (indexs - 1) + '18']"
                @input="change(10 + (indexs - 1) + '18', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
          <div>
            <div class="number">2</div>
            <div class="input-main-60">
              <input
                @blur="blurChange(10 + (indexs - 1) + '24', $event)"
                v-model="inputData[10 + (indexs - 1) + '24']"
                @input="change(10 + (indexs - 1) + '24', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '25', $event)"
                v-model="inputData[10 + (indexs - 1) + '25']"
                @input="change(10 + (indexs - 1) + '25', $event)"
                type="number"
                placeholder="0"
              />
              <span>-</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '26', $event)"
                v-model="inputData[10 + (indexs - 1) + '26']"
                @input="change(10 + (indexs - 1) + '26', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '27', $event)"
                v-model="inputData[10 + (indexs - 1) + '27']"
                @input="change(10 + (indexs - 1) + '27', $event)"
                type="number"
                placeholder="0"
              />
              <span style="font-size: 16px">{{
                $t("irrigateSetSoil.intervalStart.timesInRange")
              }}</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '23', $event)"
                v-model="inputData[10 + (indexs - 1) + '23']"
                @input="change(10 + (indexs - 1) + '23', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
          <div>
            <div class="number">3</div>
            <div class="input-main-60">
              <input
                @blur="blurChange(10 + (indexs - 1) + '29', $event)"
                v-model="inputData[10 + (indexs - 1) + '29']"
                @input="change(10 + (indexs - 1) + '29', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '30', $event)"
                v-model="inputData[10 + (indexs - 1) + '30']"
                @input="change(10 + (indexs - 1) + '30', $event)"
                type="number"
                placeholder="0"
              />
              <span>-</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '31', $event)"
                v-model="inputData[10 + (indexs - 1) + '31']"
                @input="change(10 + (indexs - 1) + '31', $event)"
                type="number"
                placeholder="0"
              />
              <span>:</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '32', $event)"
                v-model="inputData[10 + (indexs - 1) + '32']"
                @input="change(10 + (indexs - 1) + '32', $event)"
                type="number"
                placeholder="0"
              />
              <span style="font-size: 16px">{{
                $t("irrigateSetSoil.intervalStart.timesInRange")
              }}</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '28', $event)"
                v-model="inputData[10 + (indexs - 1) + '28']"
                @input="change(10 + (indexs - 1) + '28', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div  v-show="this.inputData[10 + (this.indexs - 1) + '53']==4">
      <div class="model1-top model3-top">
        <div class="btn blue">
          <img src="../../assets/image/model3-icon.png" alt="" />{{
            $t("irrigateSetSoil.lightAccumulation.title")
          }}
        </div>
        <div class="input-main-60">
          <span>{{
            $t("irrigateSetSoil.lightAccumulation.validTimeLabel")
          }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '45', $event)"
            v-model="inputData[10 + (indexs - 1) + '45']"
            @input="change(10 + (indexs - 1) + '45', $event)"
            type="number"
            placeholder="0"
          />
          <span>:</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '46', $event)"
            v-model="inputData[10 + (indexs - 1) + '46']"
            @input="change(10 + (indexs - 1) + '46', $event)"
            type="number"
            placeholder="0"
          />
          <span>-</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '47', $event)"
            v-model="inputData[10 + (indexs - 1) + '47']"
            @input="change(10 + (indexs - 1) + '47', $event)"
            type="number"
            placeholder="0"
          />
          <span>:</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '48', $event)"
            v-model="inputData[10 + (indexs - 1) + '48']"
            @input="change(10 + (indexs - 1) + '48', $event)"
            type="number"
            placeholder="0"
          />
        </div>
      </div>
      <div class="model1-bottom model3-bottom">
        <div class="flex-view padding-none border-none shrink-none">
          <div class="input-main-60">
            <span class="text">{{
              $t("irrigateSetSoil.lightAccumulation.durationLabel")
            }}</span>
            <input
              @blur="blurChange10(10 + (indexs - 1) + '40', $event)"
              v-model="inputData[10 + (indexs - 1) + '40']"
              @input="changeData10(10 + (indexs - 1) + '40', $event)"
              type="number"
              placeholder="0"
            />
            <span class="text">{{ $t("text.min") }}</span>
          </div>
          <div class="input-main-60">
            <span class="text">{{
              $t("irrigateSetSoil.lightAccumulation.thresholdLabel")
            }}</span>
            <input
              @blur="blurChange(10 + (indexs - 1) + '41', $event)"
              v-model="inputData[10 + (indexs - 1) + '41']"
              @input="change(10 + (indexs - 1) + '41', $event)"
              type="number"
              placeholder="0"
            />
          </div>
          <div class="input-main-60">
            <span class="text">{{
              $t("irrigateSetSoil.lightAccumulation.minLightLabel")
            }}</span>
            <input
              @blur="blurChange(10 + (indexs - 1) + '42', $event)"
              v-model="inputData[10 + (indexs - 1) + '42']"
              @input="change(10 + (indexs - 1) + '42', $event)"
              type="number"
              placeholder="0"
            />
            <span class="text">Klux</span>
          </div>
       
        </div>
         <div class="flex-view padding-none border-none shrink-none">
          <div class="input-main-60">
            <span class="text" style="padding-left: 20px">{{
              $t("irrigateSetSoil.lightAccumulation.minIntervalLabel")
            }}</span>
            <input
              @blur="blurChange10(10 + (indexs - 1) + '43', $event)"
              v-model="inputData[10 + (indexs - 1) + '43']"
              @input="changeData10(10 + (indexs - 1) + '43', $event)"
              type="number"
              placeholder="0"
            />
          </div>
          <div class="input-main-60">
            <span class="text">{{
              $t("irrigateSetSoil.lightAccumulation.maxIntervalLabel")
            }}</span>
            <input
              @blur="blurChange10(10 + (indexs - 1) + '44', $event)"
              v-model="inputData[10 + (indexs - 1) + '44']"
              @input="changeData10(10 + (indexs - 1) + '44', $event)"
              type="number"
              placeholder="0"
            />
          </div>
        </div>
      </div>
    </div>

    <div  v-show="this.inputData[10 + (this.indexs - 1) + '53']==3">
      <div class="model1-top model3-top">
        <div class="btn blue">
          <img src="../../assets/image/model3-icon.png" alt="" />{{
            $t("irrigateSetSoil.soilSensor.title")
          }}
        </div>
        <div class="input-main-60">
          <span>{{
            $t("irrigateSetSoil.lightAccumulation.validTimeLabel")
          }}</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '33', $event)"
            v-model="inputData[10 + (indexs - 1) + '33']"
            @input="change(10 + (indexs - 1) + '33', $event)"
            type="number"
            placeholder="0"
          />
          <span>:</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '34', $event)"
            v-model="inputData[10 + (indexs - 1) + '34']"
            @input="change(10 + (indexs - 1) + '34', $event)"
            type="number"
            placeholder="0"
          />
          <span>-</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '35', $event)"
            v-model="inputData[10 + (indexs - 1) + '35']"
            @input="change(10 + (indexs - 1) + '35', $event)"
            type="number"
            placeholder="0"
          />
          <span>:</span>
          <input
            @blur="blurChange(10 + (indexs - 1) + '36', $event)"
            v-model="inputData[10 + (indexs - 1) + '36']"
            @input="change(10 + (indexs - 1) + '36', $event)"
            type="number"
            placeholder="0"
          />
        </div>
      </div>
      <div class="model1-bottom model3-bottom">
        <div class="flex-view padding-none border-none shrink-none">
          <div class="input-main-60">
            <span class="text">{{
              $t("irrigateSetSoil.soilSensor.minMoistureLabel")
            }}</span>
            <input
              @blur="blurChange(10 + (indexs - 1) + '37', $event)"
              v-model="inputData[10 + (indexs - 1) + '37']"
              @input="change(10 + (indexs - 1) + '37', $event)"
              type="number"
              placeholder="0"
            />
            <span class="text">%</span>
          </div>
          <div class="input-main-60">
            <span class="text">{{
              $t("irrigateSetSoil.soilSensor.maxMoistureLabel")
            }}</span>
            <input
              @blur="blurChange(10 + (indexs - 1) + '38', $event)"
              v-model="inputData[10 + (indexs - 1) + '38']"
              @input="change(10 + (indexs - 1) + '38', $event)"
              type="number"
              placeholder="0"
            />
            <span class="text">%</span>
          </div>
          <div class="input-main-60">
            <span class="text">{{
              $t("irrigateSetSoil.soilSensor.maxDurationLabel")
            }}</span>
            <input
              @blur="blurChange10(10 + (indexs - 1) + '39', $event)"
              v-model="inputData[10 + (indexs - 1) + '39']"
              @input="changeData10(10 + (indexs - 1) + '39', $event)"
              type="number"
              placeholder="0"
            />
            <span class="text">{{ $t("text.min") }}</span>
          </div>
        </div>
      </div>
    </div>

    <div  v-show="this.inputData[10 + (this.indexs - 1) + '53']==5">
      <div style="display: flex; align-items: center">
        <div class="btn blue">
          <img src="../../assets/image/model4-icon.png" alt="" />{{
            $t("irrigateSetSoil.externalControl.title")
          }}
        </div>
        <div>
          <div class="input-main-60">
            <span>{{
              $t("irrigateSetSoil.lightAccumulation.validTimeLabel")
            }}</span>
            <input
              @blur="blurChange(10 + (indexs - 1) + '67', $event)"
              v-model="inputData[10 + (indexs - 1) + '67']"
              @input="change(10 + (indexs - 1) + '67', $event)"
              type="number"
              placeholder="0"
              min="0"
              max="23"
            />
            <span>:</span>
            <input
              @blur="blurChange(10 + (indexs - 1) + '68', $event)"
              v-model="inputData[10 + (indexs - 1) + '68']"
              @input="change(10 + (indexs - 1) + '68', $event)"
              type="number"
              placeholder="0"
              min="0"
              max="59"
            />
            <span>--</span>
            <input
              @blur="blurChange(10 + (indexs - 1) + '69', $event)"
              v-model="inputData[10 + (indexs - 1) + '69']"
              @input="change(10 + (indexs - 1) + '69', $event)"
              type="number"
              placeholder="0"
              min="0"
              max="23"
            />
            <span>:</span>
            <input
              @blur="blurChange(10 + (indexs - 1) + '70', $event)"
              v-model="inputData[10 + (indexs - 1) + '70']"
              @input="change(10 + (indexs - 1) + '70', $event)"
              type="number"
              placeholder="0"
              min="0"
              max="59"
            />
          </div>
        </div>
      </div>

      <div class="model1-top model4-top">
        <div class="model-left">
          <div
            class="btn btn-w70"
            @click="
              blurChange(10 + (indexs - 1) + '71', { target: { value: 1 } }),
                (model4Sel = 1)
            "
            :class="model4Sel == 1 ? 'blue' : 'off'"
          >
            {{ model4Sel == 1 ? $t("text.valid") : $t("text.invalid") }}
          </div>
          <span>{{
            $t("irrigateSetSoil.externalControl.digitalControl")
          }}</span>
        </div>

        <div class="model-right">
          <div>
            <div class="number">1</div>
            <div class="input-main-60">
              <span>{{
                $t("irrigateSetSoil.externalControl.channelLabel")
              }}</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '49', $event)"
                v-model="inputData[10 + (indexs - 1) + '49']"
                @input="change(10 + (indexs - 1) + '49', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
          <div>
            <div class="number">2</div>
            <div class="input-main-60">
              <span>{{
                $t("irrigateSetSoil.externalControl.channelLabel")
              }}</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '50', $event)"
                v-model="inputData[10 + (indexs - 1) + '50']"
                @input="change(10 + (indexs - 1) + '50', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="model1-top model4-top">
        <div class="model-left">
          <div
            class="btn btn-w70"
            @click="
              blurChange(10 + (indexs - 1) + '71', { target: { value: 2 } }),
                (model4Sel = 2)
            "
            :class="model4Sel == 2 ? 'blue' : 'off'"
          >
            {{ model4Sel == 2 ? $t("text.valid") : $t("text.invalid") }}
          </div>
          <span>{{ $t("irrigateSetSoil.externalControl.levelControl") }}</span>
        </div>

        <div class="model-right">
          <div>
            <div class="input-main-60">
              <span>{{
                $t("irrigateSetSoil.externalControl.levelChannelLabel")
              }}</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '72', $event)"
                v-model="inputData[10 + (indexs - 1) + '72']"
                @input="change(10 + (indexs - 1) + '72', $event)"
                type="number"
                placeholder="0"
              />
            </div>
          </div>
          <div>
            <div class="input-main-60">
              <span>{{
                $t("irrigateSetSoil.externalControl.startLevelLabel")
              }}</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '73', $event)"
                v-model="inputData[10 + (indexs - 1) + '73']"
                @input="change(10 + (indexs - 1) + '73', $event)"
                type="number"
                placeholder="0"
              />
              <span>cm</span>
            </div>
          </div>
          <div>
            <div class="input-main-60">
              <span>{{
                $t("irrigateSetSoil.externalControl.stopLevelLabel")
              }}</span>
              <input
                @blur="blurChange(10 + (indexs - 1) + '74', $event)"
                v-model="inputData[10 + (indexs - 1) + '74']"
                @input="change(10 + (indexs - 1) + '74', $event)"
                type="number"
                placeholder="0"
              />
              <span>cm</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import setParams from "../../components/setParams.vue";
export default {
  components: {
    setParams,
  },
  data() {
    return {
      topActive: 1,
      open1: false,
      open2: false,
      open3: false,
      open4: false,
      model1: false,
      model2: false,
      model3: false,
      model4: false,
      model4Sel: 0,
      model5: false,
      timer: null,
      indexs: 2,
      data53: "",
      inputData: {},
      loading: null,
    };
  },
  watch: {
    "$store.state.equipmentIndex": function (newValue, oldValue) {
      const that = this;
      this.loading = this.$loading({
        lock: true,
        text: this.$t("message.loading"),
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        that.dataInit();
      }, 0);
    },
    $route(newVal, oldVal) {
      const that = this;
      this.indexs = this.$route.query.id ? this.$route.query.id : 1;
      this.loading = this.$loading({
        lock: true,
        text: this.$t("message.loading"),
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        that.dataInit();
      }, 0);
    },
  },
  mounted() {
    const that = this;
    this.indexs = this.$route.query.id ? this.$route.query.id : 1;
    this.loading = this.$loading({
      lock: true,
      text: this.$t("message.loading"),
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    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: {
    countData10(data) {
      if (data) {
        return data / 10;
      } else {
        return 0;
      }
    },
    changeData10(code, el) {
      var data = el.target.value * 10;
      var sendData = {
        target: {
          value: data,
        },
      };
      this.change(code, sendData);
    },
    handleCommand(command) {
      if (command == "1") {
        this.model1 = true;
      } else if (command == "2") {
        this.model2 = true;
      } else if (command == "3") {
        this.model5 = true;
      } else if (command == "4") {
        this.model3 = true;
      } else if (command == "5") {
        this.model4 = true;
      }
      this.inputData[10 + (this.indexs - 1) + "53"] = command;
      this.get53data(command);
      var data53 = {
        target: {
          value: this.inputData[10 + (this.indexs - 1) + "53"],
        },
      };
      this.changeBtn(10 + (this.indexs - 1) + "53", data53);
    },
    get53data(index) {
      var data = index;
      var text53 = "";
      if (data == "1") {
        text53 = this.$t("irrigateSetSoil.fertilizerMode.timePoint");
      } else if (data == "2") {
        text53 = this.$t("irrigateSetSoil.fertilizerMode.timeRange");
      } else if (data == "3") {
        text53 = this.$t("irrigateSetSoil.fertilizerMode.soilSensor");
      } else if (data == "4") {
        text53 = this.$t("irrigateSetSoil.fertilizerMode.lightSensor");
      } else if (data == "5") {
        text53 = this.$t("irrigateSetSoil.fertilizerMode.externalSignal");
      }
      this.data53 = text53;
    },
    change00(index) {
      this.topActive = index;
      var list = ["0", "0", "0"];
      if (index == 1) {
        list[0] = "1";
      } else {
        list[0] = "0";
      }
      if (index == 2) {
        list[1] = "1";
      } else {
        list[1] = "0";
      }
      if (index == 3) {
        list[2] = "1";
      } else {
        list[2] = "0";
      }
      var num = list.join("");
      var dataNum = {
        target: {
          value: parseInt(num, 2),
        },
      };
      this.changeBtn(10 + (this.indexs - 1) + "00", dataNum);
    },
    padString(str, length) {
      return str.padStart(length, "0");
    },
    getType00() {
      var num =this.inputData[10 + (this.indexs - 1) + "00"]?this.inputData[10 + (this.indexs - 1) + "00"]:0
      var number = this.padString(num.toString(2),3);

      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;
      }
      console.log(this.topActive, 11);
    },
    change59() {
      var list = ["0", "0", "0", "0"];
      if (this.open1) {
        list[3] = "1";
      } else {
        list[3] = "0";
      }
      if (this.open2) {
        list[2] = "1";
      } else {
        list[2] = "0";
      }
      if (this.open3) {
        list[1] = "1";
      } else {
        list[1] = "0";
      }
      if (this.open4) {
        list[0] = "1";
      } else {
        list[0] = "0";
      }
      var num = list.join("");
      var dataNum = {
        target: {
          value: parseInt(num, 2),
        },
      };
      this.changeBtn(10 + (this.indexs - 1) + "59", dataNum);
    },
    getType() {
      var num = this.inputData[10 + (this.indexs - 1) + "59"]?this.inputData[10 + (this.indexs - 1) + "59"]:0
      var number = this.padString(num.toString(2),4);
      console.log(number);
      if (Number(number[3])) {
        this.open1 = true;
      } else {
        this.open1 = false;
      }
      if (Number(number[2])) {
        this.open2 = true;
      } else {
        this.open2 = false;
      }

      if (Number(number[1])) {
        this.open3 = true;
      } else {
        this.open3 = false;
      }

      if (Number(number[0])) {
        this.open4 = true;
      } else {
        this.open4 = false;
      }
    },
    dataInit() {
      var indexs = this.indexs;
      var store = this.$store.state;
      var data = {
        equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
        pattern: 10 + (this.indexs - 1) + "00", //需要根据文档填写 //6目标ph-数值
        regNum: 76,
      };
      this.api.postReg(data).then((res) => {
        this.loading.close();
        if (res.data.code == 200) {
          this.inputData = res.data.data;
          this.getType();
          this.getType00();
          this.get53data(this.inputData[10 + (this.indexs - 1) + "53"]);
          this.inputData[10 + (indexs - 1) + "01"] = this.countData10(
            this.inputData[10 + (indexs - 1) + "01"]
          );
          this.inputData[10 + (indexs - 1) + "06"] = this.countData10(
            this.inputData[10 + (indexs - 1) + "06"]
          );
          this.inputData[10 + (indexs - 1) + "17"] = this.countData10(
            this.inputData[10 + (indexs - 1) + "17"]
          );
          this.inputData[10 + (indexs - 1) + "39"] = this.countData10(
            this.inputData[10 + (indexs - 1) + "39"]
          );
          this.inputData[10 + (indexs - 1) + "40"] = this.countData10(
            this.inputData[10 + (indexs - 1) + "40"]
          );
          this.inputData[10 + (indexs - 1) + "43"] = this.countData10(
            this.inputData[10 + (indexs - 1) + "43"]
          );
          this.inputData[10 + (indexs - 1) + "44"] = this.countData10(
            this.inputData[10 + (indexs - 1) + "44"]
          );
          this.model4Sel = this.inputData[10 + (indexs - 1) + "71"];
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //全选文本
    selectValue(e) {
      var store = this.$store.state;
      store.nowInput = e.target.value;
      e.currentTarget.select();
    },
    //失去焦点
    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);
      // }
    },
    //失去焦点
    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);
      // }
    },
    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);
    },
    changeModel4() {},
    //间隔灌溉天数
    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;
      });
    },
    handleClose1(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    handleClose2(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    handleClose3(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    handleClose4(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    handleClose5(done) {},
  },
};
</script>
<style lang="scss"></style>