<template>
  <div class="backbone">
    <div>
      <h3>风场分析完成率</h3>
      <div id="main" style="width: 260px; height: 160px"></div>
    </div>
    <div>
      <h3>异常设备概览</h3>
      <div class="BOX">
        <div style="display: flex">
          <div class="YC01">
            <strong>
              {{ equipment?.errCounrt ? equipment.errCounrt : 0 }}</strong
            >
            <span>异常总数</span>
          </div>
          <div class="YC02">
            <strong>
              {{
                equipment?.errCountInCurrentMonth
                  ? equipment.errCountInCurrentMonth
                  : 0
              }}</strong
            >
            <span>本月异常</span>
          </div>
        </div>
        <div style="display: flex">
          <div class="YC02">
            <strong class="textred">
              {{
                equipment?.errCountNotDeal ? equipment.errCountNotDeal : 0
              }}</strong
            >
            <span>未处理异常</span>
          </div>
          <div class="YC02">
            <strong class="texyellow">
              {{
                equipment?.errDeviceCount ? equipment.errDeviceCount : 0
              }}</strong
            >
            <span>异常设备数</span>
          </div>
          <div class="YC03"></div>
        </div>
      </div>
    </div>
    <div>
      <h3 style="margin: 8px 0">异常数据信息</h3>
      <p class="titleYC"><span>风场名称</span><span>风机信息</span></p>
      <Tabroll
        :table-data="YCtableData"
        :shujuloading="shujuloading"
        :columns="YCtableColumns"
        :column-widths="YCcolumnWidths"
        :max-height="120"
      ></Tabroll>
    </div>
    <div>
      <h3 style="margin: 8px 0">性能分析操作记录</h3>
      <p class="titleJQ">
        <span>名字</span><span>日期</span><span>操作记录</span>
      </p>
      <Tabroll
        :table-data="tableData"
        :shujuloading="shujuloading"
        :columns="tableColumns"
        :max-height="120"
        :column-widths="columnWidths"
      ></Tabroll>
    </div>
  </div>
</template>

<script>
import { queryStatistics, queryOptionRecords } from "@/api/ledger.js";
import * as echarts from "echarts";
import Tabroll from "./tabroll.vue";

export default {
  props: {
    maplistArr: {
      type: Object,
      default: () => ({}),
    },
    defaultdata: {
      type: Object,
      default: () => ({}),
    },
  },

  watch: {
    maplistArr: {
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          // 检查maplistArr是否有值
          console.log("Map list updated:", newVal);
          this.getStatistics();
          this.getOptionRecords();
        }
      },
      immediate: true, // 立即执行一次handler
      deep: true, // 深度监听对象内部变化
    },
  },
  components: {
    Tabroll,
  },
  data() {
    return {
      myChart: null,
      YCtableData: [],
      shujuloading: false,
      YCtableColumns: [{ prop: "fieldName" }, { prop: "engineName" }],
      YCcolumnWidths: {
        fieldName: 120,
      },
      tableData: [],
      tableColumns: [
        { prop: "optionByName" },
        { prop: "createTime" },
        { prop: "optionContent" },
      ],
      columnWidths: {
        optionByName: 60,
        createTime: 100,
      },
      equipment: {
        analysisedCount: 0,
        analysisingCount: 0,
        noAnalysisCount: 0,
      },
    };
  },
  created() {},
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById("main");
      this.myChart = echarts.init(chartDom);
      this.updateChart();
    },
    updateChart() {
      var option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            var percent = params.percent.toFixed(2) + "%";
            return `${params.name}: ${params.value} (${percent})`;
          },
        },
        legend: {
          orient: "vertical",
          left: "left",
          top: "30%",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            center: ["60%", "50%"],
            data: [
              {
                value: this.equipment.analysisedCount,
                name: "已完成",
                itemStyle: { color: "#7ECF51" },
              },
              {
                value: this.equipment.analysisingCount,
                name: "进行中",
                itemStyle: { color: "#EECB5F" },
              },
              {
                value: this.equipment.noAnalysisCount,
                name: "未开始",
                itemStyle: { color: "#E16757" },
              },
            ],
          },
        ],
      };
      this.myChart.setOption(option);
    },
    getStatistics() {
      let DataObject = {
        codeNumber: this.maplistArr.codeNumber,
        codeType: this.maplistArr.codeType,
      };
      queryStatistics(DataObject).then((res) => {
        this.YCtableData = res.data.errList || [];
        this.equipment = res.data || {};
        this.updateChart(); // Update chart after data is received
      });
    },
    getOptionRecords() {
      let DataObject = {
        codeNumber: this.maplistArr.codeNumber,
        codeType: this.maplistArr.codeType,
      };
      queryOptionRecords(DataObject).then((res) => {
        this.tableData = res.data || [];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.backbone {
  width: 300px;
  color: #fff;
  background: #008080;
  // height: 100%;
  // height: 95%;
  border-radius: 5px;
  padding: 20px;
}

.BOX {
  background: #004f5f;
  display: flex;
  padding-left: 10px;
  flex-wrap: wrap;
  padding-bottom: 15px;
}

.YC01 {
  width: 154px;
  height: 60px;
  background-image: url("../../../../assets/001.png");
  background-size: 154px 60px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 15px;
  margin-top: 15px;
  text-align: center;

  strong {
    display: block;
    font-size: 26px;
    color: #4bffff;
  }

  span {
    display: block;
    font-size: 12px;
  }
}

.YC02 {
  width: 70px;
  height: 60px;
  background-image: url("../../../../assets/002.png");
  background-size: 70px 60px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 15px;
  margin-top: 15px;
  text-align: center;

  .textred {
    color: #d9001b;
  }

  .texyellow {
    color: #facd91;
  }

  strong {
    display: block;
    font-size: 26px;
    color: #4bffff;
  }

  span {
    display: block;
    font-size: 12px;
  }
}

.YC03 {
  width: 70px;
  height: 60px;
}

.Tabtab {
  font-size: 12px;
}

::v-deep.el-table__cell {
  padding: 2px 0 !important;
}

::v-deep.el-table .el-table__cell {
  padding: 2px 0 !important;
}

::v-deep.el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: clip !important;
}

.titleYC {
  font-size: 14px;
  background: #214e5d;
  padding: 5px 0;

  span:nth-child(1) {
    margin: 0 70px 0 10px;
  }
}

.titleJQ {
  font-size: 14px;
  background: #214e5d;
  padding: 5px 0;

  span:nth-child(1) {
    margin: 0 15px 0 10px;
  }

  span:nth-child(2) {
    margin: 0 45px 0 30px;
  }
}
</style>
