<template>
  <view>
    <view class="link_home">
      <scroll-view :scroll-y="isScroll" :style="{ height: '100%' }">
        <nut-config-provider :theme-vars="themeVars">
          <view class="body">
            <nut-row>
              <view v-if="linkList.length > 0">
                <nut-col
                  :span="24"
                  :style="{ marginBottom: '10px' }"
                  v-for="(item, index) in linkList"
                  :key="item.id"
                >
                  <nut-cell class="link_body">
                    <nut-row>
                      <nut-col :span="24" class="view_f_between">
                        <view class="title">{{ item.name }}</view>
                        <view class="t_desc" @click="remove(item.name, item.id)"
                          >删除</view
                        >
                      </nut-col>
                      <nut-col :span="24">
                        <nut-cell-group>
                          <nut-cell title="开关选择" is-link @click="update(item)">
                            <template #desc>
                              <text
                                class="desc"
                                :style="{
                                  width: '200px',
                                  overflow: 'hidden',
                                  textOverflow: 'ellipsis',
                                  whiteSpace: 'nowrap',
                                }"
                                >{{ item.switchName }}</text
                              >
                            </template>
                          </nut-cell>
                          <nut-cell>
                            <nut-row>
                              <nut-col :span="13" class="nut-cell__title">
                                溶解氧上限
                              </nut-col>
                              <nut-col :span="11" class="view_f_between_end">
                                <view
                                  :style="{ marginRight: '15rpx' }"
                                  @click="upOxyU(item)"
                                >
                                  <Edit size="12" />
                                </view>
                                <view
                                  class="rjy"
                                  :style="{ marginRight: '15rpx' }"
                                  @click="upOxyU(item)"
                                >
                                  {{ item.oxyUpperValue ? item.oxyUpperValue : "-" }}Mg/L
                                </view>
                                <view>
                                  <nut-switch
                                    v-model="item.oxyUpperOpen"
                                    active-color="#04D98A"
                                    @change="(value, event) => setUpSwitch({ value, event }, item)"
                                  />
                                </view>
                              </nut-col>
                            </nut-row>
                          </nut-cell>
                          <nut-cell>
                            <nut-row>
                              <nut-col :span="13" class="nut-cell__title">
                                溶解氧下限
                              </nut-col>
                              <nut-col :span="11" class="view_f_between_end">
                                <view
                                  :style="{ marginRight: '15rpx' }"
                                  @click="upOxyD(item)"
                                >
                                  <Edit size="12" />
                                </view>
                                <view
                                  class="rjy"
                                  :style="{ marginRight: '15rpx' }"
                                  @click="upOxyD(item)"
                                >
                                  {{ item.oxyLowerValue ? item.oxyLowerValue : "-" }}Mg/L
                                </view>
                                <view>
                                  <nut-switch
                                    v-model="item.oxyLowerOpen"
                                    active-color="#04D98A"
                                    @change="(value, event) => setLoSwitch({ value, event }, item)"
                                  />
                                </view>
                              </nut-col>
                            </nut-row>
                          </nut-cell>
                        </nut-cell-group>
                      </nut-col>
                      <!-- <nut-col :span="24">
                        <nut-button
                          block
                          shape="square"
                          type="warning"
                          size="large"
                          class="f_weight"
                          :style="{
                            fontSize: '32rpx !important',
                            borderRadius: '10px',
                          }"
                          @click="update(item)"
                          >编辑</nut-button
                        >
                      </nut-col> -->
                    </nut-row>
                  </nut-cell>
                </nut-col>
              </view>
              <view v-else>
                <nut-cell>
                  <nut-col :span="24">
                    <nut-empty description="请新增联动控制">
                      <template #image>
                        <img :src="pond404" />
                      </template>
                    </nut-empty>
                  </nut-col>
                </nut-cell>
              </view>
              <nut-col :span="24" :style="{ marginBottom: '20%' }">
                <view class="d_desc">
                  1.当塘口溶解氧低于设置的溶解氧下限时，自动开启该塘口内选择的增氧机。
                </view>
                <view class="d_desc" :style="{ marginTop: '10px', marginBottom: '10px' }">
                  2.若同一个塘口有多个鱼测云测氧仪，则以其中最低测量值作为溶解氧是否到达上下限的判断标准。
                </view>
              </nut-col>
            </nut-row>
          </view>
        </nut-config-provider>
      </scroll-view>
      <view class="btn" v-if="linkList.length < 3">
        <nut-row>
          <nut-col :span="24" :style="{ padding: '20rpx' }">
            <nut-button
              block
              shape="square"
              type="primary"
              size="large"
              :style="{
                fontWeight: 'bold',
                fontSize: '38rpx !important',
                borderRadius: '10px',
              }"
              @click="addLinks2"
              >新增联动控制</nut-button
            >
          </nut-col>
        </nut-row>
      </view>
      <nut-config-provider :theme-vars="themeVars2">
        <!-- 添加 -->
        <nut-dialog v-model:visible="linkInfoShow" text-align="left" no-footer>
          <view class="d_body" :style="{ paddingBottom: '0px' }">
            <nut-row>
              <nut-col :span="24">
                <view class="d_title">联动控制</view>
              </nut-col>
              <!-- <nut-col :span="24" class="view_f">
                <view :style="{ width: '40%' }" class="font_32 c_444">溶解氧上限</view>
                <view :style="{ width: '60%' }">
                  <nut-input
                    type="digit"
                    @blur="upOxyValue"
                    v-model="params.oxyWarnUpper"
                    placeholder="范围1~20"
                    :border="false"
                    input-align="right"
                    max-length="5"
                    clearable
                    :cursor="String(params.oxyWarnUpper).length"
                  >
                    <template #right>
                      <text class="c_222">Mg/L</text>
                    </template>
                  </nut-input>
                </view>
              </nut-col>
              <nut-col :span="24" class="view_f">
                <view :style="{ width: '40%' }" class="font_32 c_444">溶解氧下限</view>
                <view :style="{ width: '60%' }">
                  <nut-input
                    type="digit"
                    @blur="upOxyValue"
                    v-model="params.oxyWarnLower"
                    :cursor="String(params.oxyWarnLower).length"
                    placeholder="范围1~20"
                    :border="false"
                    input-align="right"
                    max-length="5"
                    clearable
                  >
                    <template #right>
                      <text class="c_222">Mg/L</text>
                    </template>
                  </nut-input>
                </view>
              </nut-col> -->
              <nut-col :span="24">
                <nut-divider class="divider" />
              </nut-col>
              <nut-col :span="24">
                <view class="font_32 c_222 f_weight">开关选择</view>
              </nut-col>
              <nut-col :span="24">
                <next-tree
                  ref="qiantree"
                  :selectParent="false"
                  labelKey="deviceName"
                  valueKey="id"
                  :multiple="true"
                  :treeData="switchList"
                  @confirm="onconfirm"
                  childrenKey="listSwitch"
                  border
                  @cancel="oncancel"
                  height="300rpx"
                  showChild
                />
              </nut-col>
            </nut-row>
          </view>
        </nut-dialog>
        <!-- 编辑 -->
        <nut-dialog v-model:visible="uplinkInfoShow" text-align="left" no-footer>
          <view class="d_body" :style="{ paddingBottom: '0px' }">
            <nut-row>
              <nut-col :span="24">
                <view class="d_title">联动控制</view>
              </nut-col>
              <!-- <nut-col :span="24" class="view_f">
                <view :style="{ width: '40%' }" class="font_32 c_444">溶解氧上限</view>
                <view :style="{ width: '60%' }">
                  <nut-input
                    type="digit"
                    @blur="upOxyValue"
                    @focus="onfocus"
                    v-model="params.oxyWarnUpper"
                    placeholder="范围1~10"
                    :border="false"
                    input-align="right"
                    max-length="5"
                    clearable
                    :cursor="String(params.oxyWarnUpper).length"
                  >
                    <template #right>
                      <text class="c_222">Mg/L</text>
                    </template>
                  </nut-input>
                </view>
              </nut-col>
              <nut-col :span="24" class="view_f">
                <view :style="{ width: '40%' }" class="font_32 c_444">溶解氧下限</view>
                <view :style="{ width: '60%' }">
                  <nut-input
                    type="digit"
                    @blur="upOxyValue"
                    @focus="onfocus"
                    v-model="params.oxyWarnLower"
                    :cursor="String(params.oxyWarnLower).length"
                    placeholder="范围1~10"
                    :border="false"
                    input-align="right"
                    max-length="5"
                    clearable
                  >
                    <template #right>
                      <text class="c_222">Mg/L</text>
                    </template>
                  </nut-input>
                </view>
              </nut-col> -->
              <nut-col :span="24">
                <nut-divider class="divider" />
              </nut-col>
              <nut-col :span="24">
                <view class="font_32 c_222 f_weight">开关选择</view>
              </nut-col>
              <nut-col :span="24">
                <next-tree
                  ref="qiantree"
                  :selectParent="false"
                  labelKey="deviceName"
                  valueKey="id"
                  :multiple="true"
                  :treeData="switchList"
                  @confirm="onconfirmUp"
                  childrenKey="listSwitch"
                  border
                  @cancel="oncancelUp"
                  height="300rpx"
                  showChild
                />
              </nut-col>
            </nut-row>
          </view>
        </nut-dialog>
        <!-- 风险提示 -->
        <nut-dialog v-model:visible="openAlert" text-align="left" no-footer>
          <view class="d_body" :style="{ paddingBottom: '0px' }">
            <nut-row>
              <nut-col :span="24">
                <view class="d_title" :style="{ textAlign: 'center' }">风险提示</view>
              </nut-col>
              <nut-col :span="24">
                <nut-divider class="divider" />
              </nut-col>
              <nut-col :span="24" class="font_30 c_666">
                若打开此开关，当监测到的溶解氧高于设置的{{
                  switchParams.openType == 1 ? "上限" : "下限"
                }}时，将自动关闭所选择的增氧机开关。
              </nut-col>
              <nut-col :span="24" class="font_30 c_E22323 m_t_20">
                此操作存在较大生产安全风险，请务必知晓并谨慎操作!!!请确认是否打开?
              </nut-col>
            </nut-row>
          </view>
          <view class="d_btn">
            <nut-row>
              <nut-col
                :span="12"
                :style="{ border: '1px solid #eee', color: '#222' }"
                @click="setSwitchOpenNone"
              >
                取消
              </nut-col>
              <nut-col
                :span="12"
                :style="{ border: '1px solid #eee', color: '#15BBC5' }"
                @click="setSwitchOpenOk"
              >
                确定
              </nut-col>
            </nut-row>
          </view>
        </nut-dialog>
        <!-- 溶解氧上限设置 -->
        <nut-dialog v-model:visible="openOxyU" text-align="left" no-footer>
          <view :style="{ height: '100%' }">
            <view class="d_body">
              <nut-row>
                <nut-col :span="24">
                  <view class="d_title">溶解氧上限设置</view>
                </nut-col>
                <nut-col :span="24">
                  <nut-divider class="divider" />
                </nut-col>
                <nut-col :span="24" class="view_f">
                  <view :style="{ width: '40%' }" class="font_32 c_444">上限</view>
                  <view :style="{ width: '60%' }">
                    <nut-input
                      type="digit"
                      v-model="oxyU"
                      @blur="upOxyValue"
                      @focus="onfocus"
                      :border="false"
                      input-align="right"
                      clearable
                      max-length="5"
                      placeholder="范围1~20"
                      :cursor="String(oxyU).length"
                    >
                      <template #right> Mg/L </template>
                    </nut-input>
                  </view>
                </nut-col>
                <nut-col :span="24">
                  <nut-divider class="divider" />
                </nut-col>
              </nut-row>
            </view>
            <view class="d_btn">
              <nut-row>
                <nut-col
                  :span="12"
                  :style="{ border: '1px solid #eee', color: '#222' }"
                  @click="openOxyU = false"
                >
                  取消
                </nut-col>
                <nut-col
                  :span="12"
                  :style="{ border: '1px solid #eee', color: '#15BBC5' }"
                  @click="setOxyEventU"
                >
                  确定
                </nut-col>
              </nut-row>
            </view>
          </view>
        </nut-dialog>
        <!-- 溶解氧下限设置 -->
        <nut-dialog v-model:visible="openOxyD" text-align="left" no-footer>
          <view :style="{ height: '100%' }">
            <view class="d_body">
              <nut-row>
                <nut-col :span="24">
                  <view class="d_title">溶解氧下限设置</view>
                </nut-col>
                <nut-col :span="24">
                  <nut-divider class="divider" />
                </nut-col>
                <nut-col :span="24" class="view_f">
                  <view :style="{ width: '40%' }" class="font_32 c_444">下限</view>
                  <view :style="{ width: '60%' }">
                    <nut-input
                      type="digit"
                      v-model="oxyD"
                      @blur="upOxyValue"
                      @focus="onfocus"
                      :border="false"
                      input-align="right"
                      clearable
                      max-length="5"
                      placeholder="范围1~20"
                      :cursor="String(oxyD).length"
                    >
                      <template #right> Mg/L </template>
                    </nut-input>
                  </view>
                </nut-col>
                <nut-col :span="24">
                  <nut-divider class="divider" />
                </nut-col>
              </nut-row>
            </view>
            <view class="d_btn">
              <nut-row>
                <nut-col
                  :span="12"
                  :style="{ border: '1px solid #eee', color: '#222' }"
                  @click="openOxyD = false"
                >
                  取消
                </nut-col>
                <nut-col
                  :span="12"
                  :style="{ border: '1px solid #eee', color: '#15BBC5' }"
                  @click="setOxyEventD"
                >
                  确定
                </nut-col>
              </nut-row>
            </view>
          </view>
        </nut-dialog>
      </nut-config-provider>
    </view>
    <!-- 弹出层提示 -->
    <nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" />
  </view>
</template>
<script setup lang="ts">
import Taro from "@tarojs/taro";
import {
  linkerCtrlList,
  pondSwitchList,
  addLinkerCtrl,
  updateLinkerCtrl,
  delLinkerCtrl,
  setLinkOpen,
} from "@/api/device";
import { stateType } from "@/utils/types";
import nextTree from "@/components/tree/index";
import { imgUrl } from "@/utils/imgUrl";
import { IconFont, Edit } from "@nutui/icons-vue-taro";
definePageConfig({
  navigationBarTitleText: "联动控制",
});
const pond404 = `${imgUrl}zanwurenwu.png`;
const instance = Taro.getCurrentInstance();
const id = instance.router.params.id;
const pondId = instance.router.params.pondId;
// const pondId = 12;
const themeVars = ref({
  cellBorderRadius: "4px",
  cellBoxShadow: "0px",
  cellPadding: "26rpx 0px",
});
const themeVars2 = ref({
  cellBoxShadow: "0px 0px 0px 0px",
  cellPadding: "0",
  cellColor: "#666666",
  cellTitleFont: "32rpx",
  cellTitleDescFont: "30rpx",
  cellDescFont: "30rpx",
  cellDescColor: "#222222",
  popupBorderRadius: "10rpx",
  checkboxLabelFontSize: "30rpx",
});
// 联动控制列表
const linkList = ref<any[]>([]);
// 开关列表
const switchList = ref<any[]>([]);
const openAlert = ref<boolean>(false);
const linkInfoShow = ref<boolean>(false);
const uplinkInfoShow = ref<boolean>(false);
const params = ref({
  id: undefined,
  deviceId: id,
  // oxyWarnUpper: 20,
  // oxyWarnLower: null,
  listSwitchId: [],
});
const state: stateType = reactive({
  msg: "",
  type: "text",
  center: true,
  show: false,
});
const switchParams = ref({
  id: undefined,
  openType: 1,
  isOpen: false,
});
const isScroll = ref(true);
const openOxyU = ref(false);
const openOxyD = ref(false);
const oxyU = ref(null);
const oxyD = ref(null);
const linkInfo = ref();
/** method satrt------------------- */
Taro.useDidShow(() => {
  // 默认
  getLinksList();
});
// 查询联动控制
function getLinksList() {
  linkerCtrlList({ id }).then((res) => {
    console.log('完整返回数据:', JSON.stringify(res, null, 2));
    if (res.code == 200) {
      if (res.data) {
        res.data.forEach((item, index) => {
          console.log(`联动控制${index + 1}完整数据:`, JSON.stringify(item, null, 2));
          item.name = "联动控制" + (index + 1);
          // 调试：查看原始数据
          console.log('原始数据:', item.oxyUpperOpen, item.oxyLowerOpen, typeof item.oxyUpperOpen);
          // 将后端返回的 0/1 转换为布尔类型 - 强制设置为 true 或 false
          item.oxyUpperOpen = item.oxyUpperOpen === 1 ? true : false;
          item.oxyLowerOpen = item.oxyLowerOpen === 1 ? true : false;
          console.log('转换后:', item.oxyUpperOpen, item.oxyLowerOpen, typeof item.oxyUpperOpen);
          const switchName: any = [];
          if (item.listSwitch && item.listSwitch.length > 0) {
            item.listSwitch.forEach((r: any) => {
              switchName.push(r.switchName);
            });
          }
          item.switchName = switchName.join(",");
        });
      }
      linkList.value = res.data || [];
      console.log('最终linkList:', JSON.stringify(linkList.value, null, 2));
    }
  });
}
// 开关列表
function getSwitchList(type = undefined,id=undefined) {
  pondSwitchList({ id: pondId }).then((res) => {
    if (res.code == 200) {
      if (res.data.length > 0) {
        res.data.forEach((r) => {
          if (r.deviceType == 2) {
            r.id = undefined;
          }
          if (r.listSwitch.length > 0) {
            r.listSwitch.forEach((rr: any) => {
              rr.checked = false;
              rr.disabled = false;
              // 判断选中的开关
              if (type == 1) {
                if (params.value.listSwitchId.includes(rr.id)) {
                  rr.checked = true;
                }
              }
              if(rr.linkedCtrlId!=0){
                if(rr.id!=r.id){
                  if(rr.linkedCtrlId==id){
                    rr.disabled = false;
                    rr.checked = true;
                  }else{
                    rr.disabled = true;
                  }
                }else{
                  rr.checked = true;
                }
              }
              rr.deviceName =
                rr.switchName.split(r.deviceName).length > 0 &&
                rr.switchName.split(r.deviceName)[1]
                  ? rr.switchName.split(r.deviceName)[1]
                  : rr.switchName;
            });
          }
        });
        switchList.value = res.data;
        if (switchList.value.length > 0) {
          if (type == 1) {
            uplinkInfoShow.value = true;
          } else {
            linkInfoShow.value = true;
          }
        } else {
          if (type == 1) {
            uplinkInfoShow.value = true;
          } else {
            linkInfoShow.value = true;
          }
          state.show = true;
          state.msg = "塘口内未绑定开关设备";
          return;
        }
      } else {
        state.show = true;
        state.msg = "暂无开关，请前往绑定";
      }
    }
  });
}
// 新增联动控制弹框
function addLinks2() {
  rest();
  getSwitchList();
}
/** 删除 */
function remove(name, id) {
  // 确定提示框
  Taro.showModal({
    title: "提示",
    content: `确认删除 ${name}？`,
    success: function (res) {
      if (res.confirm) {
        delLinkerCtrl({ id }).then((res) => {
          if (res.code == 200) {
            state.show = true;
            state.msg = "删除成功";
            getLinksList();
          }
        });
      } else if (res.cancel) {
      }
    },
  });
}
// 验证输入框内容
function upOxyValue() {
  isScroll.value = false;
}
// 确定保存
function addHandler() {
  // const u =
  //   params.value.oxyWarnUpper != null &&
  //   params.value.oxyWarnUpper != undefined &&
  //   params.value.oxyWarnUpper != ""
  //     ? Number(params.value.oxyWarnUpper)
  //     : null;
  // const l =
  //   params.value.oxyWarnLower != null &&
  //   params.value.oxyWarnLower != undefined &&
  //   params.value.oxyWarnLower != ""
  //     ? Number(params.value.oxyWarnLower)
  //     : null;
  // if (u == null || u == undefined || u == "") {
  //   state.show = true;
  //   state.msg = "请输入溶解氧上限";
  //   return;
  // }
  // if (l == null || l == undefined || l == "") {
  //   state.show = true;
  //   state.msg = "请输入溶解氧下限";
  //   return;
  // }
  // if (u && (Number(u) < 1 || Number(u) > 20)) {
  //   state.show = true;
  //   state.msg = "溶解氧上限范围1~20";
  //   return;
  // }
  // if (l && (Number(l) < 1 || Number(l) > 20)) {
  //   state.show = true;
  //   state.msg = "溶解氧下限范围1~20";
  //   return;
  // }
  // if (!u && !l) {
  //   state.show = true;
  //   state.msg = "请设置一个溶解氧上限或下限";
  //   return;
  // }
  // if (u && l) {
  //   if (Number(u) <= Number(l)) {
  //     state.show = true;
  //     state.msg = "溶解氧上限必须大于下限，且差值不能小于1Mg/L";
  //     return;
  //   } else {
  //     const c = Number(u) - Number(l);
  //     if (c < 1) {
  //       state.show = true;
  //       state.msg = "溶解氧上限必须大于下限，且差值不能小于1Mg/L";
  //       return;
  //     }
  //   }
  // }
  if (params.value.listSwitchId.length <= 0) {
    state.show = true;
    state.msg = "请选择开关";
    return;
  }
  if (params.value.id) {
    updateLinkerCtrl(params.value)
      .then((res) => {
        if (res.code == 200) {
          state.show = true;
          state.msg = "编辑成功";
          getLinksList();
          return;
        }
      })
      .finally(() => {
        oncancelUp();
      });
  } else {
    addLinkerCtrl(params.value)
      .then((res) => {
        if (res.code == 200) {
          state.show = true;
          state.msg = "添加成功";
          getLinksList();
          return;
        }
      })
      .finally(() => {
        oncancel();
      });
  }
}
function rest() {
  params.value.id = undefined;
  params.value.deviceId = id;
  params.value.oxyWarnUpper = 20;
  params.value.oxyWarnLower = null;
  params.value.listSwitchId = [];
}
function onconfirm(rows) {
  if (rows.list.length > 0) {
    const ids: any = [];
    rows.list.forEach((res) => {
      ids.push(res.source.id);
    });
    params.value.listSwitchId = ids;
    addHandler();
  } else {
    state.show = true;
    state.msg = "请选择开关";
    return;
  }
}
// 取消
function oncancel() {
  rest();
  linkInfoShow.value = false;
}
// 编辑
function update(item) {
  params.value.id = item.id;
  params.value.deviceId = item.deviceId;
  params.value.oxyWarnUpper = item.oxyUpperValue;
  params.value.oxyWarnLower = item.oxyLowerValue;
  const ids: number[] = [];
  if (item.listSwitch && item.listSwitch.length > 0) {
    item.listSwitch.forEach((res: any) => {
      ids.push(res.id);
    });
  }
  params.value.listSwitchId = ids;
  getSwitchList(1,item.id);
  // uplinkInfoShow.value = true
}
// 取消编辑
function oncancelUp() {
  rest();
  uplinkInfoShow.value = false;
}
// 确定编辑
function onconfirmUp(rows) {
  if (rows.list.length > 0) {
    const ids: any = [];
    rows.list.forEach((res) => {
      ids.push(res.source.id);
    });
    params.value.listSwitchId = ids;
    addHandler();
  } else {
    state.show = true;
    state.msg = "请选择开关";
    return;
  }
}
// 上下限开关设置
function setUpSwitch({ value, event }, item: any) {
  if (event) {
    const data = {
      id: item.id,
      openType: 1,
      isOpen: item.oxyUpperOpen ? 1 : 0,  // 布尔转数字
    };
    switchParams.value = data;
    if (item.oxyUpperOpen) {
      openAlert.value = true;
      return;
    }
    setSwitchOpen(data);
  }
}
function setLoSwitch({ value, event }, item: any) {
  if (event) {
    const data = {
      id: item.id,
      openType: 2,
      isOpen: item.oxyLowerOpen ? 1 : 0,  // 布尔转数字
    };
    switchParams.value = data;
    if (item.oxyLowerOpen) {
      openAlert.value = true;
      return;
    }
    setSwitchOpen(data);
  }
}
// 开启开关
function setSwitchOpenOk() {
  setSwitchOpen(switchParams.value);
}
// 取消开启操作
function setSwitchOpenNone() {
  openAlert.value = false;
  getLinksList();
}
function setSwitchOpen(data) {
  setLinkOpen(data)
    .then((res: any) => {
      if (res.code == 200) {
        state.show = true;
        const tag = data.isOpen ? "开启" : "关闭";
        state.msg = tag + "成功";
        // 重新加载列表以同步状态
        getLinksList();
      } else {
        // 失败时恢复开关状态
        getLinksList();
      }
    })
    .catch(() => {
      // 错误时恢复开关状态
      getLinksList();
    })
    .finally(() => {
      openAlert.value = false;
    });
}
function onfocus() {
  isScroll.value = false;
}
function upOxyU(item) {
  openOxyU.value = true;
  oxyU.value = item.oxyUpperValue;
  oxyD.value = item.oxyLowerValue;
  linkInfo.value = item;
}
function upOxyD(item) {
  openOxyD.value = true;
  oxyU.value = item.oxyUpperValue;
  oxyD.value = item.oxyLowerValue;
  linkInfo.value = item;
}
function setOxyEventU() {
  const u =
    oxyU.value != null && oxyU.value != undefined && oxyU.value != ""
      ? Number(oxyU.value)
      : null;
  const l =
    oxyD.value != null && oxyD.value != undefined && oxyD.value != ""
      ? Number(oxyD.value)
      : null;
  if (u == null || u == undefined || u == "") {
    state.show = true;
    state.msg = "请输入溶解氧上限";
    return;
  }
  if (u && (Number(u) < 1 || Number(u) > 20)) {
    state.show = true;
    state.msg = "溶解氧上限范围1~20";
    return;
  }
  if (u && l) {
    if (Number(u) <= Number(l)) {
      state.show = true;
      state.msg = "溶解氧上限必须大于下限，且差值不能小于1Mg/L";
      return;
    } else {
      const c = Number(u) - Number(l);
      if (c < 1) {
        state.show = true;
        state.msg = "溶解氧上限必须大于下限，且差值不能小于1Mg/L";
        return;
      }
    }
  }
  linkInfo.value.oxyUpperValue = u;
  // linkInfo.value.oxyLowerValue = l
  updateOxy(linkInfo.value);
}
function setOxyEventD() {
  const u =
    oxyU.value != null && oxyU.value != undefined && oxyU.value != ""
      ? Number(oxyU.value)
      : null;
  const l =
    oxyD.value != null && oxyD.value != undefined && oxyD.value != ""
      ? Number(oxyD.value)
      : null;

  if (l == null || l == undefined || l == "") {
    state.show = true;
    state.msg = "请输入溶解氧下限";
    return;
  }
  if (l && (Number(l) < 1 || Number(l) > 20)) {
    state.show = true;
    state.msg = "溶解氧下限范围1~20";
    return;
  }
  if (u && l) {
    if (Number(u) <= Number(l)) {
      state.show = true;
      state.msg = "溶解氧上限必须大于下限，且差值不能小于1Mg/L";
      return;
    } else {
      const c = Number(u) - Number(l);
      if (c < 1) {
        state.show = true;
        state.msg = "溶解氧上限必须大于下限，且差值不能小于1Mg/L";
        return;
      }
    }
  }
  linkInfo.value.oxyLowerValue = l;
  // linkInfo.value.oxyUpperValue = u
  updateOxy(linkInfo.value);
}
function updateOxy(item) {
  params.value.id = item.id;
  params.value.deviceId = item.deviceId;
  params.value.oxyWarnUpper = item.oxyUpperValue;
  params.value.oxyWarnLower = item.oxyLowerValue;
  const ids: number[] = [];
  if (item.listSwitch && item.listSwitch.length > 0) {
    item.listSwitch.forEach((res: any) => {
      ids.push(res.id);
    });
  }
  params.value.listSwitchId = ids;
  upHandler();
}
function upHandler() {
  updateLinkerCtrl(params.value)
    .then((res) => {
      if (res.code == 200) {
        state.show = true;
        state.msg = "编辑成功";
        getLinksList();
        return;
      }
    })
    .finally(() => {
      oncancelUp();
      openOxyD.value = false;
      openOxyU.value = false;
    });
}
/** method end--------------------- */
</script>

<style lang="scss">
.link_home {
  width: 100%;
  height: 100%;
  background-image: url("https://www.yuceyun.cn/wechat/bg.jpg");
  background-color: #e5ebed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  margin: 0;

  font-size: 32px;
  font-family: "PingFang SC";
  font-weight: 400;

  .body {
    padding: 20px;

    .title {
      font-size: 36px;
      font-weight: bold;
      color: #222;
      margin-bottom: 20px;
    }

    .t_desc {
      font-size: 32px;
      color: #e22323;
    }

    .t_desc_update {
      font-size: 32px;
      color: #17b4b2;
      margin-right: 20px;
    }

    .link_body {
      padding: 20px;

      .nut-cell__title {
        font-size: 32px;
        color: #666;
      }

      .desc {
        font-size: 30px;
        color: #222;
        font-weight: bold;
      }

      .rjy {
        font-size: 32px;
        color: #17b4b2;
      }
    }

    .d_desc {
      font-size: 32px;
      color: #929a9b;
    }
  }

  .nut-dialog {
    padding: 0;
  }

  .nut-dialog__content {
    margin: 0;
    max-height: 100%;
  }

  .nut-input {
    padding: 20rpx 0;
  }

  .btn {
    width: 100%;
    position: fixed;
    bottom: 30px;
    // padding: 20px;
  }
}
</style>
