<template>
  <div class="dashboard-container">
    <div class="header">
      <div class="msg-box">
        <div class="title">AI智能监测</div>
        <msg-item :msgList="msgList"></msg-item>
      </div>
      <div class="indicators-box">
        <div class="title">综合健康度</div>
        <div class="indicators-num" :style="{ color: customColorMethod(average) }">{{ average }}%</div>
        <div>
          <div class="indicators-item">布袋健康度</div>
          <el-progress :percentage="bag" :color="customColorMethod" />
        </div>
        <div>
          <div class="indicators-item">脉冲阀健康度</div>
          <el-progress :percentage="pulseValve" :color="customColorMethod" />
        </div>
        <div>
          <div class="indicators-item">提升阀健康度</div>
          <el-progress :percentage="poppetValve" :color="customColorMethod" />
        </div>
      </div>
      <div class="line-box">
        <div class="title">健康度指数</div>
        <chart-line :chartData="chartData"></chart-line>
      </div>
    </div>

    <div class="map-box">
      <map-svg></map-svg>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
import { getHealthOverview, getHealthStatistic, getExceptionMonitor } from "@/request/api/dashboard";
import { useRoute, useRouter } from "vue-router";
import msgItem from "./components/msg-item.vue";
import chartLine from "./components/chart-line.vue";
import mapSvg from "./components/map-svg.vue";

const average = ref(100);
const bag = ref(100);
const pulseValve = ref(100);
const poppetValve = ref(100);

const customColors = [
  { color: "#ff6a6a", percentage: 60 },
  { color: "#f5c701", percentage: 80 },
  { color: "#08c733", percentage: 100 },
];

const chartData = ref(null)
const route = useRoute();
const router = useRouter();

const msgList = ref([
]);

const customColorMethod = (percentage) => {
  if (percentage < 60) {
    return customColors[0].color;
  }
  if (percentage < 90) {
    return customColors[1].color;
  }
  return customColors[2].color;
};

const healthOverview = () => {
  getHealthOverview().then(res => {
    average.value = Number(res.data.average.split('%')[0])
  bag.value = Number(res.data.bag.split('%')[0])
  pulseValve.value = Number(res.data.pulseValve.split('%')[0])
  poppetValve.value = Number(res.data.poppetValve.split('%')[0])
  })
  // const res = {
  //   "data": {
  //     "average": "20%",
  //     "bag": "10%",
  //     "pulseValve": "20%",
  //     "poppetValve": "30%"
  //   },
  //   msg: "访问成功",
  //   success: true,
  //   code: 1
  // }

}

const healthStatistic = () => {
  getHealthStatistic().then(res => {
    chartData.value = res.data;
  })
  // const res = {
  //   "data": [
  //     {
  //       "date": "2025-05-01",
  //       "healthDegree": "75"
  //     },
  //     {
  //       "date": "2025-05-02",
  //       "healthDegree": "68"
  //     }
  //   ],
  //   "msg": "访问成功",
  //   "success": true,
  //   code: 1,
  // };
};

const exceptionMonitor = () => {
  getExceptionMonitor().then(res => {
    msgList.value = res.data;
  })
//   const res = {
//     "data": [
//     {
//       "date": "2025-05-01 10:00",
//       "dusterName": "3#除尘器",
//       "message": "三仓室存在轻重泄露"
//     },
//     {
//       "date": "2025-05-01 10:00",
//       "dusterName": "3#除尘器",
//       "message": "三仓室存在轻重泄露"
//     }
//     ],
//     msg: "访问成功",
//     success: true,
//     code: 1
//   }
//   msgList.value = res.data;
}

onMounted(async () => {
  healthOverview();
  healthStatistic();
  exceptionMonitor();
});

onBeforeUnmount(() => { });
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  height: calc(100% - 14px);
  // background: #ffffff;
  // border-radius: 6px;
  // box-shadow: 0px 3px 6px 0px rgba(13,15,18,0.10);
  // padding: 1rem;
  box-sizing: border-box;

  .header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 15rem;

    &>div {
      background: #ffffff;
      border-radius: 6px;
      box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
      padding: 16px;
      box-sizing: border-box;
    }

    .title {
      font-size: 18px;
      font-weight: normal;
      color: #83868b;
      line-height: 22px;
      margin-bottom: 10px;
    }

    .msg-box {
      width: calc(38% - 16px);
      height: 100%;
    }

    .indicators-box {
      width: 24%;
      height: 100%;

      .indicators-num {
        font-size: 37px;
        font-weight: bold;
        color: #08c733;
        line-height: 44px;
        margin-bottom: 10px;
      }

      .indicators-item {
        height: 22px;
        font-size: 15px;
        font-weight: normal;
        color: #919399;
        line-height: 22px;
      }
    }

    .line-box {
      width: calc(38% - 16px);
      height: 100%;
    }
  }

  .map-box {
    position: relative;
    width: 100%;
    height: calc(100% - 16rem);
    margin-top: 1rem;
    background: #f5f5f5;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
    padding: 16px;
    box-sizing: border-box;
  }
}
</style>
