<template>
  <el-card>
    <div class="searchForm">
      <el-date-picker
        v-model="dates"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        format="YYYY-MM-DD"
        style="width: 80% !important"
      />
      <el-button type="primary" class="ml-10" @click="fnGetData">
        搜索
      </el-button>
    </div>
    <div id="main3" />
  </el-card>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue";
import * as echarts from "echarts";
import { getChecklistCheck } from "@/request/index.js";
import dayjs from "dayjs";

let myChart3;
const dates = ref([
  dayjs().startOf("year").format("YYYY-MM-DD"),
  dayjs().endOf("year").format("YYYY-MM-DD"),
]);
const fnGetData = async () => {
  const resData = await getChecklistCheck({
    STARTTIME: dates.value[0],
    ENDTIME: dates.value[1],
  });
  myChart3 && myChart3.dispose();
  fnInitEcharts(resData.varList);
};
const fnInitEcharts = (data) => {
  myChart3 = echarts.init(document.querySelector("#main3"));
  const x_Data = [];
  const y_Data = [];
  for (let i = 0; i < data.length; i++) {
    x_Data.push(data[i].percentage);
    y_Data.push(data[i].name);
  }
  const option = {
    title: {
      text: "清单检查完成率统计（单位%）",
      top: "3%",
      textStyle: {
        fontSize: "14",
        color: "#fff",
        fontWeight: "700",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "15%",
      containLabel: true,
    },
    xAxis: {
      show: false,
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: y_Data,
      axisLabel: {
        color: "#fff",
      },
    },
    series: [
      {
        type: "bar",
        data: x_Data,
        label: {
          show: true,
          position: "right",
          color: "#fff",
        },
        barWidth: 15,
        itemStyle: {
          color: function (params) {
            const colorList = [
              "#ee6666",
              "#73c0de",
              "#3ca272",
              "#fc8452",
              "#9a60b4",
              "#5470c6",
            ];
            return colorList[params.dataIndex];
          },
        },
      },
    ],
  };
  myChart3.setOption(option);
};
onMounted(() => {
  fnGetData();
  window.onresize = function () {
    myChart3 && myChart3.resize();
  };
});
onBeforeUnmount(() => {
  myChart3 = null;
});
</script>

<style scoped lang="scss">
#main3 {
  width: 100%;
  height: 305px;
}
.searchForm {
  position: absolute;
  right: 10px;
  z-index: 1;
}
</style>
