<template>
  <div class="">
    <div class="card">
      <div
        class="card-body"
        :style="`background-color:${item.color}`"
        v-for="(item, index) in topList"
        :key="index"
      >
        <div class="icon">
          <i :class="item.icon"></i>
        </div>
        <div class="other">
          <div class="title">{{ item.title }}</div>
          <div class="num">{{ item.num }}</div>
          <div class="line"></div>
          <div class="msg">{{ item.msg }}</div>
        </div>
      </div>
    </div>
    <div class="table">
      <div class="date">
        <div id="chart1" style="width: 100%; height: 500px"></div>
      </div>
      <div class="per">
        <div id="chart2" style="width: 100%; height: 500px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { chartInfo } from "@/api/job.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      myChart: {
        chart1: null,
        chart2: null,
      },
      topList: [
        {
          title: "设备总数",
          icon: "el-icon-s-home",
          num: 3,
          color: "#00C0EF",
          msg: "调度中心运行的任务数量",
        },
        {
          title: "调度次数",
          icon: "el-icon-s-home",
          num: 0,
          color: "#F39C12",

          msg: "调度中心触发的调度次数",
        },
        {
          title: "执行器数量",
          icon: "el-icon-s-home",
          num: 0,
          color: "#00A65A",
          msg: "调度中心在线的执行器机器数量",
        },
      ],
    };
  },
  mounted() {
    this.handleChartInfo();
  },
  methods: {
    async handleChartInfo() {
      let res = await chartInfo({});
      this.chartInfo = res.content;
      if (this.myChart.chart1 != null) {
        this.myChart.chart1.dispose();
      }
      let chartDom = document.getElementById("chart1");
      this.myChart.chart1 = echarts.init(chartDom);
      let option;
      option = {
        title: {
          text: "日期分布图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["成功", "失败", "进行中"],
        },
        xAxis: {
          type: "category",
          data: this.chartInfo.triggerDayList,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "成功",
            data: this.chartInfo.triggerDayCountSucList,
            type: "line",
          },
          {
            name: "失败",
            data: this.chartInfo.triggerDayCountFailList,
            type: "line",
          },
          {
            name: "进行中",
            data: this.chartInfo.triggerDayCountRunningList,
            type: "line",
          },
        ],
      };
      option && this.myChart.chart1.setOption(option);

      if (this.myChart.chart2 != null) {
        this.myChart.chart2.dispose();
      }
      let chart2Dom = document.getElementById("chart2");
      this.myChart.chart2 = echarts.init(chart2Dom);
      let option2;
      option2 = {
        title: {
          text: "成功比例图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.chartInfo.triggerCountSucTotal, name: "成功" },
              { value: this.chartInfo.triggerCountFailTotal, name: "失败" },
              {
                value: this.chartInfo.triggerCountRunningTotal,
                name: "进行中",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && this.myChart.chart2.setOption(option2);
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  .card-body {
    width: 33%;
    display: flex;
    height: 100px;
    .icon {
      width: 100px;
      height: 100px;
      min-width: 100px;
      font-size: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background-color: rgba($color: #37383a, $alpha: 0.15);
    }
    .other {
      padding: 12px;
      color: #fff;
      width: 100%;
      .line {
        background: #fff;
        width: 100%;
        height: 1px;
        margin: 8px 0;
      }
    }
  }
}
.table {
  display: flex;
  width: 100%;
  margin-top: 48px;
  .date {
    width: 60%;
  }
  .per {
    width: 40%;
  }
}
</style>