<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">98%</div>
        <div>
          <div class="indicators-item">布袋健康度</div>
          <el-progress :percentage="percentageO" :color="customColorMethod" />
        </div>
        <div>
          <div class="indicators-item">脉冲阀健康度</div>
          <el-progress :percentage="percentageT" :color="customColorMethod" />
        </div>
        <div>
          <div class="indicators-item">提升阀健康度</div>
          <el-progress :percentage="percentageTh" :color="customColorMethod" />
        </div>
      </div>
      <div class="line-box">
        <div class="title">健康度指数</div>
        <chart-line></chart-line>
      </div>
    </div>

    <div class="map-box">
      <img src="@/assets/map.png" alt="" />
      <div class="spot-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import msgItem from "./components/msg-item.vue";
import chartLine from "./components/chart-line.vue";

const percentageO = ref(20);
const percentageT = ref(62);
const percentageTh = ref(90);

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

const route = useRoute();
const router = useRouter();

const msgList = ref([
  {
    title: "3#除尘器",
    content: "三仓室存在轻微泄漏",
    time: "05-18 12:00",
  },
  {
    title: "2#除尘器",
    content:
      "除尘器脉冲阀故障或者提升阀故障",
    time: "05-18 08:00",
  },
  {
    title: "3#除尘器",
    content: "三仓室存在轻微泄漏",
    time: "05-18 07:00",
  },
  {
    title: "2#除尘器",
    content: "除尘器脉冲阀故障或者提升阀故障",
    time: "05-18 05:00",
  },
  {
    title: "3#除尘器",
    content: "三仓室存在轻微泄漏",
    time: "05-18 03:00",
  },
  {
    title: "2#除尘器",
    content: "除尘器脉冲阀故障或者提升阀故障",
    time: "05-18 02:00",
  },
  {
    title: "2#除尘器",
    content: "除尘器脉冲阀故障或者提升阀故障",
    time: "05-18 01:00",
  },
  {
    title: "3#除尘器",
    content: "三仓室存在轻微泄漏",
    time: "05-17 11:00",
  },
  {
    title: "2#除尘器",
    content: "除尘器脉冲阀故障或者提升阀故障",
    time: "05-16 02:00",
  },
]);

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

onMounted(async () => {});

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;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      display: block;
      width: auto;
      height: 100%;
    }
  }
}
</style>
