// TODO 界面设计改版
<script lang="ts" setup>
import * as echarts from "echarts";
import TotalChart from "@/components/Charts/totalChart.vue";
import PoleMonitorChart from "@/components/Charts/poleMonitorChart.vue";
import VehicleMonitorChart from "@/components/Charts/vehicleMonitorChart.vue";
import HomeSubTitle from "@/components/HeaderBar/homeSubTitle.vue";
// import HomeSubTitle from "@/components/HomeSubTitle.vue";
import BarChart from "./components/BarChart.vue";
import PieChart from "./components/PieChart.vue";
import PieChartSmall from "./components/PieChartSmall.vue";
import DeviceStatus from "./components/DeviceStatus.vue";
import {
  getDataOverviewApi,
  getDeviceInfowApi,
  getRecordFaultApi,
  getRealTimeApi,
} from "@/api/dashboard";
import { isSuccessApi } from "@/utils/forApi";
import AlarmModal from "./components/AlarmModal.vue";
import { useWebSocketStore } from "@/stores/websocketStore";
import { onBeforeRouteLeave } from "vue-router";

defineOptions({
  name: "DataOverviewWrap",
});
const xData = ref(["1月", "2月", "3月", "4月", "5月"]);
const legendArr = ["车体检测", "撑杆检测"];
const datas = ref([
  [1528, 1266.02, 2468.39, 2982.67, 3165.91],
  [2844.44, 6505.07, 8016.12, 6350.87, 1474.61],
]);
const colorArr = [
  ["#3B9FFE", "#5070F2"],
  ["#FFDA8D", "#FFAC06"],
];
const deviceStatus = ref({
  onlineCount: 50,
  errorCount: 10,
  outlineCount: 10,
});
const searchForm = reactive({
  car: "1",
  pole: "1",
});
const deviceTotal = ref(0);
const carDevice = ref({});
const poleDevice = ref({});
const excavatorDevice = ref({});
const carFaultTotal = ref([]);
const poleFaultTotal = ref([]);
const imageFault = ref([]);
const activeBtn = ref("month");
const isAlarmOpen = ref<Boolean>(false); //详情弹窗
const currentRow = ref<Record<string, any>>({}); // 当前选中行
const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表

const websocketStore = useWebSocketStore();
// 监听 messages 的变化
watch(
  () => websocketStore.messages,
  (newMessages: string[], oldMessages: string[]) => {
    if (newMessages?.length > 0 && !isAlarmOpen.value) {
      currentRow.value = newMessages[newMessages?.length - 1];
      currFileList.value = newMessages[newMessages?.length - 1]?.images;
      isAlarmOpen.value = true;
    }
  },
  { deep: true, immediate: true }
);

const getList = async (dateType: string = "month") => {
  activeBtn.value = dateType;
  const res = await getDataOverviewApi({ dateType });
  if (isSuccessApi(res)) {
    const { data } = res;
    datas.value[0] = data.appearance;
    datas.value[1] = data.pole;
    if (dateType === "month") {
      xData.value = data.dateArr.map((item: any) => {
        if (dateType === "month") {
          return item + "月";
        }
      });
    } else {
      xData.value = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
    }
    // console.log(data, 'getList_data')
  }
};
const getDeviceInfo = async () => {
  try {
    const res = await getDeviceInfowApi();
    if (isSuccessApi(res)) {
      const { data } = res;
      deviceTotal.value = data.deviceTotal;
      carDevice.value = data.appearance;
      poleDevice.value = data.pole;
      excavatorDevice.value = data.excavator;
      // deviceStatus.value = data
    }
  } catch (error) {
    console.error("获取设备信息出错:", error);
  }
};
const getPoleFault = async () => {
  try {
    const res = await getRecordFaultApi({
      dateType: "month",
      value: searchForm.pole,
      type: "pole",
    });
    if (isSuccessApi(res)) {
      const { data } = res;
      poleFaultTotal.value = data;
      // deviceStatus.value = data
      console.log(data);
    }
  } catch (error) {
    console.error("获取设备信息出错:", error);
  }
};
const getCarFault = async () => {
  try {
    const res = await getRecordFaultApi({
      dateType: "month",
      value: searchForm.car,
      type: "appearance",
    });
    if (isSuccessApi(res)) {
      const { data } = res;
      carFaultTotal.value = data;
      // deviceStatus.value = data
      console.log(data);
    }
  } catch (error) {
    console.error("获取设备信息出错:", error);
  }
};

const getRealTime = async () => {
  try {
    const res = await getRealTimeApi({ deviceType: "" });
    if (isSuccessApi(res)) {
      const { data } = res;
      imageFault.value = data;
      // deviceStatus.value = data
      console.log(data);
    }
  } catch (error) {
    console.error("获取设备信息出错:", error);
  }
};
onBeforeRouteLeave(() => {
  isAlarmOpen.value = false;
  currentRow.value = {};
  currFileList.value = [];
});
onMounted(() => {
  getList();
  getDeviceInfo();
  getCarFault();
  getPoleFault();
  getRealTime();
});
</script>
<template>
  <div class="flex data-overview-wrap">
    <!-- 检测总量汇总 -->
    <div class="grid-container">
      <div class="grid-item">
        <div class="module-header">
          <HomeSubTitle title="检测总量汇总" >
            <template #extra>
              <div>
                <el-button
                  type="primary"
                  class="month-btn"
                  @click="getList('month')"
                  :class="{ 'active-btn': activeBtn === 'month' }"
                >
                  月
                </el-button>
                <el-button
                  class="week-btn"
                  @click="getList('week')"
                  :class="{ 'active-btn': activeBtn === 'week' }"
                >
                  周
                </el-button>
              </div>
            </template>
          </HomeSubTitle>
        </div>
        <div class="chart-container">
          <TotalChart
            :xData="xData"
            :legendArr="legendArr"
            :datas="datas"
            :colorArr="colorArr"
          />
        </div>
      </div>
      <div class="grid-item">
        <div class="module-header">
          <HomeSubTitle title="车体监测" >
            <template #extra>
              <el-select
                v-model="searchForm.car"
                placeholder="时间"
                class="custom-select"
                @change="getCarFault()"
              >
                <el-option label="1月" value="1"></el-option>
                <el-option label="2月" value="2"></el-option>
                <el-option label="3月" value="3"></el-option>
                <el-option label="4月" value="4"></el-option>
                <el-option label="5月" value="5"></el-option>
                <el-option label="6月" value="6"></el-option>
                <el-option label="7月" value="7"></el-option>
                <el-option label="8月" value="8"></el-option>
                <el-option label="9月" value="9"></el-option>
                <el-option label="10月" value="10"></el-option>
                <el-option label="11月" value="11"></el-option>
                <el-option label="12月" value="12"></el-option>
              </el-select>
            </template>
          </HomeSubTitle>
        </div>
        <div class="chart-container chart-pie-bg">
          <!-- <PieChart :data="carFaultTotal" :colors="[
              '#FF7C09',
              '#0032FF',
              '#04FFF2',
              '#D19EFF',
              '#FF0103',
              '#9EFFF3',
            ]" /> -->
          <VehicleMonitorChart />
        </div>
      </div>
      <div class="grid-item">
        <div class="module-header">
          <HomeSubTitle title="撑杆监测">
            <template #extra>
              <el-select
                v-model="searchForm.pole"
                placeholder="时间"
                class="custom-select"
                @change="getPoleFault()"
              >
                <el-option label="1月" value="1"></el-option>
                <el-option label="2月" value="2"></el-option>
                <el-option label="3月" value="3"></el-option>
                <el-option label="4月" value="4"></el-option>
                <el-option label="5月" value="5"></el-option>
                <el-option label="6月" value="6"></el-option>
                <el-option label="7月" value="7"></el-option>
                <el-option label="8月" value="8"></el-option>
                <el-option label="9月" value="9"></el-option>
                <el-option label="10月" value="10"></el-option>
                <el-option label="11月" value="11"></el-option>
                <el-option label="12月" value="12"></el-option>
              </el-select>
            </template>
          </HomeSubTitle>
        </div>
        <div class="chart-container chart-pie-bg">
          <PoleMonitorChart />
          <!-- <PieChartSmall :data="poleFaultTotal" :colors="['#9DFFF3', '#FFA179']" /> -->
        </div>
      </div>
    </div>
    <!-- 中部检测模块 -->
      <div class="onTime-monitor-box">
        <div class="module-header fg-title">
          实时监测画面
        </div>
        <div class="monitor-images">
          <div class="monitor-images-left monitor-images-item">
            <img :src="imageFault[0]?.url" />
            <div class="fault-info">{{ imageFault[0]?.fault_type }}</div>
          </div>
          <div class="monitor-images-right monitor-images-item">
            <img :src="imageFault[1]?.url" />
            <div class="fault-info">{{ imageFault[1]?.fault_type }}</div>
          </div>
          <div class="monitor-images-left monitor-images-item">
            <img :src="imageFault[0]?.url" />
            <div class="fault-info">{{ imageFault[0]?.fault_type }}</div>
          </div>
          <div class="monitor-images-right monitor-images-item">
            <img :src="imageFault[1]?.url" />
            <div class="fault-info">{{ imageFault[1]?.fault_type }}</div>
          </div>
        </div>
      </div>
    <!-- 设备信息 -->
    <div class="grid-container">
      <div class="module-header">
        <HomeSubTitle title="设备信息">
        </HomeSubTitle>
      </div>
      <div class="device-info">
        <div class="total-device">
          <div class="device-icon"></div>
          <div class="device-count">
            <div>设备总数</div>
            <div class="count-number">{{ deviceTotal }}</div>
          </div>
        </div>
        <div class="device-list">
          <div class="device-card">
            <div class="mb-3">车体检测设备: {{ carDevice?.total || 0 }}</div>
            <DeviceStatus :deviceStatus="carDevice" />
          </div>
          <div class="device-card">
            <div class="mb-3">撑杆检测设备: {{ poleDevice?.total || 0 }}</div>
            <DeviceStatus :deviceStatus="poleDevice" />
          </div>
          <div class="device-card">
            <div class="mb-3">
              钩机检测设备: {{ excavatorDevice?.total || 0 }}
            </div>
            <DeviceStatus :deviceStatus="excavatorDevice" />
          </div>
        </div>
      </div>
    </div>
    <AlarmModal
      v-model:value="isAlarmOpen"
      :info="currentRow"
      :image="currFileList"
      @close="isAlarmOpen = false"
    />
  </div>
</template>
<style scoped lang="scss">
@import url("./DataOverview.scss");
</style>