<template>
  <view :class="props.type == 1 ? 'nut-cell' : ''">
    <nut-config-provider :theme-vars="themeVarsBody">
      <nut-row>
        <nut-col :span="24">
          <nut-button
            type="primary"
            class="btn font_28"
            size="mini"
            @click="updatePond"
            :style="{ marginRight: '5px' }"
          >
            <template #icon>
              <IconFont :name="setting" size="16" />
            </template>
            <text class="font_28">编辑塘口</text>
          </nut-button>
          <nut-button
            type="primary"
            class="btn font_28"
            size="mini"
            @click="addDeviceChild"
            id="addDevice"
          >
            <template #icon>
              <Uploader size="16" />
            </template>
            <text class="font_28">添加设备</text>
          </nut-button>
        </nut-col>
        <nut-col :span="24">
          <nut-divider class="divider" />
        </nut-col>
      </nut-row>
      <nut-row v-if="doList.length > 0" class="pondInfo_home">
        <nut-col :span="24">
          <view class="device-tabs-wrapper">
            <view class="device-tabs">
              <view
                v-for="item in doList"
                :key="item.id"
                class="custom-tab-item font_32"
                :class="{ 'tab-active': doDev === item.id }"
                @click="changeDev(item)"
              >
                <view class="custom-title" :class="{ active: doDev === item.id }"
                  >{{ item.deviceName }}
                </view>
              </view>
            </view>
          </view>
        </nut-col>
        <nut-row v-for="item in doList" :key="item.id">
          <nut-col :span="24" v-if="doDev == item.id">
            <view class="view_f_between">
              <view>
                <nut-tag class="tag font_28 m_r_15" v-if="item.status == 1">
                  正常</nut-tag
                >
                <nut-tag class="tagErr font_28 m_r_15" v-else-if="item.status == 2">
                  {{ item.warnCodeInfo?.warnDescription }}</nut-tag
                >
                <nut-tag
                  class="font_28 m_r_15"
                  color="#E9E9E9"
                  text-color="#999999"
                  plain
                  v-else
                >
                  空闲</nut-tag
                >
                <nut-tag class="tag font_28" v-if="item.isLinkCtrl">
                  已开启联动控制
                </nut-tag>
                <!-- <nut-tag class="tagErr font_28" v-else> 未开启联动控制 </nut-tag> -->
              </view>
              <!-- <view
                class="font_28 c_1589E9"
                :style="{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '12px', margin: '0 15px' }"
                @click="setParams(item.id, item.deviceName, item.deviceType)"
                >参数设置</view> -->
            </view>
            <nut-config-provider :theme-vars="themeVars">
              <view class="m_t_20 view_f">
                <view
                  :style="{
                    width: 100 / Number(item.num) + '%',
                    textAlign: 'center',
                  }"
                  class="grid"
                  :class="{ active: prDev === 1 }"
                  @click="selectCharts(1)"
                >
                  <view>溶解氧</view>
                  <view><text class="font_20">(Mg/L)</text></view>
                  <view>
                    <text
                      class="h_grid_content_5"
                      :class="
                        !item.up
                          ? ''
                          : alarmJudgeCode(item.warnCodeInfo?.warnCode, 7)
                          ? 'c_E22323'
                          : ''
                      "
                      >{{
                        item.up ? toDecimal(item.valueDissolvedOxygen, 2) : "--"
                      }}</text
                    ></view
                  >
                </view>
                <view
                  :style="{
                    width: 100 / Number(item.num) + '%',
                    textAlign: 'center',
                  }"
                  class="grid"
                  :class="{ active: prDev === 2 }"
                  @click="selectCharts(2)"
                >
                  <view>水温</view>
                  <view><text class="font_20">(℃)</text></view>
                  <view>
                    <text
                      class="h_grid_content_5"
                      :class="
                        !item.up
                          ? ''
                          : alarmJudgeCode(item.warnCodeInfo?.warnCode, 9) ||
                            alarmJudgeCode(item.warnCodeInfo?.warnCode, 8)
                          ? 'c_E22323'
                          : ''
                      "
                      >{{ item.up ? toDecimal(item.valueTemperature, 2) : "--" }}</text
                    >
                  </view>
                </view>
                <view
                  :style="{
                    width: 100 / Number(item.num) + '%',
                    textAlign: 'center',
                  }"
                  class="grid"
                  :class="{ active: prDev === 3 }"
                  @click="selectCharts(3)"
                >
                  <view>饱和度</view>
                  <view><text class="font_20">(%)</text></view>
                  <view>
                    <text
                      class="h_grid_content_5"
                      :class="
                        !item.up
                          ? ''
                          : alarmJudgeCode(item.warnCodeInfo?.warnCode, 10)
                          ? 'c_E22323'
                          : ''
                      "
                      >{{ item.up ? toDecimal(item.valueSaturability, 2) : "--" }}</text
                    >
                  </view>
                </view>
                <view
                  v-show="item.isPh"
                  :style="{
                    width: 100 / Number(item.num) + '%',
                    textAlign: 'center',
                  }"
                  class="grid"
                  :class="{ active: prDev === 4 }"
                  @click="selectCharts(4)"
                >
                  <view>PH</view>
                  <view><text class="font_20">(Ph)</text></view>
                  <view>
                    <text class="h_grid_content_5">{{ item.up ?toDecimal(item.valuePH, 2):'--' }}</text>
                  </view>
                </view>
                <view
                  v-show="item.isSa"
                  :style="{
                    width: 100 / Number(item.num) + '%',
                    textAlign: 'center',
                  }"
                  class="grid"
                  :class="{ active: prDev === 5 }"
                  @click="selectCharts(5)"
                >
                  <view>盐度</view>
                  <view><text class="font_20">(‰)</text></view>
                  <view>
                    <text class="h_grid_content_5">{{
                      item.up ?toDecimal(item.valueSalinity, 2):'--'
                    }}</text>
                  </view>
                </view>
              </view>
            </nut-config-provider>
            <nut-row class="m_t_20">
              <view class="chart-header-row">
                <view class="chart-title">
                  <text class="title-text">{{
                    prDev === 1
                      ? "溶解氧"
                      : prDev === 2
                      ? "水　温"
                      : prDev === 3
                      ? "饱和度"
                      : prDev === 4
                      ? "PH　"
                      : prDev === 5
                      ? "盐　度"
                      : ""
                  }}</text>
                </view>
                <view class="day-selector">
                  <view
                    class="day-btn"
                    :class="{ active: dayDev === 1 }"
                    @click="changeDay(1)"
                  >
                    1天
                  </view>
                  <view
                    class="day-btn"
                    :class="{ active: dayDev === 3 }"
                    @click="changeDay(3)"
                  >
                    3天
                  </view>
                  <view
                    class="day-btn"
                    :class="{ active: dayDev === 7 }"
                    @click="changeDay(7)"
                  >
                    7天
                  </view>
                </view>
                <view class="chart-actions">
                  <text @click="fullscreenChart" class="action-link">放大</text>
                  <text class="divider-dot">·</text>
                  <text @click="changeShow" class="action-link">{{ setTitle }}</text>
                </view>
              </view>
              <!-- <nut-col :span="8" class="font_32 f_weight c_222">
                
                  {{
                    prDev === 1
                      ? "溶解氧"
                      : prDev === 2
                      ? "水　温"
                      : prDev === 3
                      ? "饱和度"
                      : prDev === 4
                      ? "PH　　"
                      : prDev === 5
                      ? "盐 度"
                      : ""
                  }}
              </nut-col>
              <nut-col
                :span="8"
                :style="{
                  display: 'flex',
                  alignItems: 'center',
                }"
              >
                <view
                  class="gridSmall font_26 c_222"
                  :class="{ active: dayDev === 1 }"
                  @click="changeDay(1)"
                >
                  1天
                </view>
                <view
                  class="gridSmall font_26 c_222"
                  :class="{ active: dayDev === 3 }"
                  @click="changeDay(3)"
                >
                  3天
                </view>
                <view
                  class="gridSmall font_26 c_222"
                  :class="{ active: dayDev === 7 }"
                  @click="changeDay(7)"
                >
                  7天
                </view>
              </nut-col>
              <nut-col :span="8" class="font_32 c_1589E9" :style="{ textAlign: 'right' }">
                <view @click="changeShow">{{ setTitle }}</view>
              </nut-col> -->
            </nut-row>
            <view :style="{ position: 'relative', marginTop: '10px' }" v-show="showChart">
              <view class="loading-container" v-show="loading">
                <Loading />
              </view>
              <canvas
                v-if="chartsDatas.length > 0"
                class="charts"
                type="2d"
                :id="
                  'GdHQcFQYzLhfeEvZbEJnhDxJzBlbCxhE' +
                  String(doDev) +
                  String(prDev) +
                  String(dayDev)
                "
                @touchend="touchEnd"
                @touchstart="touchCandle"
                @touchmove="moveCandle"
                :style="{
                  width: chartConf.cWidth + 'px',
                  height: chartConf.cHeight + 'px'
                }"
              ></canvas>
              <nut-empty description="暂无数据" v-else>
                <template #image>
                  <img :src="pond404" />
                </template>
              </nut-empty>
            </view>
            <!-- 功能按钮区域 -->
            <nut-row class="action-buttons" v-if="doList.length > 0">
              <nut-col :span="24">
                <view class="button-wrapper">
                  <nut-button
                    type="primary"
                    class="action-btn"
                    size="small"
                    @click="goDeviceInfo"
                  >
                    设备属性
                  </nut-button>
                  <nut-button
                    type="primary"
                    class="action-btn"
                    size="small"
                    @click="goAlarmSettings"
                  >
                    报警设置
                  </nut-button>
                  <nut-button
                    type="primary"
                    class="action-btn"
                    size="small"
                    @click="goDataQuery"
                  >
                    数据查询
                  </nut-button>
                </view>
              </nut-col>
            </nut-row>
          </nut-col>
        </nut-row>
      </nut-row>
      <nut-row v-else>
        <nut-col :span="24">
          <nut-empty description="暂无设备">
            <template #image>
              <img :src="pond404" />
            </template>
          </nut-empty>
        </nut-col>
      </nut-row>
    </nut-config-provider>
  </view>
  <nut-config-provider :theme-vars="themeVarsOther">
    <nut-cell v-if="controlList.length > 0">
      <!-- <nut-cell v-if="controlList.length > 0"> -->
      <nut-row>
        <nut-col :span="24">
          <nut-row :gutter="10">
            <nut-col :span="4" :style="{ lineHeight: '60rpx' }">
              <view class="font_32 f_weight c_22">控制器</view>
            </nut-col>
            <nut-col
              :span="12"
              :style="{
                display: 'flex',
                alignItems: 'center',
                lineHeight: '60rpx',
              }"
            >
              <view
                :style="{
                  color: '#888',
                  fontSize: '26rpx',
                  marginRight: '10rpx',
                }"
                >夜间防误开关</view
              >
              <!-- <nut-switch v-model="controlVal" active-color="#04D98A" @change="changeControl"/> -->
              <nut-switch
                v-model="keepNightOpen"
                active-color="#04D98A"
                @change="(value, event) => changeControl({ value, event })"
              />
            </nut-col>
            <nut-col :span="4" :style="{ lineHeight: '60rpx' }">
              <view
                class="gridCon"
                :class="openStatus == 1 ? 'openS' : 'openD'"
                @click="changeAllSwitch(false)"
                >全关
              </view>
            </nut-col>
            <nut-col :span="4" :style="{ lineHeight: '60rpx' }">
              <view
                class="gridCon"
                :class="openStatus == 2 ? 'openS' : 'openD'"
                @click="changeAllSwitch(true)"
                >全开
              </view>
            </nut-col>
            <nut-col :span="24">
              <nut-divider class="divider" />
            </nut-col>
          </nut-row>
          <nut-row
            :gutter="10"
            v-for="item in controlList"
            :key="item.id"
            @click="setControl(item)"
          >
            <nut-col :span="5" :style="{ height: '70px' }">
              <nut-row :gutter="5">
                <nut-col :span="24" class="tc">
                  <view class="table-container">
                    <view class="single-line" :style="{ marginBottom: '1px' }">
                      {{ item.deviceName }}
                    </view>
                    <view class="tagErr single-line" v-if="item.errorMessage">{{
                      item.errorMessage
                    }}</view>
                  </view>
                </nut-col>
              </nut-row>
            </nut-col>
            <nut-col :span="18" :style="{ height: '70px' }">
              <nut-row :gutter="5">
                <nut-col :span="6" class="tc">
                  <view
                    ><img
                      :src="switchRes(item.listSwitch, 1, 'img')"
                      class="img_size_def"
                  /></view>
                  <view class="tc truncate">{{
                    switchRes(item.listSwitch, 1, "switchName")
                  }}</view>
                </nut-col>
                <nut-col :span="6" class="tc">
                  <view
                    ><img
                      :src="switchRes(item.listSwitch, 2, 'img')"
                      class="img_size_def"
                  /></view>
                  <view class="tc truncate">{{
                    switchRes(item.listSwitch, 2, "switchName")
                  }}</view>
                </nut-col>
                <nut-col :span="6" class="tc">
                  <view
                    ><img
                      :src="switchRes(item.listSwitch, 3, 'img')"
                      class="img_size_def"
                  /></view>
                  <view class="tc truncate">{{
                    switchRes(item.listSwitch, 3, "switchName")
                  }}</view>
                </nut-col>
                <nut-col :span="6" class="tc">
                  <view
                    ><img
                      :src="switchRes(item.listSwitch, 4, 'img')"
                      class="img_size_def"
                  /></view>
                  <view class="tc truncate">{{
                    switchRes(item.listSwitch, 4, "switchName")
                  }}</view>
                </nut-col>
              </nut-row>
            </nut-col>
            <nut-col :span="24">
              <nut-divider
                :style="{
                  color: '#eee',
                  borderColor: '#eee',
                  padding: '0 0 0 0px',
                  margin: '0',
                }"
              />
            </nut-col>
          </nut-row>
        </nut-col>
      </nut-row>
    </nut-cell>
  </nut-config-provider>
  <!-- 引导 -->
  <nut-tour
    v-model="showTour"
    :steps="steps"
    type="tile"
    location="bottom-end"
  ></nut-tour>
  <!-- 弹出层提示 -->
  <nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" />
  <nut-config-provider :theme-vars="themeVarsDialog">
  <nut-dialog
    v-model:visible="visControl"
    class="dialog"
    text-align="left"
    no-footer
  >
    <view :style="{ height: '100%' }">
      <view class="d_body">
        <nut-row>
          <nut-col :span="12">
            <view class="d_title">{{ controlInfo.deviceName }}</view>
          </nut-col>
          <nut-col :span="12" :style="{ float: 'right' }">
            <view
              :style="{
                color: '#1589E9',
                fontSize: '32rpx',
                float: 'right',
                marginLeft: 'auto',
              }"
              @click="setParamsCtr(controlInfo.id)"
            >
              参数设置</view
            >
          </nut-col>
          <nut-col :span="24">
            <nut-divider class="divider" />
          </nut-col>
          <nut-col
            :span="24"
            :style="{ 
              marginTop: index === 0 ? '20rpx' : '45rpx',
              paddingBottom: '10rpx'
            }"
            v-for="(item, index) in controlInfo.listSwitch"
            :key="item.id"
          >
            <nut-row :style="{ lineHeight: '50rpx', alignItems: 'center' }">
              <nut-col span="10">
                <view class="d_c_title" :style="{ whiteSpace: 'nowrap' }">{{ item.switchName }}</view>
              </nut-col>
              <nut-col
                span="14"
                :style="{
                  textAlign: 'right',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'flex-end'
                }"
              >
                <nut-switch
                  :model-value="item.isOpen === 1"
                  active-color="#04D98A"
                  @change="(value, event) => setSwitchOpen({ value, event }, item)"
                />
                <view
                  :style="{
                    color: '#1589E9',
                    fontSize: '28rpx',
                    marginLeft: '50rpx',
                    whiteSpace: 'nowrap'
                  }"
                  @click="setSwitch(item.id, item.switchName)"
                  >设置
                </view>
              </nut-col>
            </nut-row>
          </nut-col>
        </nut-row>
      </view>
      <view class="d_btn">
        <nut-row>
          <!-- <nut-col :span="12" :style="{ border: '1px solid #eee', color: '#222' }" @click="visControl = false">
              取消
            </nut-col> -->
          <nut-col
            :span="24"
            :style="{ border: '1px solid #eee', color: '#15BBC5' }"
            @click="visControl = false"
          >
            确定
          </nut-col>
        </nut-row>
      </view>
    </view>
  </nut-dialog>
  </nut-config-provider>
  <!-- 防误触开关提醒 -->
  <nut-dialog v-model:visible="alertShow" text-align="left" pop-class="pop-class">
    <template #default>
      <view :style="{ height: '100%', padding: '10px' }">
        <nut-row>
          <nut-col :span="24" class="font_28 c_E22323">
            说明:开启“夜间防误关”功能后，该增氧机在从晚上23:00次日6:00如发生状态由开启变为关闭(除定时关机、联动关机、遥控关机外)时，会进行电话报警。
          </nut-col>
        </nut-row>
      </view>
    </template>
    <template #footer>
      <view class="d_btn" :style="{ position: 'absolute' }">
        <nut-row>
          <nut-col
            :span="12"
            :style="{ border: '1px solid #eee', color: '#222' }"
            @click="cancel"
          >
            取消
          </nut-col>
          <nut-col :span="12" :style="{ border: '1px solid #eee', color: '#15BBC5' }">
            <nut-button type="primary" shape="square" block @click="submit"
              >确定</nut-button
            >
          </nut-col>
        </nut-row>
      </view>
    </template>
  </nut-dialog>
  
  </template>
<script setup lang="ts" name="PondInfo">
import { IconFont, Loading, RectRight, Uploader } from "@nutui/icons-vue-taro";
import { imgUrl } from "@/utils/imgUrl";
import Taro from "@tarojs/taro";
import uCharts from "@/utils/js-sdk/u-charts/u-charts.js";
import {
  timeX,
  toDecimal,
  alarmJudgeCode,
  generateTimeSlotsEndingToday,
  formatDateString,
} from "@/utils/tools";
import { defineEmits } from "vue";
import { pondDeviceInfo } from "@/api/pond";
import { deviceHistory, turnPondSwitch, turnSwitch, setNightProtect } from "@/api/device";
import { stateType } from "@/utils/types";
const pond404 = `${imgUrl}zanwurenwu.png`;
const setting = `${imgUrl}setting.png`;
const phone = `${imgUrl}tel.png`;
// 其他
const c1 = `${imgUrl}c1.png`;
const c1_d = `${imgUrl}c1_d.png`;
const c1_n = `${imgUrl}c1_n.png`;
const c2 = `${imgUrl}c2.png`;
const c2_d = `${imgUrl}c2_d.png`;
const c2_n = `${imgUrl}c2_n.png`;
const c3 = `${imgUrl}c3.png`;
const c3_d = `${imgUrl}c3_d.png`;
const c3_n = `${imgUrl}c3_n.png`;
const c_def = `${imgUrl}c_def.png`;
const c_def2 = `${imgUrl}c_def2.png`;
const c4 = `${imgUrl}c4.png`;
const c4_d = `${imgUrl}c4_d.png`;
const c4_n = `${imgUrl}c4_n.png`;
// 选中的溶解氧
const doDev = ref();
// 选中的指标参数
const prDev = ref(1);
const dayDev = ref(1);
// 溶解氧机列表
const doList = ref<any[]>([]);
const oxyWarnLower = ref(null);
const tempWarnUpper = ref(null);
const tempWarnLower = ref(null);
const setTitle = ref("隐藏");
const loading = ref<boolean>(false);
const showChart = ref<boolean>(true);
const themeVars = ref({
  gridItemTextMargin: "0px",
});
const themeVarsBody = ref({
  noticebarAcrossHeight: "60rpx",
  cellAfterBorderBottom: "0px",
  cellPadding: "20rpx",
  tabsHorizontalTitlesHeight: "60rpx",
});
const themeVarsOther = ref({
  switchWidth: "36px",
  switchHeight: "21px",
  switchInsideWidth: "14px",
  switchInsideHeight: "14px",
});
// 弹窗开关样式配置，与主页面开关保持一致
const themeVarsDialog = ref({
  switchWidth: "36px",
  switchHeight: "21px",
  switchInsideWidth: "14px",
  switchInsideHeight: "14px",
});
// 图表参数
const paramsHistory = ref({
  serialNum: "",      // 设备序列号
  startTime: "",      // 开始时间
  endTime: "",        // 结束时间
  intervalType: 1,    // 时间间隔类型：1-1天, 2-3天, 3-7天
});
// 图表数据
const chartsDatas = ref<any>([]);
const uChartsOp = ref<any>({});
// 图表参数
const chartConf = reactive({
  cWidth: 750,
  cHeight: 500,
  pixelRatio: 1,
  top: 0,
  left: 0,
});
const props = defineProps({
  // 数据
  modelValue: {
    type: Number || String,
    required: true,
  },
  type: {
    type: Number || String,
    required: true,
    default: 1,
  },

});
const pondDeviceRes = ref<any>();
const emit = defineEmits(["getPondInfo", "getRes", "render", "addDevice"]);
// 首个设备id
const firstDoId = ref();
// 7天x轴数据
const x7 = ref([]);
const showTour = ref<boolean>(false);
const steps = ref([
  {
    content: "请添加塘口",
    target: "addPondBtn",
  },
]);
const hideState = ref(true);
// 控制器列表
const controlList = ref<any[]>([]);
// 控制器开关
const state: stateType = reactive({
  msg: "",
  type: "text",
  center: true,
  show: false,
});
const visControl = ref(false);
// 当前控制器下开关列表
const controlInfo = ref<any>({
  deviceName: undefined,
  id: undefined,
  listSwitch: [],
});
// 防误触开关提醒
const alertShow = ref(false);
const openStatus = ref(0);
const keepNightOpen = ref(false);
/** -----------------method start----------------- */
Taro.useDidShow(() => {
  const sysInfo = Taro.getSystemInfoSync();
  let cWidth = (700 / 750) * sysInfo.screenWidth;
  let cHeight = (220 / 750) * sysInfo.windowHeight;
  let pixelRatio = sysInfo.pixelRatio;
  chartConf.cWidth = cWidth;
  chartConf.cHeight = cHeight;
  chartConf.pixelRatio = pixelRatio;

  // 关闭弹窗类
  alertShow.value = false;
  visControl.value = false;
  getDeviceList();
  getNowDate();
});
onMounted(() => {
  const sysInfo = Taro.getSystemInfoSync();
  let cWidth = (700 / 750) * sysInfo.screenWidth;
  let cHeight = (220 / 750) * sysInfo.windowHeight;
  let pixelRatio = sysInfo.pixelRatio;
  chartConf.cWidth = cWidth;
  chartConf.cHeight = cHeight;
  chartConf.pixelRatio = pixelRatio;

  // 关闭弹窗类
  alertShow.value = false;
  visControl.value = false;

  getDeviceList();
  getNowDate();
});
watchEffect(() => {
  emit("getPondInfo", pondDeviceRes.value);
});
watch(
  () => props.modelValue,
  () => {
    getDeviceList();
  }
);
// 获取塘口下的设备列表
function getDeviceList() {
  emit("render", "");
  const id = props.modelValue;
  if (!id) {
    return;
  }
  // 查询塘口下设备列表
  pondDeviceInfo({ id }).then((res: any) => {
    if (res.code == 200) {
      setTimeout(() => {
        if (
          res.data &&
          res.data.listDetector <= 0 &&
          res.data.listDetector.length <= 0 &&
          res.data.listController.length <= 0 &&
          props.type == 1 &&
          hideState.value
        ) {
          showTour.value = true;
          steps.value = [
            {
              content: "请添加设备",
              target: "addDevice",
            },
          ];
        }
      }, 500);
      const oxyIds = [];
      res.data.listDetector.forEach((item: any) => {
        oxyIds.push(item.id);
        let num = 3;
        const devCount = Number(item.deviceCount) + Number(item.switchCount);
        const msg = item.warnCodeInfo?.warnDescription || '';
        const showPh = !alarmJudgeCode(item.warnCodeInfo?.warnCode, 1);
        const showSa = !alarmJudgeCode(item.warnCodeInfo?.warnCode, 2);
        if (msg) {
          item.isPh = showPh;
          item.isSa = showSa;
        } else {
          item.isPh = showPh == false ? false : item.valuePH ? item.valuePH : false;
          item.isSa =
            showSa == false ? false : item.valueSalinity ? item.valueSalinity : false;
        }
        if (item.isPh) {
          num += 1;
        }
        if (item.isSa) {
          num += 1;
        }
        item.num = num;
        item.status = Number(item.deviceCount) == 0 ? 0 : msg ? 2 : 1;
        // 判断设备是否离线，异常、断电 0 6 15
        const code0 = alarmJudgeCode(item.warnCodeInfo?.warnCode, 0);
        const code6 = alarmJudgeCode(item.warnCodeInfo?.warnCode, 6);
        const code11 = alarmJudgeCode(item.warnCodeInfo?.warnCode, 15);
        const code17 = alarmJudgeCode(item.warnCodeInfo?.warnCode, 17);
        item.up = true;
        if (code0 || code6 || code11 || code17) {
          item.up = false;
        }
      });
      pondDeviceRes.value = res.data;
      keepNightOpen.value = res.data.keepNightOpen === 1;
      doList.value = res.data.listDetector;
      controlList.value = res.data.listController;
      if (res.data.listDetector && res.data.listDetector.length > 0) {
        firstDoId.value = res.data.listDetector[0].id
          ? res.data.listDetector[0].id
          : undefined;
        doDev.value = doDev.value
          ? doDev.value
          : res.data.listDetector[0].id
          ? res.data.listDetector[0].id
          : undefined;
        
        if (doDev.value) {
          // 根据当前选中的设备设置 serialNum
          const currentDevice = res.data.listDetector.find((item: any) => item.id === doDev.value);
          if (currentDevice && currentDevice.serialNum) {
            paramsHistory.value.serialNum = currentDevice.serialNum;
          }
          
          if (!oxyIds.includes(doDev.value)) {
            doDev.value = res.data.listDetector[0].id
              ? res.data.listDetector[0].id
              : undefined;
            oxyWarnLower.value = res.data.listDetector[0].oxyWarnLower
              ? res.data.listDetector[0].oxyWarnLower
              : undefined;
            tempWarnUpper.value = res.data.listDetector[0].tempWarnUpper
              ? res.data.listDetector[0].tempWarnUpper
              : undefined;
            tempWarnLower.value = res.data.listDetector[0].tempWarnLower
              ? res.data.listDetector[0].tempWarnLower
              : undefined;
          } else {
            res.data.listDetector.forEach((r) => {
              if (r.id == doDev.value) {
                oxyWarnLower.value = r.oxyWarnLower ? r.oxyWarnLower : undefined;
                tempWarnUpper.value = r.tempWarnUpper ? r.tempWarnUpper : undefined;
                tempWarnLower.value = r.tempWarnLower ? r.tempWarnLower : undefined;
              }
            });
          }
        }
      }
      emit("getPondInfo", { res: res.data });
      setTimeout(() => {
        getDaysAgo(dayDev.value);
      }, 200);
    }
  });
}
// 选择日期
function changeDay(e) {
  dayDev.value = e;
  // 直接传递天数，getDaysAgo 会自动设置正确的 intervalType
  getDaysAgo(e);
}
// 显隐控制器
// 显隐控制器
function changeShow() {
  showChart.value = !showChart.value;
  if (showChart.value) {
    setTitle.value = "隐藏";
    setTimeout(() => {
      getDaysAgo(dayDev.value);
    }, 200);
  } else {
    setTitle.value = "显示";
  }
}

// 全屏显示图表 - 跳转到单独页面
function fullscreenChart() {
  // 获取当前设备的 serialNum
  const currentDevice = pondDeviceRes.value?.listDetector?.find(
    (item: any) => item.id === doDev.value
  );
  
  if (!currentDevice) {
    Taro.showToast({
      title: '设备信息不存在',
      icon: 'none'
    });
    return;
  }
  
  const serialNum = currentDevice.serialNum || currentDevice.serialNumber || currentDevice.deviceSerialNum || currentDevice.sn;
  
  if (!serialNum) {
    Taro.showToast({
      title: '设备序列号不存在',
      icon: 'none'
    });
    return;
  }
  
  // 跳转到全屏图表页面
  Taro.navigateTo({
    url: `/components/other/chartFullscreen?serialNum=${serialNum}&dataType=${prDev.value}&dayType=${dayDev.value}&oxyWarnLower=${oxyWarnLower.value || ''}&tempWarnUpper=${tempWarnUpper.value || ''}&tempWarnLower=${tempWarnLower.value || ''}`
  });
}

// 切换检测指标
function selectCharts(e) {
  prDev.value = e;
  const id = props.modelValue;
  // 不再需要 dataTypeId，一次查询返回所有数据
  if (!id) {
    return;
  }
  getDeviceHistory();
  pondDeviceInfo({ id }).then((res: any) => {
    if (res.code == 200) {
      const oxyIds = [];
      // setTimeout(() => {
      //   showTour.value = res.data.length == 0 ? true : false;
      //   steps.value = [
      //     {
      //       content: "请添加设备",
      //       target: "addDevice",
      //     },
      //   ];
      // }, 500);
      res.data.listDetector.forEach((item: any) => {
        oxyIds.push(item.id);
        let num = 3;
        const msg = item.warnCodeInfo?.warnDescription || '';
        const showPh = !alarmJudgeCode(item.warnCodeInfo?.warnCode, 1);
        const showSa = !alarmJudgeCode(item.warnCodeInfo?.warnCode, 2);
        if (msg) {
          item.isPh = showPh;
          item.isSa = showSa;
        } else {
          item.isPh = showPh == false ? false : item.valuePH ? item.valuePH : false;
          item.isSa =
            showSa == false ? false : item.valueSalinity ? item.valueSalinity : false;
        }
        if (item.isPh) {
          num += 1;
        }
        if (item.isSa) {
          num += 1;
        }
        item.num = num;
        item.status = Number(item.deviceCount) == 0 ? 0 : msg ? 2 : 1;
        // if(item.warnCodeInfo.warnCode==6){
        //   item.status = 2
        //   item.warnCodeInfo.warnDescription = ""
        // }

        // 判断设备是否离线，异常、断电 0 6 11
        const code0 = alarmJudgeCode(item.warnCodeInfo?.warnCode, 0);
        const code6 = alarmJudgeCode(item.warnCodeInfo?.warnCode, 6);
        const code11 = alarmJudgeCode(item.warnCodeInfo?.warnCode, 15);
        const code17 = alarmJudgeCode(item.warnCodeInfo?.warnCode, 17);
        item.up = true;
        if (code0 || code6 || code11 || code17) {
          item.up = false;
        }
      });
      pondDeviceRes.value = res.data;
      keepNightOpen.value = res.data.keepNightOpen === 1;  // 将后端的 0/1 转换为布尔值
      doList.value = res.data.listDetector;
      if (res.data.listDetector && res.data.listDetector.length > 0) {
        firstDoId.value = res.data.listDetector[0].id
          ? res.data.listDetector[0].id
          : undefined;
        doDev.value = doDev.value
          ? doDev.value
          : res.data.listDetector[0].id
          ? res.data.listDetector[0].id
          : undefined;
        if (doDev.value) {
          if (!oxyIds.includes(doDev.value)) {
            doDev.value = res.data.listDetector[0].id
              ? res.data.listDetector[0].id
              : undefined;
            oxyWarnLower.value = res.data.listDetector[0].oxyWarnLower
              ? res.data.listDetector[0].oxyWarnLower
              : undefined;
            tempWarnUpper.value = res.data.listDetector[0].tempWarnUpper
              ? res.data.listDetector[0].tempWarnUpper
              : undefined;
            tempWarnLower.value = res.data.listDetector[0].tempWarnLower
              ? res.data.listDetector[0].tempWarnLower
              : undefined;
          } else {
            res.data.listDetector.forEach((r) => {
              if (r.id == doDev.value) {
                oxyWarnLower.value = r.oxyWarnLower ? r.oxyWarnLower : undefined;
                tempWarnUpper.value = r.tempWarnUpper ? r.tempWarnUpper : undefined;
                tempWarnLower.value = r.tempWarnLower ? r.tempWarnLower : undefined;
              }
            });
          }
        }
      }
      emit("getPondInfo", { res: res.data });
      setTimeout(() => {
        drawCharts(2);
      }, 200);
    }
  });
}
// 参数设置
function setParams(id: number, name: string, type: number) {
  if (type == 1) {
    Taro.navigateTo({
      url: `/home/wqm?id=${id}&name=${name}&page=home`,
    });
  } else {
    Taro.navigateTo({
      url: `/home/ctr?id=${id}&name=${name}&page=home`,
    });
  }
}
// 切换设备-加载图表
function changeDev(item: any) {
  doDev.value = item.id;
  oxyWarnLower.value = item.oxyWarnLower;
  tempWarnUpper.value = item.tempWarnUpper;
  tempWarnLower.value = item.tempWarnLower;
  paramsHistory.value.serialNum = item.serialNum; // 使用设备序列号
  dayDev.value = 1;
  getDaysAgo(1);
}
// 设备历史数据图表
function getDeviceHistory() {
  loading.value = true;
  
  if (!paramsHistory.value.serialNum) {
    loading.value = false;
    return;
  }
  
  deviceHistory(paramsHistory.value)
    .then((res: any) => {
      // 后端直接返回数组，而不是 {code: 200, data: []}
      if (Array.isArray(res)) {
        chartsDatas.value = res;
        drawCharts(1);
      } else if (res.code == 200) {
        // 兼容标准响应格式
        chartsDatas.value = res.data || [];
        drawCharts(1);
      }
    })
    .catch((err) => {
    })
    .finally(() => {
      loading.value = false;
    });
}
// 监测图表 - 重构版本
function drawCharts(type) {
  loading.value = true;
  Taro.nextTick(() => {
    const data = chartsDatas.value; // 后端直接返回的数据数组
    const paramsType = prDev.value; // 当前选中的指标类型
    
    if (!data || data.length === 0) {
      loading.value = false;
      return;
    }
    
    let series: any = [];
    let x_time_list: any = []; // x轴时间列表
    let seriesData: any = [];   // y轴数据
    let warnLines: any = [];   // 告警线
    
    // 根据 paramsType 选择对应的数据字段
    let fieldName = '';
    let seriesName = '';
    
    if (paramsType == 1) {
      fieldName = 'dissolvedOxygen';
      seriesName = '溶解氧';
      // 添加告警下限
      if (oxyWarnLower.value) {
        warnLines = data.map(() => oxyWarnLower.value);
        series.push({
          name: '告警下限',
          data: warnLines,
          color: '#c12e34',
          lineType: 'dash',
        });
      }
    } else if (paramsType == 2) {
      fieldName = 'temperature';
      seriesName = '水温';
      // 添加告警上下限
      if (tempWarnLower.value) {
        warnLines = data.map(() => tempWarnLower.value);
        series.push({
          name: '告警下限',
          data: warnLines,
          color: '#c12e34',
          lineType: 'dash',
        });
      }
      if (tempWarnUpper.value) {
        const upperLines = data.map(() => tempWarnUpper.value);
        series.push({
          name: '告警上限',
          data: upperLines,
          color: '#e098c7',
          lineType: 'dash',
        });
      }
    } else if (paramsType == 3) {
      fieldName = 'saturability';
      seriesName = '饱和度';
    } else if (paramsType == 4) {
      fieldName = 'ph';
      seriesName = 'PH';
    } else if (paramsType == 5) {
      fieldName = 'salinity';
      seriesName = '盐度';
    }
    
    // 提取时间和数据
    data.forEach((item: any, index: number) => {
      // 格式化时间：2026-01-12 09:38:32.0 -> 01-12 09:38
      const timeStr = item.time || item.createTime || '';
      
      const timeParts = timeStr.split(' ');
      if (timeParts.length > 1) {
        const datePart = timeParts[0]; // YYYY-MM-DD
        const timePart = timeParts[1]; // HH:mm:ss.0
        
        // 提取 MM-DD HH:mm
        const dateMatch = datePart.match(/\d{4}-(\d{2})-(\d{2})/);
        const monthDay = dateMatch ? `${dateMatch[1]}-${dateMatch[2]}` : '';
        const hourMin = timePart.substring(0, 5); // HH:mm
        
        const formattedTime = `${monthDay} ${hourMin}`;
        x_time_list.push(formattedTime);
      } else {
        x_time_list.push('--:--'); // 占位符
      }
      
      // 提取对应字段的数据
      const value = item[fieldName];
      
      if (value !== null && value !== undefined) {
        const numValue = Number(value.toFixed(2));
        seriesData.push(numValue);
      } else {
        seriesData.push(null);
      }
    });
    
    // 添加主数据系列
    series.unshift({
      name: seriesName,
      data: seriesData,
    });
    
    setTimeout(() => {
      loading.value = false;
      const ids = "GdHQcFQYzLhfeEvZbEJnhDxJzBlbCxhE" + String(doDev.value) + String(prDev.value) + String(dayDev.value);
      
      const query = Taro.createSelectorQuery();
      query.select("#" + ids).boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec((res) => {
        if (res.length > 0) {
          chartConf.top = res[0] ? res[0].top : 0;
          chartConf.left = res[0] ? res[0].left : 0;
        }
      });
      if (type == 1) {
        createCharts(x_time_list, series, ids);
      } else {
        updateCharts(x_time_list, series, ids);
      }
    }, 200);
  });
}
// 触屏图表
function touchEnd(e) {
  const x = e.mpEvent.changedTouches[0].clientX;
  const y = e.mpEvent.changedTouches[0].clientY;
  let tmpe = {};
  tmpe = { x: x - chartConf.left, y: y - chartConf.top };
  e.changedTouches = [];
  e.changedTouches.unshift(tmpe);
  if (e.touches.length == 0) {
    uChartsOp.value[e.target.id].touchLegend(e);
    // uChartsOp.value[e.target.id].scrollEnd(e);
    uChartsOp.value[e.target.id].showToolTip(e, {
      formatter: (item, category, index, opts) => {
        if (dayDev.value == 7) {
          let msg = item.name + ":" + item.data;
          x7.value.forEach((value, i) => {
            if (i == index) {
              msg = value.time + "  " + item.name + ":" + item.data;
            }
          });
          return msg;
        } else {
          return item.name + ":" + item.data;
        }
      },
    });
  }
}
function touchCandle(e) {
  const x = e.mpEvent.changedTouches[0].clientX;
  const y = e.mpEvent.changedTouches[0].clientY;
  let tmpe = {};
  tmpe = { x: x - chartConf.left, y: y - chartConf.top };
  e.changedTouches = [];
  e.changedTouches.unshift(tmpe);
  uChartsOp.value[e.target.id].scrollStart(e);
}
function moveCandle(e) {
  const x = e.mpEvent.changedTouches[0].clientX;
  const y = e.mpEvent.changedTouches[0].clientY;
  let tmpe = {};
  tmpe = { x: x - chartConf.left, y: y - chartConf.top };
  e.changedTouches = [];
  e.changedTouches.unshift(tmpe);
  uChartsOp.value[e.target.id].scroll(e);
}
// 创建图表 - 兼容模式（支持微信小程序和H5）
function createCharts(x, series, ids) {
  Taro.nextTick(() => {
    let cWidth = chartConf.cWidth;
    let cHeight = chartConf.cHeight;
    let pixelRatio = chartConf.pixelRatio;
    
    // 判断环境
    const env = Taro.getEnv();
    
    if (env === 'WEB' || env === 'h5') {
      // H5 环境需要特殊处理
      setTimeout(() => {
        // H5 下需要找到真实的 canvas 元素，不是 Taro 的封装组件
        const canvasElement = document.querySelector(`#${ids} canvas`);
        
        if (!canvasElement) {
          return;
        }
        
        const ctx = canvasElement.getContext('2d');
        
        if (!ctx) {
          return;
        }
        
        uChartsOp.value[ids] = new uCharts({
          type: "line",
          context: ctx,
          width: cWidth,
          height: cHeight,
          categories: x,
          series: series,
          pixelRatio: 1,
          dataPointShape: false,
          animation: true,
          background: "#FFFFFF",
          color: ["#17B4B2", "#5470c6", "#fac858"],
          padding: [15, 30, 35, 45],
          enableScroll: false,
          boundaryGap: "justify",
          update: true,
          legend: {
            fontColor: "#222222",
            itemGap: 10,
            position: "top",
          },
          dataLabel: false,
          xAxis: {
            disableGrid: true,
            axisLine: true,
            type: "grid",
            gridType: "dash",
            itemCount: 0,
            scrollShow: false,
            scrollAlign: "left",
            labelCount: 7,
            rotateLabel: true,
            rotateAngle: 25,
          },
          yAxis: {
            disableGrid: false,
            gridType: "dash",
            tofix: 2,
          },
          extra: {
            tooltip: {
              showBox: true,
              showArrow: true,
              showCategory: true,
              borderWidth: 0,
              borderRadius: 0,
              borderColor: "#000000",
              borderOpacity: 0.7,
              bgColor: "#000000",
              bgOpacity: 0.7,
              gridType: "solid",
              dashLength: 4,
              gridColor: "#CCCCCC",
              boxPadding: 3,
              fontSize: 13,
              lineHeight: 20,
              fontColor: "#FFFFFF",
              legendShow: true,
              legendShape: "auto",
              splitLine: true,
              labelBgColor: "#FFFFFF",
              labelBgOpacity: 0.7,
              labelFontColor: "#666666",
            },
            line: {
              type: "curve",
              width: 1,
              activeType: "hollow",
            },
          },
        });
      }, 300);
    } else {
      // 小程序环境 - 使用 canvas 2d 模式
      // 通过 createSelectorQuery 获取 canvas 2d 节点
      const query = Taro.createSelectorQuery();
      query.select('#' + ids)
        .fields({ node: true, size: true })
        .exec((res) => {
          if (!res || !res[0] || !res[0].node) {
            return;
          }
          
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          
          if (!ctx) {
            return;
          }
          
          // 设置 canvas 实际尺寸
          canvas.width = cWidth * pixelRatio;
          canvas.height = cHeight * pixelRatio;
          
          uChartsOp.value[ids] = new uCharts({
            type: "line",
            context: ctx,
            width: cWidth * pixelRatio,
            height: cHeight * pixelRatio,
            categories: x,
            series: series,
            pixelRatio: pixelRatio,
            dataPointShape: false,
            animation: true,
            background: "#FFFFFF",
            color: ["#17B4B2", "#5470c6", "#fac858"],
            padding: [15, 50, 35, 15],
            enableScroll: false,
            boundaryGap: "justify",
            update: true,
            legend: {
              fontColor: "#222222",
              itemGap: 10,
              position: "top",
            },
            dataLabel: false,
            xAxis: {
              disableGrid: true,
              axisLine: true,
              type: "grid",
              gridType: "dash",
              itemCount: 0,
              scrollShow: false,
              scrollAlign: "left",
              labelCount: 6,
              rotateLabel: true,
              rotateAngle: 45,
              marginTop: 10,
            },
            yAxis: {
              disableGrid: false,
              gridType: "dash",
              tofix: 2,
            },
            extra: {
              tooltip: {
                showBox: true,
                showArrow: true,
                showCategory: true,
                borderWidth: 0,
                borderRadius: 0,
                borderColor: "#000000",
                borderOpacity: 0.7,
                bgColor: "#000000",
                bgOpacity: 0.7,
                gridType: "solid",
                dashLength: 4,
                gridColor: "#CCCCCC",
                boxPadding: 3,
                fontSize: 13,
                lineHeight: 20,
                fontColor: "#FFFFFF",
                legendShow: true,
                legendShape: "auto",
                splitLine: true,
                labelBgColor: "#FFFFFF",
                labelBgOpacity: 0.7,
                labelFontColor: "#666666",
              },
              line: {
                type: "curve",
                width: 1,
                activeType: "hollow",
              },
            },
          });
        });
    }
  });
}
// 更新图表数据
function updateCharts(x, series, ids) {
  Taro.nextTick(() => {
    if (uChartsOp.value[ids]) {
      uChartsOp.value[ids].updateData({
        series: series,
        categories: x,
        legend: {
          fontColor: "#222222",
          itemGap: 10,
          float: prDev.value == 2 || prDev.value == 1 ? "left" : "center",
        },
        xAxis: {
          disableGrid: true,
          axisLine: true,
          type: "grid",
          gridType: "dash",
          itemCount: 0,
          scrollShow: false,
          scrollAlign: "left",
          labelCount: 7,
        },
      });
    } else {
      createCharts(x, series, ids);
    }
  });
}
// 切换日期
function getDaysAgo(days) {
  const now = new Date();
  // days = 1 表示 1 天，从昨天到今天，所以往前推 1 天
  // days = 3 表示 3 天，从 3 天前到今天，所以往前推 3 天
  const start = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
  
  // 格式化为 YYYY-MM-DD HH:mm:ss
  paramsHistory.value.startTime = formatDateTime(start);
  paramsHistory.value.endTime = formatDateTime(now);
  

  
  // 设置 intervalType：1天->1, 3天->2, 7天->3
  if (days === 1) {
    paramsHistory.value.intervalType = 1;
  } else if (days === 3) {
    paramsHistory.value.intervalType = 2;
  } else if (days === 7) {
    paramsHistory.value.intervalType = 3;
  }
  
  getDeviceHistory();
}

// 格式化时间为 YYYY-MM-DD HH:mm:ss
function formatDateTime(date: Date): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
function getStartDate(days) {
  // 获取当前日期时间
  const currentDate = new Date();

  // 将天数转换为毫秒数，因为`Date`对象的减法运算会按毫秒计算
  const msInOneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
  const daysAgoInMs = days * msInOneDay;

  // 从当前日期减去指定的天数
  const dateBefore = new Date(currentDate.getTime() - daysAgoInMs);
  let year = dateBefore.getFullYear(); //得到年份
  let month = dateBefore.getMonth(); //得到月份
  let date = dateBefore.getDate(); //得到日期
  month = month + 1;
  month = month.toString().padStart(2, "0");
  date = date.toString().padStart(2, "0");
  let day = `${year}-${month}-${date}`;
  return day;
}
// 加载时间参数
function getNowDate() {
  const now = new Date();
  const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000); // 昨天
  
  paramsHistory.value.startTime = formatDateTime(yesterday);
  paramsHistory.value.endTime = formatDateTime(now);
  paramsHistory.value.intervalType = 1; // 默认 1 天
}
function groupByDate(data) {
  const result = {};

  for (const item of data) {
    // const date = formatDate(new Date(item.createdTime));
    const date = item.day;
    if (!result[date]) {
      result[date] = []; // Initialize an empty array for this date if it doesn't exist yet
    }
    result[date].push(item); // Add the current item to the array for the corresponding date
  }
  return result;
}
function getRelativeDay(date) {
  const dateStr = date.replace(/-/g, "/");
  // 将输入转换为 Date 对象
  const inputDate = typeof dateStr === "string" ? new Date(dateStr) : dateStr;

  // 获取当前日期和时间
  const now = new Date();

  // 重置时间为零点，以便只比较日期部分
  inputDate.setHours(0, 0, 0, 0);
  now.setHours(0, 0, 0, 0);

  // 计算日期差值（以天为单位）
  const diffDays = Math.abs(
    (now.getTime() - inputDate.getTime()) / (1000 * 60 * 60 * 24)
  );
  if (diffDays === 0) {
    return "今日";
  } else if (diffDays === 1) {
    return "昨日";
  } else if (diffDays === 2) {
    return "前日";
  } else {
    return undefined; // 不属于昨天、今天或前天
  }
}
function processData(dataArray) {
  const resultArray = dataArray.reduce((acc, curr) => {
    const createdDate = new Date(curr.createdTime);
    const halfHour = Math.floor(createdDate.getMinutes() / 30);
    const hour = createdDate.getHours();
    const minute = halfHour * 30;
    const halfHourKey = `${createdDate.getFullYear()}-${(createdDate.getMonth() + 1)
      .toString()
      .padStart(2, "0")}-${createdDate.getDate()} ${hour
      .toString()
      .padStart(2, "0")}:${minute.toString().padStart(2, "0")}:00`;

    if (!acc[halfHourKey]) {
      acc[halfHourKey] = {
        count: 0,
        value: 0,
      };
    }

    acc[halfHourKey].count++;
    acc[halfHourKey].value += curr.value;
    return acc;
  }, {});

  for (const key in resultArray) {
    resultArray[key].value /= resultArray[key].count;
  }

  const finalResult = Object.entries(resultArray).map(([key, value]) => {
    const dateStr = String(key).split(" ")[0].replace(/-/g, "/");
    const day = formatDateString(dateStr, "yyyy-mm-dd");
    return {
      createdTime: String(key).split(" ")[1].slice(0, -3),
      day: day,
      value: value.value,
    };
  });

  return finalResult;
}
// 编辑塘口
function updatePond() {
  if (props.modelValue) {
    Taro.navigateTo({
      url: `/home/updatePond?id=${props.modelValue}`,
    });
  }
}
// 添加设备
function addDeviceChild() {
  emit("addDevice");
}
// 隐藏引导框
function hideTour(a) {
  showTour.value = false;
  hideState.value = !a;
}
// 刷新
function refresh() {
  // 确保重新设置图表尺寸
  const sysInfo = Taro.getSystemInfoSync();
  let cWidth = (700 / 750) * sysInfo.screenWidth;
  let cHeight = (220 / 750) * sysInfo.windowHeight;
  let pixelRatio = sysInfo.pixelRatio;
  chartConf.cWidth = cWidth;
  chartConf.cHeight = cHeight;
  chartConf.pixelRatio = pixelRatio;
  
  // 重新加载设备列表和图表数据
  getDeviceList();
}
// 启停开关
function setSwitchOpen({ value, event }, item: any) {
  if (event) {
    const data = {
      id: item.id,
      isOpen: value ? 1 : 0,
    };
    turnSwitch(data)
      .then((res: any) => {
        if (res.code == 200) {
          state.show = true;
          state.msg = "操作成功";
          state.type = "success";
          // 立即更新本地状态
          item.isOpen = value ? 1 : 0;
        } else {
          state.show = true;
          state.msg = res.msg || "设置失败，请重试";
          state.type = "fail";
        }
      })
      .catch((error) => {
        state.show = true;
        state.msg = "网络错误，请重试";
        state.type = "fail";
      });
  }
}
// ---------------------控制器相关----------------------- //
// 全开全关
function changeAllSwitch(e) {
  const msg = e ? "全开" : "全关";
  Taro.showModal({
    title: "提示",
    content: `确认设置控制器 ${msg}？`,
    success: function (res) {
      if (res.confirm) {
        const data = {
          id: props.modelValue,
          isOpen: e ? 1 : 0,
        };
        
        turnPondSwitch(data)
          .then((res: any) => {
            if (res.code == 200) {
              state.show = true;
              state.msg = "操作成功";
              state.type = "success";
              
              // 接口成功后，立即更新本地状态
              openStatus.value = e == true ? 1 : 2;
              
              // 立即更新所有控制器下的开关状态
              controlList.value.forEach((controller) => {
                if (controller.listSwitch && controller.listSwitch.length > 0) {
                  controller.listSwitch.forEach((switchItem) => {
                    switchItem.isOpen = e ? 1 : 0;
                  });
                }
              });
            } else {
              // 接口返回失败
              state.show = true;
              state.msg = res.msg || "设置失败，请重试";
              state.type = "fail";
            }
          })
          .catch((error) => {
            // 网络错误
            state.show = true;
            state.msg = "网络错误，请重试";
            state.type = "fail";
          });
      } else if (res.cancel) {
      }
    },
  });
}
// 设置控制器
function setParamsCtr(id) {
  Taro.navigateTo({
    url: `/home/ctr?id=${id}&page=home`,
  });
}
function switchRes(list, index, type) {
  if (list.length > 0) {
    const info = list.filter((res) => res.index == index);
    if (type == "img") {
      const isLinkedCtrl = info.length > 0 ? info[0]["isLinkedCtrl"] : 0;
      const isTimingCtrl = info.length > 0 ? info[0]["isTimingCtrl"] : 0;
      const isOpen = info.length > 0 ? info[0]["isOpen"] : 0;
      const hasErrorCode = info.length > 0 ? info[0]["hasErrorCode"] : 0;
      if (isTimingCtrl && isLinkedCtrl) {
        if (!isOpen) {
          return c4_n;
        } else {
          if (hasErrorCode) {
            return c4_d;
          } else {
            return c4;
          }
        }
      }
      if (isLinkedCtrl) {
        if (!isOpen) {
          return c2_n;
        } else {
          if (hasErrorCode) {
            return c2_d;
          } else {
            return c2;
          }
        }
      }
      if (isTimingCtrl) {
        if (!isOpen) {
          return c1_n;
        } else {
          if (hasErrorCode) {
            return c1_d;
          } else {
            return c1;
          }
        }
      }
      if (info.length > 0) {
        if (!isOpen) {
          return c3_n;
        } else {
          if (hasErrorCode) {
            return c3_d;
          } else {
            return c3;
          }
        }
      }
      return c_def2;
    } else {
      const r = info.length > 0 ? info[0][type] : "";
      return r;
    }
  } else {
    return "开关" + index;
  }
}
// 控制器弹出层
function setControl(item) {
  visControl.value = true;
  controlInfo.value.deviceName = item.deviceName;
  controlInfo.value.id = item.id;
  controlInfo.value.listSwitch = item.listSwitch;
}
// 跳转到开关设置页面
function setSwitch(id, name) {
  Taro.navigateTo({
    url: `/home/switch?id=${id}&name=${name}`,
  });
}
// 夜间防误触开关
function changeControl({ value, event }) {
  if (event) {
    alertShow.value = value ? true : false;
    if (!value) {
      submit();
    }
  }
}
function cancel() {
  alertShow.value = false;
  keepNightOpen.value = false;
}
function submit() {
  alertShow.value = false;
  const data = {
    id: props.modelValue,
    isOpen: keepNightOpen.value ? 1 : 0,
  };
  setNightProtect(data).then((res) => {
    if (res.code == 200) {
      state.type = "success";
      state.msg = "操作成功";
      state.show = true;
      // getDeviceList();
    } else {
      state.type = "fail";
      state.msg = res.msg || "设置失败，请重试";
      state.show = true;
    }
  }).catch((error) => {
    state.type = "fail";
    state.msg = "网络错误，请重试";
    state.show = true;
  });
}
// 跳转到设备信息页面（设备属性）
function goDeviceInfo() {
  const currentDevice = doList.value.find(
    (item: any) => item.id === doDev.value
  );
  
  if (!currentDevice) {
    state.show = true;
    state.msg = '设备信息不存在';
    state.type = 'fail';
    return;
  }
  
  // 跳转到 wqm 页面，带上 deviceInfo 参数表示跳到设备信息区域
  Taro.navigateTo({
    url: `/home/wqm?id=${currentDevice.id}&name=${currentDevice.deviceName}&page=home&section=deviceInfo`,
  });
}

// 跳转到报警设置页面（溶解氧配置）
function goAlarmSettings() {
  const currentDevice = doList.value.find(
    (item: any) => item.id === doDev.value
  );
  
  if (!currentDevice) {
    state.show = true;
    state.msg = '设备信息不存在';
    state.type = 'fail';
    return;
  }
  
  // 跳转到 wqm 页面，带上 alarmSettings 参数表示跳到溶解氧配置区域
  Taro.navigateTo({
    url: `/home/wqm?id=${currentDevice.id}&name=${currentDevice.deviceName}&page=home&section=alarmSettings`,
  });
}

// 跳转到数据查询页面
function goDataQuery() {
  const currentDevice = doList.value.find(
    (item: any) => item.id === doDev.value
  );
  
  if (!currentDevice) {
    state.show = true;
    state.msg = '设备信息不存在';
    state.type = 'fail';
    return;
  }
  
  // 获取设备序列号
  const serialNum = currentDevice.serialNum || currentDevice.serialNumber || currentDevice.deviceSerialNum || currentDevice.sn;
  
  if (!serialNum) {
    state.show = true;
    state.msg = '设备序列号不存在';
    state.type = 'fail';
    return;
  }
  
  // 跳转到数据查询页面（横屏显示）
  Taro.navigateTo({
    url: `/components/other/dataQuery?serialNum=${serialNum}&dataType=${prDev.value}&deviceName=${currentDevice.deviceName}&oxyWarnLower=${oxyWarnLower.value || ''}&tempWarnUpper=${tempWarnUpper.value || ''}&tempWarnLower=${tempWarnLower.value || ''}`,
  });
}
/** -----------------method end------------------- */
defineExpose({
  getDeviceList,
  hideTour,
  refresh,
});
/** -----------------method end------------------- */
</script>
<style lang="scss">
.pondInfo_home {
  width: 100%;
  height: 100%;
  .tag {
    background: RGB(14, 191, 117, 0.1);
    border-radius: 4px;
    color: #0ebf75;
  }

  .tagErr {
    background: RGB(191, 41, 14, 0.1);
    border-radius: 4px;
    color: #bf290e;
  }
  .device-tabs-wrapper {
    width: 100%;
    padding: 0;
    margin: 2rpx 0rpx 15rpx 0rpx;
  }
  
  .device-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    padding: 0;
  }
  .custom-tab-item {
    padding: 10rpx 20rpx;
    background-color: #f5f6f7;
    border-radius: 8rpx;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120rpx;
    text-align: center;
    
    &.tab-active {
      background-color: #ffffff;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    }

    .custom-title {
      color: #333;
      display: inline-block;
      font-size: 28rpx;
      
      &.active {
        color: #09b8c2;
        font-weight: bold;
      }
    }
  }
  .nut-tab-pane {
    padding: 0px !important;
  }

  .nut-grid-item__content {
    height: 140rpx;
  }

  .nut-grid-item {
    height: 140rpx;
    padding-top: 0% !important;
  }

  .nut-grid {
    height: 140rpx;
  }

  .grid {
    background: #fff;
    border: 1px solid #f5f6f7;
    .nut-grid-item__text {
      font-weight: 500;
      font-size: 28px;
      color: #222;
    }
    font-weight: 500;
    font-size: 28px;
    color: #222;
  }

  .grid.active {
    color: #fff;
    background: #09b8c2;
    .nut-grid-item__text {
      color: #fff;
    }

    .nut-grid-item__content--center {
      background: #09b8c2;
    }
  }

  .gridSmall {
    width: 160px;
    background: #fff;
    border: 1px solid #eee;
    text-align: center;
    height: 48px;
  }

  .gridSmall.active {
    color: #fff;
    background: #09b8c2;
  }

  // 优化后的图表标题行样式
  .chart-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 15px;
    gap: 15px;
  }

  .chart-title {
    flex: 0 0 auto;
    .title-text {
      font-size: 32px;
      font-weight: 600;
      color: #222;
      white-space: nowrap;
    }
  }

  .day-selector {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    
    .day-btn {
      padding: 0 18px;
      height: 36px;
      line-height: 36px;
      font-size: 26px;
      color: #666;
      background: #fff;
      border-right: 1px solid #e5e5e5;
      text-align: center;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:last-child {
        border-right: none;
      }
      
      &.active {
        color: #fff;
        background: linear-gradient(135deg, #09b8c2 0%, #07a5ae 100%);
        font-weight: 500;
      }
      
      &:not(.active):active {
        background: #f8f8f8;
      }
    }
  }

  .chart-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    
    .action-link {
      font-size: 28px;
      color: #1589E9;
      white-space: nowrap;
      cursor: pointer;
      transition: opacity 0.2s ease;
      
      &:active {
        opacity: 0.7;
      }
    }
    
    .divider-dot {
      font-size: 20px;
      color: #ccc;
      margin: 0 2px;
    }
  }

  .zoom-btn {
    font-size: 28px;
    white-space: nowrap;
    cursor: pointer;
    color: #1589E9;
  }

  .hide-btn {
    font-size: 28px;
    white-space: nowrap;
    color: #1589E9;
  }

  .gridRight {
    text-align: right;
    color: #1589e9;
  }

  .nut-popup--bottom {
    box-shadow: 0px 1px 7px 0px rgb(20, 20, 20);
    border-radius: 0px;
  }

  .nut-popup--center.round {
    border-radius: 10px;
  }

  .nut-dialog {
    padding: 0;
  }

  .nut-dialog__content {
    margin: 0;
    max-height: 100%;
  }
}
.btn {
  border-radius: 10px;
}
.charts {
  height: 330px;
  width: 100%;
}
.loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/** 底部弹出层 */
.rowPd {
  padding: 40px;
  height: 100%;
}
.gridCon {
  background: #fff;
  border: 1px solid #eee;
  font-size: 26rpx;
  color: #222;
  text-align: center;
  height: 48px;
  line-height: 48px;
  width: 90px;
}

.gridCon.active {
  color: #fff;
  background: #09b8c2;
}

.nut-grid-item__content {
  background: #fff;
}

// 功能按钮区域样式
.action-buttons {
  margin-top: 20rpx;
  padding: 0;
  width: 100%;
  
  .nut-col {
    padding: 0 !important;
  }
  
  .button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20rpx;
    padding: 0 20rpx;
    
    .action-btn {
      flex: 0 0 auto;
      width: 180rpx;
      height: 70rpx;
      font-size: 28rpx;
      border-radius: 8rpx;
      background: linear-gradient(135deg, #09b8c2 0%, #06a0a9 100%);
      border: none;
      color: #fff;
      font-weight: 500;
      box-shadow: 0 4rpx 12rpx rgba(9, 184, 194, 0.3);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
        box-shadow: 0 2rpx 8rpx rgba(9, 184, 194, 0.4);
      }
    }
  }
}
</style>
