<template>
  <div class="formula irrigateSet">
    <set-params></set-params>
    <div class="page-content">
      <div class="table-title">
        <img src="../../assets/image/irrigateSet.png" alt="" />
        {{ indexs }}#灌溉组配置
        <div class="tips">种植作物1</div>
      </div>
      <div class="flex-view">
        <div class="input-btn">
          <span>控制模式选择</span>
          <div class="btn" @click="change00(1)" :class="topActive==1?'green':'blue'">
            <img src="../../assets/image/irrigateSet1.png" alt="" />停止
          </div>
          <div class="btn" @click="change00(2)" :class="topActive==2?'green':'blue'">
            <img src="../../assets/image/irrigateSet3.png" alt="" />手动启动
          </div>
          <div class="btn" @click="change00(3)" :class="topActive==3?'green':'blue'">
            <img src="../../assets/image/irrigateSet2.png" alt="" />自动
          </div>
   
      
         
         
        </div>
        <div class="input-main">
          <span>手动启动时间</span>
          <input @blur="blurChange(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-80">
          <span>自动运行起始日期</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>年</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>月</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>日</span>
        </div>
        <div class="input-main-80">
          <span>间隔灌溉天数</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-80">
          <span>灌溉</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>次清水，间隔灌溉</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>次施肥。</span>
        </div>
      </div>
      <div class="flex-view">
        <div class="input-main-80">
          <span>施肥时采用</span>
          <input @blur="blurChange(10 + (indexs - 1) + '53', $event)"
            v-model="inputData[10 + (indexs - 1) + '58']"
            @input="change(10 + (indexs - 1) + '58', $event)"
            type="number"
            placeholder="0"
          />
          <span>号配方。</span>
        </div>
      </div>
      <div class="flex-view">
        <div class="input-main-80">
          <span>电磁阀控制通道</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"
          />
        </div>
        <!-- <div class="btn green">
          <img src="../../assets/image/rotate.png" alt="" />轮模式启用
        </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=""
          />
          灌溉清水时不启动施肥机
        </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=""
          />
          灌凝结束时，清空混液罐
        </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=""
          />
          轮灌模式
        </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=""
          />
          灌深清水时不启动进水泵
        </div>
      </div>
      <div class="input-view">
        <div class="input-sel">
          <span>施肥机自动运行模式选择</span>
          <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link">
              <input
                type="text"
                disabled
                value="选择设定弹窗"
                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">预定时间点启动</el-dropdown-item>
              <el-dropdown-item command="2">预定时间段启动</el-dropdown-item>
              <el-dropdown-item command="3">依据土壤传感器</el-dropdown-item>
              <el-dropdown-item command="4">依据光照传感器</el-dropdown-item>
              <el-dropdown-item command="5">依据外控信号</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <el-dialog
      :modal-append-to-body="false"
      :show-close="false"
      :close-on-click-modal="true"
      :visible.sync="model1"
      width="440px"
      :before-close="handleClose1"
    >
      <div class="page-title title-302">1#灌溉组控制参数配置</div>
      <div class="model1-top">
        <div class="btn blue" >
          <img src="../../assets/image/play.png" alt="" />时间点启动
        </div>
        <div class="input-main-80">
          <span>每次灌溉时长</span>
          <input @blur="blurChange(10 + (indexs - 1) + '06', $event)"
            v-model="inputData[10 + (indexs - 1) + '06']"
            @input="changeData10(10 + (indexs - 1) + '06', $event)"
            type="number"
            placeholder="0"
          />
          <span>分</span>
        </div>
      </div>
      <div class="model1-bottom">
        <div class="title">启动时间点</div>
        <div class="model1-content">
          <div>
            <div class="number">1</div>
            <div class="input-main-80">
              <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-80">
              <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-80">
              <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-80">
              <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-80">
              <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 class="model-return">
        <div @click="model1 = false" class="btn green">
          <img src="../../assets/image/return.png" alt="" />返回
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :modal-append-to-body="false"
      :show-close="false"
      :close-on-click-modal="true"
      :visible.sync="model2"
      width="760px"
      :before-close="handleClose2"
    >
      <div class="page-title title-302">1#灌溉组控制参数配置</div>
      <div class="model1-top model2-top">
        <div class="btn blue">
          <img src="../../assets/image/play.png" alt="" />间隔启动
        </div>
        <div class="input-main-80">
          <span>每次灌溉时长</span>
          <input @blur="blurChange(10 + (indexs - 1) + '17', $event)"
            v-model="inputData[10 + (indexs - 1) + '17']"
            @input="changeData10(10 + (indexs - 1) + '17', $event)"
            type="number"
            placeholder="0"
          />
          <span>分</span>
        </div>
      </div>
      <div class="model1-bottom">
        <div class="title">启动时间点</div>
        <div class="model1-content">
          <div>
            <div class="number">1</div>
            <div class="input-main-80">
              <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">时间段里启动次数</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-80">
              <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">时间段里启动次数</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-80">
              <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">时间段里启动次数</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 class="model-return">
        <div @click="model2 = false" class="btn green">
          <img src="../../assets/image/return.png" alt="" />返回
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :modal-append-to-body="false"
      :show-close="false"
      :close-on-click-modal="true"
      :visible.sync="model3"
      width="760px"
      :before-close="handleClose3"
    >
      <div class="page-title title-302">1#灌溉组控制参数配置</div>
      <div class="model1-top model3-top">
        <div class="btn blue">
          <img src="../../assets/image/model3-icon.png" alt="" />光积累启动
        </div>
        <div class="input-main-80">
          <span>有效检测时间段</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="model1-content model3-content">
          <div class="input-main-80">
            <span class="text">启动时灌湛时长</span>
            <input @blur="blurChange(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">分</span>
          </div>
          <div class="input-main-80">
            <span class="text">光积累启动值</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-80">
            <span class="text">最小光照值</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 class="input-main-80">
            <span class="text" style="padding-left: 20px">最短灌溉间隔</span>
            <input @blur="blurChange(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-80">
            <span class="text">最长灌溉间隔</span>
            <input @blur="blurChange(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 class="model-return">
        <div @click="model3 = false" class="btn green">
          <img src="../../assets/image/return.png" alt="" />返回
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :modal-append-to-body="false"
      :show-close="false"
      :close-on-click-modal="true"
      :visible.sync="model5"
      width="760px"
      :before-close="handleClose5"
    >
      <div class="page-title title-302">1#灌溉组控制参数配置</div>
      <div class="model1-top model3-top">
        <div class="btn blue">
          <img src="../../assets/image/model3-icon.png" alt="" />土壤传感器
        </div>
        <div class="input-main-80">
          <span>有效检测时间段</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="model1-content model3-content">
          <div class="input-main-80">
            <span class="text">最低土壤湿度</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-80">
            <span class="text">最高土壤湿度</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-80">
            <span class="text">灌溉时长上限</span>
            <input @blur="blurChange(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">分</span>
          </div>
        </div>
      </div>
      <div class="model-return">
        <div @click="model5 = false" class="btn green">
          <img src="../../assets/image/return.png" alt="" />返回
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :modal-append-to-body="false"
      :show-close="false"
      :close-on-click-modal="true"
      :visible.sync="model4"
      width="460px"
      :before-close="handleClose4"
    >
      <div class="page-title title-302">1#灌溉组控制参数配置</div>
      <div class="model1-top model4-top">
        <div class="btn blue" @click="model4 = true">
          <img src="../../assets/image/model4-icon.png" alt="" />外控模式
        </div>
        <div class="model-right">
          <div>
            <div class="number">1</div>
            <div class="input-main-80">
              <span>外部输入通道</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-80">
              <span>外部输入通道</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="model-return">
        <div @click="model4 = false" class="btn green">
          <img src="../../assets/image/return.png" alt="" />返回
        </div>
      </div>
    </el-dialog>
  </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,
      model5: false,
      timer: null,
      indexs: 2,
      data53: "",
      inputData: {},
    };
  },
  watch: {
    $route(newVal, oldVal) {
      const that = this;
      this.indexs = this.$route.query.id ? this.$route.query.id : 1;
      setTimeout(() => {
        that.dataInit();
      }, 0);
    },
  },
  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: {
    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.change(10 + (this.indexs - 1) + "53", data53);
    },
    get53data(index) {
      var data = index;
      var text53 = "";
      if (data == "1") {
        text53 = "定时启动";
      } else if (data == "2") {
        text53 = "间隔启动";
      } else if (data == "3") {
        text53 = "土壤传感器启动";
      } else if (data == "4") {
        text53 = "光积累启动";
      } else if (data == "5") {
        text53 = "外控启动";
      }
      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.change(10 + (this.indexs - 1) + "00", dataNum);
    },
    padString(str, length) {
            return str.padStart(length, '0');
        },
    getType00() {
      var number =this.padString( this.inputData[10 + (this.indexs - 1) + "00"].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
      }
    },
    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.change(10 + (this.indexs - 1) + "59", dataNum);
    },
    getType() {
      var number =this.padString( this.inputData[10 + (this.indexs - 1) + "59"].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: 61,
      };
      this.api.postReg(data).then((res) => {
        console.log(res, 11);
        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'])
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //全选文本
selectValue(e) {
	e.currentTarget.select();
},
  //失去焦点
    blurChange(code, el) {
      var store=this.$store.state
      var data = {
        equipmentId: store.equipmentList[store.equipmentIndex-1].deviceId,
        regAddress: code,
        num: el.target.value,
      }; //避免开启多个计时器
     if(this.timer){
        this.timer && clearInterval(this.timer);
      this.changeData(data);
     }
     
    },
    //间隔灌溉天数
    change(code, el) {
      var store=this.$store.state
      var data = {
        equipmentId: store.equipmentList[store.equipmentIndex-1].deviceId,
        regAddress: code,
        num: el.target.value,
      };
      this.delayTimer(0, data);
    },
    //限制 写入停止后j*100毫秒调取函数
    delayTimer(i, data) {
      const that = this;
      //整体接口
      let j = this.$store.state.lateSend;
      //避免开启多个计时器
      this.timer && clearInterval(this.timer);

      this.timer = setInterval(() => {
        ++i;
        if (i == j) {
          that.changeData(data);
          clearInterval(this.timer);
        }
      }, 100);
    },
    changeData(data) {
      this.api.postWriteFs(data).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.dataInit();
        } else {
          this.$message.error("请求出错");
        }
        this.timer=null
      });
    },
    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>
    