<template>
  <!-- <nut-row class="home_home" :style="{ marginTop: navBarHeight + 'px' }"> -->
  <nut-row class="home_home">
    <!-- 固定区域开始 -->
    <view class="sticky-header">
      <CustomNavigationBar @refresh="resUsetInfo" />
      <!-- 头部操作按钮区 -->
      <nut-col
        :span="24"
        class="view_f_between header-btn-container"
      >
       <view>
          <nut-button type="primary" class="btn header-btn" size="small" @click="changeMode">
            <template #icon>
              <IconFont :name="change" size="18" />
            </template>
            <text class="font_32 c_fff">切换模式</text>
          </nut-button>
        </view>
        <view>
          <nut-button
            type="primary"
            class="btn header-btn font_28"
            size="small"
            open-type="contact"
          >
            <template #icon>
              <IconFont :name="phone" size="18" />
            </template>
            <text class="font_32">联系工程师</text>
          </nut-button>
        </view>
        <view>
          <nut-button
            type="primary"
            class="btn header-btn header-btn-warning font_28"
            size="small"
            @click="openNotice"
          >
            <template #icon>
              <Tips size="18" />
            </template>
            <text class="font_32">系统公告</text>
          </nut-button>
        </view>
      </nut-col>
    </view>
    <!-- 固定区域结束 -->
    <nut-col :span="24" class="container" :class="showChart ? 'ov' : ''">
      <nut-config-provider :theme-vars="themeVars">
        <nut-row class="body" :catch-move="false">
          <!-- 消息通知 -->
            <nut-col
              :span="24"
              class="pond m_t_15 view_f_between"
              :style="{ padding: '0 20rpx' }"
              @click="toPay"
            >
              <view :style="{ width: '100%' }">
                <nut-noticebar
                  background="rgba(255, 255, 255, 0.7)"
                  class="m_t_15"
                  :scrollable="false"
                  v-show="deadList.length > 0 && store.getUnLogin != 1"
                >
                  <template #left-icon>
                    <img :src="noticeImg" style="width: 32rpx; height: 32rpx" />
                  </template>
                  <text class="content">{{ `${deadList.length}个设备即将到期` }}</text>
                </nut-noticebar>
              </view>
            </nut-col>
            <!-- 塘口列表标题 -->
            <nut-col
              :span="24"
              class="pond m_t_15 view_f_between"
              :style="{ padding: '0 20rpx' }"
            >
              <view class="font_34 f_weight">塘口列表</view>
              <view id="addPondBtn" class="view_f" :style="{ gap: '10rpx' }">
                <nut-button
                  type="primary"
                  class="btn font_28"
                  size="small"
                  @click="addPond"
                  color="#E7F8F9"
                  :style="{ color: '#09B8C2 !important' }"
                >
                  <template #icon>
                    <Uploader size="18" />
                  </template>
                  <text class="font_32">新建塘口</text>
                </nut-button>
               
              </view>
            </nut-col>
          <!-- 模式一 -->
          <nut-col
            :span="24"
            v-if="mode == 0 && store.getUnLogin != 1"
            :style="{ padding: '0rpx 20rpx 20rpx 20rpx' }"
          >
            <scroll-view
              :scroll-y="true"
              :style="{
                height: m1_height * 2 + 'rpx',
                '-webkit-overflow-scrolling': 'touch',
                'overflow-scrolling': 'touch',
              }"
            >
              <nut-row v-if="pondList.length > 0" class="pond m_t_15">
                <nut-col
                  :span="24"
                  v-for="(item, index) in pondList"
                  :key="index"
                  class="m_d_15"
                  @click="toPondInfo(item)"
                >
                  <nut-cell-group>
                    <nut-cell>
                      <!-- 头部标题 -->
                      <view class="view_f_between">
                        <view class="font_32 f_weight c_222">{{ item.pondName }}</view>
                        <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"
                            v-else
                          >
                            空闲</nut-tag
                          >
                        </view>
                      </view>
                    </nut-cell>
                    <!-- 中部监测信息 -->
                    <nut-cell>
                      <nut-row>
                        <nut-col :span="24" v-if="item.deviceCount">
                          <nut-grid :column-num="item.num" square border>
                            <nut-grid-item class="grid">
                              溶解氧<text class="font_20">Mg/L</text>
                              <template #text>
                                <text
                                  v-if="!item.isAllDead"
                                  class="h_grid_content_5"
                                  :class="
                                    !item.up
                                      ? ''
                                      : alarmJudgeCode(item.warnCodeInfo.warnCode, 7)
                                      ? 'c_E22323'
                                      : ''
                                  "
                                  >{{
                                    item.up
                                      ? toDecimal(item.valueDissolvedOxygen, 2)
                                      : "--"
                                  }}</text
                                >
                                <text v-else class="h_grid_content_5">--</text>
                              </template>
                            </nut-grid-item>
                            <nut-grid-item class="grid">
                              水温<text class="font_20">(℃)</text>
                              <template #text>
                                <text
                                  v-if="!item.isAllDead"
                                  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
                                >
                                <text v-else class="h_grid_content_5">--</text>
                              </template>
                            </nut-grid-item>
                            <nut-grid-item class="grid">
                              饱和度<text class="font_20">(%)</text>
                              <template #text>
                                <text
                                  v-if="!item.isAllDead"
                                  class="h_grid_content_5"
                                  :class="
                                    !item.up
                                      ? ''
                                      : alarmJudgeCode(item.warnCodeInfo.warnCode, 10)
                                      ? 'c_E22323'
                                      : ''
                                  "
                                  >{{
                                    item.up ? toDecimal(item.valueSaturability, 2) : "--"
                                  }}</text
                                >
                                <text v-else class="h_grid_content_5">--</text>
                              </template>
                            </nut-grid-item>
                            <nut-grid-item class="grid" v-show="item.isPh">
                              PH<text class="font_20">(Ph)</text>
                              <template #text>
                                <text class="h_grid_content_5" v-if="!item.isAllDead">{{
                                  item.up ?toDecimal(item.valuePH, 2):'--'
                                }}</text>
                                <text v-else class="h_grid_content_5">--</text>
                              </template>
                            </nut-grid-item>
                            <nut-grid-item class="grid" v-show="item.isSa">
                              盐度<text class="font_20">(‰)</text>
                              <template #text>
                                <text class="h_grid_content_5" v-if="!item.isAllDead">{{
                                  item.up ?toDecimal(item.valueSalinity, 2):'--'
                                }}</text>
                                <text v-else class="h_grid_content_5">--</text>
                              </template>
                            </nut-grid-item>
                          </nut-grid>
                        </nut-col>
                        <nut-col v-else>
                          <view class="font_28">未绑定设备</view>
                        </nut-col>
                      </nut-row>
                    </nut-cell>
                    <nut-cell>
                      <nut-row>
                        <nut-col :span="10">
                          <view class="font_28"
                            >启用开关数量：<text class="c_17B4B2">{{
                              item.switchOpenCount
                            }}</text>
                          </view>
                        </nut-col>
                        <nut-col :span="14" class="c_E22323" v-if="item.ErrorMessage">
                          {{ item.ErrorMessage }}
                        </nut-col>
                      </nut-row>
                    </nut-cell>
                  </nut-cell-group>
                </nut-col>
              </nut-row>
              <view v-else>
                <nut-cell>
                  <nut-row>
                    <nut-col :span="24" v-if="store.getUnLogin == 1">
                      <nut-empty description="">
                        <template #image>
                          <img :src="pond404" />
                        </template>
                        <div style="margin-top: 10px">
                          <nut-button type="primary" @click="toLogin"
                            >登录/注册</nut-button
                          >
                        </div>
                      </nut-empty>
                    </nut-col>
                    <nut-col :span="24" v-else>
                      <nut-empty description="暂无塘口">
                        <template #image>
                          <img :src="pond404" />
                        </template>
                      </nut-empty>
                    </nut-col>
                  </nut-row>
                </nut-cell>
              </view>
            </scroll-view>
          </nut-col>
          <!-- 模式二 -->
          <nut-col
            class="pond_mode2 m_t_10"
            :span="24"
            v-if="mode == 1 && store.getUnLogin != 1"
            :style="{ padding: '0rpx 20rpx 20rpx 20rpx' }"
          >
            <nut-row v-if="pondList.length > 0">
              <!-- 切换选择塘口 -->
              <nut-col :span="24">
                <view :style="{ width: '100%' }">
                  <nut-radio-group
                    v-model="selPond"
                    direction="horizontal"
                    :style="{ flexWrap: 'wrap', gap: '10rpx' }"
                  >
                    <nut-radio
                      :label="item.id"
                      shape="button"
                      v-for="item in pondList"
                      :key="item.id"
                      >{{ item.pondName }}</nut-radio
                    >
                  </nut-radio-group>
                </view>
              </nut-col>
              <nut-col
                :span="24"
                class="topDiv m_t_5"
                :style="{ height: showChart ? '100%' : '100%' }"
              >
                <pond-info
                  v-model="selPond"
                  @getPondInfo="getPondInfo"
                  @addDevice="addDevice"
                  ref="pondChildInfo"
                  :type="1"
                />
              </nut-col>
            </nut-row>
            <view v-else>
              <nut-cell>
                <nut-col :span="24" v-if="store.getUnLogin == 1">
                  <nut-empty description="">
                    <template #image>
                      <img :src="pond404" />
                    </template>
                    <div style="margin-top: 10px">
                      <nut-button type="primary" @click="toLogin">登录/注册</nut-button>
                    </div>
                  </nut-empty>
                </nut-col>
                <nut-col :span="24" v-else>
                  <nut-empty description="暂无塘口">
                    <template #image>
                      <img :src="pond404" />
                    </template>
                  </nut-empty>
                </nut-col>
              </nut-cell>
            </view>
          </nut-col>
          <!-- 游客模式 -->
          <nut-col
            class="pond_mode2 m_t_10"
            :span="24"
            v-if="store.getUnLogin == 1"
            :style="{ padding: '0rpx 20rpx 20rpx 20rpx' }"
          >
            <nut-cell>
              <nut-col :span="24">
                <nut-empty description="">
                  <template #image>
                    <img :src="pond404" />
                  </template>
                  <div style="margin-top: 10px">
                    <nut-button type="primary" @click="toLogin">登录/注册</nut-button>
                  </div>
                </nut-empty>
              </nut-col>
            </nut-cell>
          </nut-col>
        </nut-row>
      </nut-config-provider>
    </nut-col>

    <!-- 添加设备弹框 -->
    <nut-dialog v-model:visible="bandDevShow" text-align="left" no-footer>
      <view class="d_body" :style="{ paddingBottom: '0px' }">
        <nut-row>
          <nut-col :span="24">
            <view class="view_f_between_2">
              <view class="d_title">绑定设备</view>
              <view class="font_36 c_def" @click="addDev">添加设备</view>
            </view>
          </nut-col>
          <nut-col :span="24">
            <nut-divider class="divider" />
          </nut-col>
          <nut-col :span="24" class="font_28 c_888">
            如将控制器开关转移至其它塘口，该开关的定时设置将保留，自动增氧设置将失效，如需自动增氧需要重新进行设置。
          </nut-col>
          <nut-col :span="24" v-if="deviceList.length > 0">
            <next-tree
              ref="qiantree"
              :selectParent="false"
              labelKey="deviceName"
              valueKey="id"
              :multiple="true"
              :treeData="deviceList"
              @confirm="onconfirm"
              childrenKey="listSwitch"
              border
              @cancel="oncancel"
              showChild
              isOpen
            />
          </nut-col>
          <nut-col :span="24" v-else>
            <nut-empty description="暂无设备">
              <template #image>
                <img :src="pond404" />
              </template>
            </nut-empty>
          </nut-col>
        </nut-row>
      </view>
    </nut-dialog>
    <!-- 弹出层提示 -->
    <nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" />
    <!-- 引导 -->
    <nut-tour
      v-model="showTour"
      :steps="steps"
      type="tile"
      location="bottom-end"
    ></nut-tour>
    <!-- 弹出添加设备提示 -->
    <nut-config-provider :theme-vars="themeVars2">
      <nut-dialog v-model:visible="alertShow" text-align="left" no-footer>
        <view :style="{ height: '100%' }" class="d_body">
          <nut-row>
            <nut-col :span="24" class="font_36 f_weight c_222">
              请选择添加设备方式
            </nut-col>
            <nut-col :span="24">
              <nut-divider class="divider" />
            </nut-col>
            <nut-col :span="24">
              <nut-button
                block
                type="primary"
                size="large"
                :style="{
                  fontWeight: 'bold',
                  fontSize: '14px !important',
                  marginTop: '20px',
                }"
                @click="goScan"
                >扫描二维码</nut-button
              >
              <nut-button
                block
                type="primary"
                size="large"
                :style="{
                  fontWeight: 'bold',
                  fontSize: '14px !important',
                  marginTop: '20px',
                }"
                @click="goInput"
                >输入设备号</nut-button
              >
            </nut-col>
          </nut-row>
        </view>
      </nut-dialog>
      <!-- 提醒扫码异常 -->
      <nut-dialog v-model:visible="errorShow" text-align="left" no-footer>
        <view :style="{ height: '100%' }">
          <view class="d_body">
            <nut-row>
              <nut-col :span="24" class="d_title" :style="{ textAlign: 'center' }">
                扫描识别失败，请前往手动录入
              </nut-col>
            </nut-row>
          </view>
          <view class="d_btn" :style="{ position: 'absolute' }">
            <nut-row>
              <nut-col
                :span="12"
                :style="{ border: '1px solid #eee', color: '#222' }"
                @click="errorShow = false"
              >
                取消
              </nut-col>
              <nut-col :span="12" :style="{ border: '1px solid #eee', color: '#15BBC5' }">
                <nut-button type="primary" shape="square" block @click="goInput"
                  >确定</nut-button
                >
              </nut-col>
            </nut-row>
          </view>
        </view>
      </nut-dialog>
    </nut-config-provider>
    <nut-config-provider :theme-vars="themeVars3">
      <!-- 公告列表信息 -->
      <nut-dialog
        v-model:visible="noticeOpen"
        text-align="left"
        no-footer
        :pop-style="{ maxWidth: '100%', maxHeight: '100%' }"
      >
        <nut-row>
          <nut-col
            :span="24"
            :style="{ textAlign: 'left', padding: '20rpx' }"
            @click="closeNotice"
          >
            <CircleClose />
          </nut-col>
        </nut-row>
        <nut-tabs
          v-model="noticeValue"
          direction="vertical"
          title-scroll
          style="height: 280px"
          name="tabName"
          v-if="noticeRows.length > 0"
        >
          <nut-tab-pane
            v-for="(item, index) in noticeRows"
            :key="index"
            :title="`${item.noticeTitle}`"
            :pane-key="index"
          >
            <nut-row>
              <nut-col :span="24" :style="{ height: '200px' }">
                <view v-html="item.noticeContent"></view>
              </nut-col>
              <nut-col :span="24">
                <view :style="{ textAlign: 'right' }"
                  >发布时间：{{ formatDateString(item.createTime, "yyyy-mm-dd") }}</view
                >
                <!-- <div>有效期至：{{formatDateMin(item.deadTime)}}</div> -->
              </nut-col>
            </nut-row>
          </nut-tab-pane>
        </nut-tabs>
        <nut-empty description="暂无公告" v-else></nut-empty>
      </nut-dialog>
    </nut-config-provider>
    <!-- 塘口详情 -->
    <nut-popup v-model:visible="pondShow" position="bottom">
      <view class="d_body">
        <nut-row>
          <nut-col :span="22" class="d_title" :style="{ textAlign: 'center' }">{{
            selPondName_2
          }}</nut-col>
          <nut-col :span="2" @click="closePond">
            <Close />
          </nut-col>
          <nut-col :span="24">
            <nut-divider class="divider" />
          </nut-col>
          <nut-col :span="24">
            <pond-info
              v-model="selPond_2"
              @addDevice="addDevice"
              ref="pondChildInfo"
              :type="2"
            />
          </nut-col>
        </nut-row>
      </view>
    </nut-popup>
  </nut-row>
</template>
<script setup lang="ts" name="Home">
import CustomNavigationBar from "@/components/custom-navigation-bar/index";
import nextTree from "@/components/tree/index";
import pondInfo from "@/components/other/index";
import { IconFont, Uploader, Close, CircleClose, Tips } from "@nutui/icons-vue-taro";
import { imgUrl } from "@/utils/imgUrl";
import Taro from "@tarojs/taro";
import QQMapWX from "@/utils/js-sdk/map/qqmap-wx-jssdk.min.js";
import { getPond1, noticeList, deviceDead } from "@/api/home";
import { PondListType } from "./types";
import { stateType } from "@/utils/types";
import { toDecimal, alarmJudgeCode, sortByField, formatDateString } from "@/utils/tools";
import { msgWarn } from "@/api/msg";
import { allDeviceList, bandDeviceToPond, deviceScan } from "@/api/device";
import { useRootUserStore } from "@/store/index";
definePageConfig({
  navigationStyle: "custom",
  disableScroll: false,
  enablePullDownRefresh: true,
  backgroundTextStyle: "dark",
});
const store: any = useRootUserStore();
// 防止重复检查登录状态
let isCheckingLogin = false;
// 防止重复弹窗
let isShowingLoginDialog = false;
// 导航拦信息
const navBarHeight = ref();
const windowInfo = Taro.getWindowInfo();
const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
const statusBarHeight: number = ref(windowInfo.statusBarHeight);
navBarHeight.value =
  menuButtonInfo.bottom -
  statusBarHeight.value +
  (menuButtonInfo.top - statusBarHeight.value);
// 其他
const c1 = `${imgUrl}c1.png`;
const c1_n = `${imgUrl}c1_n.png`;
const c2 = `${imgUrl}c2.png`;
const c2_n = `${imgUrl}c2_n.png`;
const c3 = `${imgUrl}c3.png`;
const c3_n = `${imgUrl}c3_n.png`;
const c_def = `${imgUrl}c_def.png`;
const location = `${imgUrl}location.png`;
const change = `${imgUrl}change.png`;
const phone = `${imgUrl}tel.png`;
const setting = `${imgUrl}setting.png`;
const noticeImg = `${imgUrl}noticeImg.png`;
const pond404 = `${imgUrl}zanwurenwu.png`;
// const notice = ref("有设备服务快到期，请尽快续费");
const themeVars = ref({
  noticebarLefticonMargin: "0px 5px",
  noticebarBoxPadding: "0px 5px",
  gridItemTextColor: "#222222",
  gridItemTextFontSize: "28rpx",
  gridItemTextMargin: "10px",
  gridItemContentBgColor: "#F5F9FC",
  gridItemContentPadding: "0px",
  radioButtonFontSize: "28rpx",
  radioLabelFontColor: "#000",
  radioLabelFontActiveColor: "#fff",
  radioLabelButtonBackground: "#09B8C2",
  radioLabelButtonBorderColor: "#09B8C2",
  switchWidth: "112rpx",
  switchHeight: "56rpx",
  switchLineHeight: "56rpx",
  switchInsideHeight: "40rpx",
  switchInsideWidth: "40rpx",
  switchInsideOpenTransform: "translateX(155%)",
  switchInsideCloseTransform: "translateX(20%)",
  noticebarAcrossHeight: "60rpx",
  gridBorderColor: "#E5EEF4",
  cellAfterBorderBottom: "0px",
  cellPadding: "20rpx",
  tabsHorizontalTitlesHeight: "60rpx",
});
const themeVars2 = ref({
  cellBoxShadow: "0px",
  cellPadding: "0",
  popupBorderRadius: "10rpx",
  cellDescColor: "#222222",
});
const themeVars3 = ref({
  dialogWidth: "92vw",
});
let qqmapsdk = new QQMapWX({
  key: "75RBZ-WQSYB-6KEUB-NCZME-D62T7-YIF4G",
});
// 选中的塘口id
const selPond = ref<number | string | undefined>(undefined);
// 多糖选中塘口id
const selPond_2 = ref<number | string | undefined>(undefined);
const selPondName_2 = ref<string | undefined>("塘口详情");
const visControl = ref(false);
// 展示塘口详情
const pondShow = ref(false);
// 控制器开关
const showChart = ref(true);
const pondList = ref<PondListType[]>([]);
// 子组件
const pondChildInfo = ref(null);
// 控制器列表
const mode = ref(1);
const state: stateType = reactive({
  msg: "",
  type: "text",
  center: true,
  show: false,
});
const bandDevShow = ref<boolean>(false);
const deviceList = ref<any[]>([]);
const deadList = ref<any[]>([]);
const bandDeviceList = ref<any[]>([]);
const showTour = ref<boolean>(false);
const steps = ref([
  {
    content: "请添加塘口",
    target: "addPondBtn",
  },
]);
// 当前控制器下开关列表
const controlInfo = ref<any>({
  deviceName: undefined,
  id: undefined,
  listSwitch: [],
});
const m1_height = ref(0);
// 添加设备信息
const alertShow = ref(false);
const errorShow = ref(false);
const params = reactive({
  pondId: [],
  pondName: "",
  devType: "1",
  devNum: "",
});
const city = ref("青岛市");
// 消息2分钟轮询定时器
const timer = ref<any>(null);
const notice = ref(null);
const noticeRows = ref<any[]>([]);
const noticeOpen = ref<boolean>(false);
const noticeValue = ref(0);
/** -----------------method start----------------- */
/** 下拉刷新 */
Taro.usePullDownRefresh(() => {
  Taro.startPullDownRefresh({
    complete: () => {
      // 默认
      pond1();
      getNotice();
      getDeviceDead();
      bandDevShow.value = false;
      if (mode.value == 1) {
        pond2();
      }
      // 模式一滚动条高度
      m1_height.value = Taro.getWindowInfo().windowHeight - 200;
      nextTick(() => {
        if (pondChildInfo.value) {
          if (alertShow.value) {
            pondChildInfo.value.hideTour(alertShow.value);
          }
          pondChildInfo.value.refresh();
        }
      });
      Taro.stopPullDownRefresh();
    },
  });
});
Taro.useDidShow(() => {
  // 检查登录状态
  checkLoginStatus();
  
  startPolling();
  // 默认
  pond1();
  getNotice();
  getDeviceDead();
  bandDevShow.value = false;
  if (mode.value == 1) {
    pond2();
  }
  // 刷新子组件数据
  nextTick(() => {
    if (pondChildInfo.value) {
      pondChildInfo.value.refresh();
    }
  });
  if (store.getUnLogin != 1 && store.getLoginStatus != 1) {
    // 位置解析
    // Taro.getLocation({
    //   type: "gcj02",
    //   success: function (res) {
    //     const latitude = res.latitude;
    //     const longitude = res.longitude;
    //     qqmapsdk.reverseGeocoder({
    //       location: `${latitude},${longitude}`,
    //       success: (res) => {
    //         const address_component = res.result.address_component;
    //         city.value = address_component
    //           ? address_component.city + "-" + address_component.district
    //           : "青岛市";
    //       },
    //     });
    //   },
    // });
  }
  // 模式一滚动条高度
  m1_height.value = Taro.getWindowInfo().windowHeight - 200;
  nextTick(() => {
    if (alertShow.value) {
      pondChildInfo.value.hideTour(alertShow.value);
    }
  });
  const tmplIds = [
    "g_FpveCvmPtV4ulFHTaUYnwng6Nke3AmEAspg16D8Ow",
    "R0qEUHhf5e6g21fIvC_v7x49qHfe2pCSJir9YG2haRc",
  ];
  if (store.getUnLogin != 1) {
    
  }
});
Taro.useDidHide(() => {
  stopPolling();
});
Taro.useUnload(() => {
  stopPolling();
});
// 查询公告
function getNotice(openType = 0) {
  noticeList().then((res) => {
    if (res.code == 200) {
      const nList: any = [];
      noticeRows.value = res.rows.sort(sortByField("priority", false));
      if (noticeRows.value.length > 0) {
        noticeRows.value.forEach((item: AnalyserOptions) => {
          const content: string = `${item.noticeTitle}：${item.noticeContent}`;
          nList.push(content);
        });
        if (openType == 0) {
          notice.value = nList[0];
          if (store.getNoticeRead == 0) {
            noticeOpen.value = true;
          } else if (store.getNoticeRead != noticeRows.value[0]["createTime"]) {
            noticeOpen.value = true;
          } else {
            noticeOpen.value = false;
          }
        }
      }
    }
  });
}
function handleSubscriptionStatus(status, tmplId, message) {
  if (status === "accept") {
  } else if (status === "reject") {
    requestUserSubscription([tmplId], "订阅消息", `请授权开通${message}`);
  } else if (status === "ban") {
  } else {
    requestUserSubscription([tmplId], "订阅消息", `请授权开通${message}`);
  }
}

function requestUserSubscription(tmplIds, title, content) {
  Taro.showModal({
    title: title,
    content: content,
    showCancel: false,
    success: function (modalRes) {
      if (modalRes.confirm) {
        // getDeviceTicket().then((res) => {
        // if (res.statusCode == 200) {
        const params = {
          tmplIds: tmplIds,
          // sn: `sn_${store.getUserId}`,
          // snTicket: `${res.data}`,
          // modelId: "q0B1qUL_hGwtcLxTMah3Rw"
        };
        Taro.requestSubscribeMessage({
          ...params,
          success: function (subscribeRes) {
            tmplIds.forEach((tmplId) => {
              if (subscribeRes[tmplId] === "accept") {
                state.show = true;
                state.msg = "订阅成功";
              }
            });
          },
        });
        // }
        // });
      }
    },
    
  });
}

function resUsetInfo() {
  pond1();
  getDeviceDead();
  bandDevShow.value = false;
  if (mode.value == 1) {
    pond2();
  }
}

function getWarnMsg() {
  const warnParams = ref({
    pageSize: 10,
    pageNum: 1,
  });
  const userId = Taro.getStorageSync("UserId");
  msgWarn({ ...warnParams.value, userId }).then((res: any) => {
    if (res.code == 200) {
      const unReadCount = res.rows ? res.rows.filter(item => !item.isRead).length : 0;
      if (unReadCount) {
        Taro.setTabBarBadge({
          index: 1, // tabBar的位置，从0开始计数
          text: unReadCount > 9 ? "9+" : String(unReadCount),
        });
      } else {
        Taro.removeTabBarBadge({
          index: 1,
        });
      }
    }
  });
}
function startPolling() {
  stopPolling(); // 防止多个轮询同时运行
  getWarnMsg();
  timer.value = setInterval(() => {
    getWarnMsg();
  }, 120000); // 每3秒执行一次
}
function stopPolling() {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
}

// 检查登录状态
function checkLoginStatus() {
  // 防止重复检查
  if (isCheckingLogin) {
    return;
  }
  
  // 游客模式直接跳过
  if (store.getUnLogin == 1) {
    return;
  }
  
  const token = Taro.getStorageSync('Access-Token');
  const userId = Taro.getStorageSync('UserId');
  const loginType = Taro.getStorageSync('LoginType');
  
  // 方式1：检查本地是否有token和userId
  if (!token || !userId) {
    isCheckingLogin = true;
    // 如果之前是微信登录（LoginType=1），尝试引导重新授权
    if (loginType === '1') {
      attemptAutoLogin();
    } else {
      // 非微信登录，提示用户重新登录
      showLoginExpiredDialog();
    }
    return;
  }
  
  // 方式2：通过接口验证token是否有效
  // 这里调用一个轻量级接口，如果返回401，request.ts会统一拦截处理
  verifyTokenValid();
}

// 验证token是否有效
function verifyTokenValid() {
  // 使用塘口列表接口来验证token
  getPond1().then((res: any) => {
    console.log('getPond1返回结果:', res);
    
    if (res && res.code === 200) {
      // token有效，正常继续
      console.log('登录状态有效');
      isCheckingLogin = false;
    } else if (res && (res.code === 401 || res.statusCode === 401)) {
      // token无效，主动弹窗提示
      console.log('检测到401，token已过期，弹出提示');
      isCheckingLogin = false;
      showLoginExpiredDialog();
    } else if (!res || res.code !== 200) {
      // 其他异常情况，也可能是token问题
      console.log('接口返回异常，code:', res?.code);
      isCheckingLogin = false;
      // 如果返回的不是200，可能也是登录问题
      if (res && res.msg && res.msg.includes('登录')) {
        showLoginExpiredDialog();
      }
    } else {
      // 其他错误码
      isCheckingLogin = false;
    }
  }).catch((error) => {
    // 接口调用失败
    console.log('登录状态检查失败，error:', error);
    isCheckingLogin = false;
    
    // 如果是401错误，也弹出提示
    if (error && (error.code === 401 || error.statusCode === 401)) {
      console.log('catch到401错误，弹出提示');
      showLoginExpiredDialog();
    }
  });
}

// 显示登录过期提示
function showLoginExpiredDialog() {
  // 防止重复弹窗
  if (isShowingLoginDialog) {
    console.log('登录过期弹窗已显示，跳过重复弹窗');
    return;
  }
  
  isShowingLoginDialog = true;
  console.log('显示登录过期弹窗');
  
  Taro.showModal({
    title: '提示',
    content: '登录信息已过期，请重新登录',
    showCancel: false,
    success: function (res) {
      if (res.confirm) {
        Taro.clearStorageSync();
        store.updateUnLogin(1);
        Taro.redirectTo({
          url: '/pages/login/index',
        });
      }
    },
    complete: function() {
      // 1秒后重置状态，允许再次弹窗
      setTimeout(() => {
        isShowingLoginDialog = false;
        isCheckingLogin = false;
      }, 1000);
    }
  });
}

// 尝试自动登录
function attemptAutoLogin() {
  // 防止重复弹窗
  if (isShowingLoginDialog) {
    return;
  }
  
  isShowingLoginDialog = true;
  console.log('显示重新授权弹窗');
  
  // 由于后端需要手机号授权code，无法实现完全静默登录
  // 直接提示用户重新授权
  Taro.showModal({
    title: '登录已过期',
    content: '需要重新授权获取手机号以继续使用',
    confirmText: '去授权',
    cancelText: '稍后再说',
    success: function (res) {
      if (res.confirm) {
        // 跳转到登录页，让用户重新授权
        Taro.clearStorageSync();
        store.updateUnLogin(1);
        Taro.redirectTo({
          url: '/pages/login/index',
        });
      } else {
        // 用户选择稍后，进入游客模式
        store.updateUnLogin(1);
        pond1();
      }
    },
    complete: function() {
      // 1秒后重置状态
      setTimeout(() => {
        isShowingLoginDialog = false;
        isCheckingLogin = false;
      }, 1000);
    }
  });
}
/////////////////////
function getPondInfo(e) {
  // Taro.nextTick(() => {
  //   if (selPond.value) {
  //     if (e && e.id && e.id == selPond.value) {
  //       if (e && e.listDetector && e.listDetector.length <= 0) {
  //         setTimeout(() => {
  //           showTour.value = alertShow.value ? false : true;
  //           steps.value = [
  //             {
  //               content: "请添加设备",
  //               target: "addDevice",
  //             },
  //           ];
  //         }, 500);
  //       }
  //     }
  //   }
  // });
}

// 切换模式
function changeMode() {
  mode.value = mode.value == 1 ? 0 : 1;
  if (mode.value == 0) {
    pond1();
  } else {
    pond2();
  }
}
// 塘口模式1
function pond1() {
  const userId = Taro.getStorageSync("UserId");
  getPond1().then((res: any) => {
    if (res.code == 200) {
      const pondIds = [];
      const rows = res.data || [];
      rows.forEach((item: any) => {
        pondIds.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;

        item.up = true;

      });
      pondList.value = rows;
      // 立即设置默认选中的塘口，并强制触发响应式更新
      if (rows.length > 0) {
        const firstPondId = rows[0]["id"]; // 保持原始类型
        if (!selPond.value || !pondIds.includes(selPond.value)) {
          // 延迟一帧确保 DOM 已渲染
          setTimeout(() => {
            selPond.value = firstPondId;
            console.log('已选中塘口:', selPond.value, '类型:', typeof selPond.value, '所有塘口:', rows.map(r => ({id: r.id, name: r.pondName})));
          }, 50);
        }
      } else {
        selPond.value = undefined;
      }
      setTimeout(() => {
        showTour.value = rows.length == 0 ? true : false;
      }, 500);
    }
  });
}
// 塘口模式2
function pond2() {
  if (selPond.value) {
    // 保持字符串格式避免精度丢失
    params.pondId = [String(selPond.value)];
    console.log('pond2 设置 pondId:', params.pondId);
  }
}
// 新建塘口
function addPond() {
  Taro.navigateTo({
    url: "/home/addPond",
  });
}
// 编辑塘口
function updatePond() {
  const pondId = mode.value == 1 ? selPond.value : selPond_2.value;
  if (pondId) {
    Taro.navigateTo({
      url: `/home/updatePond?id=${pondId}`,
    });
  } else {
    state.show = true;
    state.msg = "请先选择塘口";
  }
}

// 绑定设备页面
function addDevice() {
  loadDeviceList();
  bandDevShow.value = true;
}
// 加载设备列表
function loadDeviceList() {
   const userId = Taro.getStorageSync("UserId");
  const pondId = mode.value == 1 ? selPond.value : selPond_2.value;
  allDeviceList({ type: 1 ,rootUserId:userId}).then((res) => {
    if (res.code == 200) {
      if (res.data.length > 0) {
        res.data.forEach((r) => {
          r.disabled = false;
          r.checked = false;
          // r.lastRank = true;
          r.open = true;
          r.showChild = true;
          // 判断是否在当前选中的港口id
          if (r.pondInfo) {
            if (pondId == r.pondInfo.id) {
              r.checked = true;
            } else {
              r.disabled = true;
            }
          }
          if (r.deviceType == 2) {
            r.kzId = r.id;
            r.id = undefined;
            //r.id = r.deviceName;
          }
          if (r.listSwitch && r.listSwitch.length > 0) {
            r.listSwitch.forEach((rr) => {
              rr.deviceName = rr.switchName;
              rr.disabled = false;
              rr.checked = false;
              // 判断是否在当前选中的港口id
              if (rr.pondInfo) {
                if (pondId == rr.pondInfo.id) {
                  rr.checked = true;
                } else {
                  rr.disabled = true;
                }
              }
            });
          }
        });
        const ids: any = [];
        res.data.forEach((device, i) => {
          if (device.deviceType === 2 && device.isOxygenUsed) {
            ids.push(i);
          }
        });
        if (ids.length > 0) {
          ids.forEach((i) => {
            let newDevice = { ...res.data[i], deviceType: 1, listSwitch: [] }; // 修改deviceType并清空listSwitch
            newDevice.id = newDevice.kzId;
            res.data.push(newDevice);
          });
        }
        res.data.forEach((r) => {
          r.open = true;
          r.disabled = false;
          r.checked = false;
          // 判断是否在当前选中的港口id
          if (r.pondInfo) {
            if (pondId == r.pondInfo.id) {
              r.checked = true;
            } else {
              r.disabled = true;
            }
          }
        });
        res.data.sort(sortByField("deviceType", true));
        deviceList.value = res.data;
      } else {
        deviceList.value = [];
      }
    }
  });
}

// 取消绑定设备选择
function oncancel() {
  bandDevShow.value = false;
}
// 确定选择绑定的设备
function onconfirm(list) {
  bandDeviceList.value = list.list;
  const listDetectorId: any = [];
  const listSwitchId: any = [];
  list.list.forEach((res) => {
    if (res.source.deviceType) {
      if (res.source.id) {
        listDetectorId.push(res.source.id);
      }
    } else {
      listSwitchId.push(res.source.id);
    }
  });
  // 确定提示框
  Taro.showModal({
    title: "提示",
    content: "确认添加选中的设备？",
    success: function (res) {
      if (res.confirm) {
        const data = {
          pondId: mode.value == 1 ? selPond.value : selPond_2.value,
          listDetectorId,
          listSwitchId,
        };
        bandDeviceToPond(data)
          .then((res) => {
            if (res.code == 200) {
              state.show = true;
              state.msg = "操作成功";
              // 先关闭弹窗
              bandDevShow.value = false;
              // 延迟刷新数据，确保后端数据更新完成
              setTimeout(() => {
                // 先刷新塘口列表（会自动选中当前塘口）
                pond1();
                // 等待 pond1 完成后再刷新设备详情
                setTimeout(() => {
                  if (pondChildInfo.value && pondChildInfo.value.getDeviceList) {
                    pondChildInfo.value.getDeviceList();
                  }
                }, 500);
              }, 500);
            } else {
              // 操作失败也关闭弹窗
              bandDevShow.value = false;
              state.show = true;
              state.msg = res.msg || "绑定失败，请重试";
              state.type = "fail";
            }
          })
          .catch((error) => {
            // 网络错误也关闭弹窗
            bandDevShow.value = false;
            state.show = true;
            state.msg = "网络错误，请重试";
            state.type = "fail";
          });
      } else if (res.cancel) {
        bandDevShow.value = false;
      }
    },
  });
}
// 跳转到添加设备页面
function addDev() {
  bandDevShow.value = false;
  alertShow.value = true;
}
/** 添加设备逻辑start */
// 手动
function goInput() {
  alertShow.value = false;
  Taro.navigateTo({
    url: "/my/addDevice?pondId=" + selPond.value + "&page=home",
  });
}
/** 扫码识别 */
function goScan() {
  Taro.scanCode({
    success: (res) => {
      const result = res.result;
      deviceScan({ qrCode: result }).then((v) => {
        if (v.code == 200) {
          params.devType = String(v.data.deviceType);
          params.devNum = v.data.serialNum;

          // 成功前往添加设备页面
          submit();
        } else {
          errorShow.value = true;
          alertShow.value = false;
        }
      });
    },
    fail: () => {
      errorShow.value = true;
      alertShow.value = false;
    },
  });
}
// 进入不同设备添加页面
function submit() {
  if (params.pondId.length <= 0) {
    state.show = true;
    state.msg = "请选择塘口";
    return;
  }
  if (!params.devNum) {
    state.show = true;
    state.msg = "请输入设备号";
    return;
  }
  alertShow.value = false;
  showTour.value = false;
  
  // 传参前确保 pondId 为字符串
  const paramsToSend = {
    ...params,
    pondId: params.pondId.map(id => String(id))
  };
  console.log('home 准备传递的参数:', paramsToSend);
  
  if (params.devType == 1) {
    Taro.navigateTo({
      url: "/my/addDetector?params=" + encodeURIComponent(JSON.stringify(paramsToSend)) + "&page=home",
    });
  } else {
    Taro.navigateTo({
      url: "/my/addController?params=" + encodeURIComponent(JSON.stringify(paramsToSend)) + "&page=home",
    });
  }
}
/** 添加设备逻辑end-- */
// 查看塘口详情
function toPondInfo(e) {
  pondShow.value = true;
  selPond_2.value = e.id;
  selPondName_2.value = e.pondName;
}
// 关闭查看详情
function closePond() {
  pondShow.value = false;
  selPond_2.value = undefined;
  selPondName_2.value = "塘口详情";
}
/** 前往登录 */
function toLogin() {
  Taro.clearStorageSync();
  store.updateUnLogin(2);
  Taro.redirectTo({
    url: "/pages/login/index",
  });
}
// 查询设备到期
function getDeviceDead() {
  deviceDead().then((res) => {
    if (res.code == 200) {
      deadList.value = res.data;
      // if(res.data.length>0){
      //   Taro.showModal({
      //     title: '设备到期',
      //     content: '有设备即将到期，请及时续费',
      //     showCancel: true,
      //     confirmText: '续费',
      //     success: function (res) {
      //       if (res.confirm) {
      //         Taro.navigateTo({ url: `/my/deviceRecharge` });
      //       }
      //     }

      //   })
      // }
    }
  });
}
// 关闭公告
function closeNotice() {
  noticeOpen.value = false;
  if (noticeRows.value.length > 0) {
    if (store.getNoticeRead == 0) {
      store.updateNoticeRead(noticeRows.value[0]["createTime"]);
    } else if (store.getNoticeRead != noticeRows.value[0]["createTime"]) {
      store.updateNoticeRead(noticeRows.value[0]["createTime"]);
    }
  } else {
    store.updateNoticeRead(0);
  }
}
// 打开公告
function openNotice() {
  getNotice(1);
  noticeOpen.value = true;
}
// 跳转刀续费页面
function toPay() {
  Taro.navigateTo({
    url: "/my/deviceRecharge",
  });
}
/** -----------------method end------------------- */
</script>
<style lang="scss">
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  padding-bottom: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

.header-btn-container {
  padding: 20rpx !important;
  gap: 16rpx !important;
  display: flex !important;
  align-items: stretch !important;
  background: #fff !important;
  
  view {
    flex: 1;
    display: flex;
  }
}

.header-btn {
  border-radius: 8rpx !important;
  width: 100%;
  height: 72rpx !important;
  min-height: 72rpx !important;
  max-height: 72rpx !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  font-size: 28rpx !important;
  font-weight: 500 !important;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1) !important;
  }
}

.header-btn-warning {
  background: #ff8800 !important;
  background-color: #ff8800 !important;
}

.home_home {
  width: 100%;
  height: 100%;

  .container {
    width: 100vw;
    height: 100vh;
    background-image: url("https://www.yuceyun.cn/wechat/bg.png");
    background-color: #e5ebed;
    background-repeat: no-repeat;
    background-size: 100% 30%;
    margin: 0;
    .body {
      // 头部
      .btn {
        border-radius: 10px;
      }
      // 通知管理
      .nut-noticebar__page {
        border-radius: 15px;
      }

      .content {
        color: #ff6b00;
      }

      .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;
      }
      // 塘口管理
      .pond {
        .nut-cell-group__wrap {
          margin: 0px;
        }
      }

      // 模式2塘口管理
      .pond_mode2 {
        .nut-radio__button--active {
          background: linear-gradient(135deg, #09b8c2 0%, #06a0a9 100%) !important;
          border-radius: 10px;
          color: #fff !important;
          font-weight: bold;
          font-size: 30rpx !important;
          box-shadow: 0 6rpx 16rpx rgba(9, 184, 194, 0.6);
          transform: scale(1.08);
          transition: all 0.3s ease;
          border: 2px solid #09b8c2;
        }

        .nut-radio__button--normal {
          border-radius: 10px;
          background-color: #f5f6f7;
          color: #999;
          font-size: 28rpx;
          box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.06);
          transition: all 0.3s ease;
          border: 1px solid transparent;
        }

        .nut-radio--button {
          background-color: #f5f6f7;
          border-radius: 10px;
          margin-bottom: 10rpx;
          margin-right: 10rpx;
        }

        .nut-tab-pane {
          padding: 0px !important;
        }

        .t {
          width: 100%;
          height: 2px;
          background: #09b8c2;
          border-radius: 10px;
        }
      }
    }
  }

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

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

  .nut-grid {
    height: 140rpx;
  }

  .grid {
    .nut-grid-item__text {
      font-weight: 500;
      font-size: 28px;
      color: #222;
    }
  }

  .grid.active {
    color: #fff;

    .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;
  }

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

  .nut-popup--bottom {
    box-shadow: 0px 1px 7px 0px rgb(20, 20, 20);
    border-radius: 0px;
    max-height: 80vh;
    overflow-y: auto;
  }

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

  .nut-dialog {
    padding: 0;
  }

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

  .d_body {
    padding: 30px;

    height: 100%;

    .d_title {
      font-size: 36rpx;
      font-weight: bold;
      color: #222;
    }

    .d_content {
      font-size: 28rpx;
      color: #888888;
    }

    .d_c_title {
      font-size: 32rpx;
      color: #222;
    }
  }

  .d_btn {
    // position: absolute;
    bottom: 0px;
    width: 100%;
    font-size: 32rpx;
    // border: 1px solid #eee;
    height: 80px;
    text-align: center;
    line-height: 80px;
  }
}

/** 底部弹出层 */
.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;
  }
}

.charts {
  height: 400px;
  width: 100%;
}
</style>
