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

    <div class="map-box" data-testid="dashboard-map-box">
      <map-svg :mapList="mapList" data-testid="dashboard-map-svg"></map-svg>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
import { getHealthOverview, getHealthStatistic, getExceptionMonitor, getDusterAlarm } from "@/request/api/dashboard";
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: 90 },
  { color: "#08c733", percentage: 100 },
];

const chartData = ref(null)

const msgList = ref([
]);
const mapList = ref([]);

const customColorMethod = (percentage) => {
  if (percentage < 70) {
    return customColors[0].color;
  }
  if (percentage < 100) {
    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 healthStatistic = () => {
  getHealthStatistic().then(res => {
    chartData.value = res.data;
  })
};

const exceptionMonitor = () => {
  getExceptionMonitor().then(res => {
    msgList.value = res.data;
  })
}

const handleDusterAlarm = () => {
  getDusterAlarm().then(res => {
    mapList.value = res.data;
  })
}



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

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: #181d21;
      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: #CCC;
      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: #181d21;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
    padding: 16px;
    box-sizing: border-box;
  }
}
</style>
