<template>
  <div class="pie-chart-progress">
    <div ref="chart" class="chart-container"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import { getStatistics } from "@/api/ticket";
export default {
  props: {
    data1: {
      type: Number,
      required: true,
      default: 0,
    },
    data2: {
      type: Number,
      required: true,
      default: 100,
    },
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      console.log(this.data1,this.data2);
      //   getStatistics().then((res) => {
      //     const { hasNumberOfPlacements, numberOfPlacements } =
      //       res.d.projectProgress;
      //     console.log(hasNumberOfPlacements, numberOfPlacements);
      //     const pieData = Math.floor(
      //       (hasNumberOfPlacements / numberOfPlacements) * 100
      //     );
      //   });
      const total = 100;
      const pieData = this.data2 !== 0 ? Math.floor((this.data1 / this.data2) * 100) : 0;
      const chartContainer = this.$refs.chart;
      const chart = echarts.init(chartContainer);
      const options = {
        tooltip: {
          show: false,
          trigger: "item",
          formatter: "{a} : {a} ({a}%)",
        },
        title: {
          text: pieData + "%" + "\n" + "项目进度" + "\n",
          top: "38%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#3E3E3E",
          },
        },
        
        color: [200 > 100 - 300 ? "#ba2e2b" : "#33a0ff", "#0d2854"],
        legend: {
          x: "40%",
          top: "50%",
          itemHeight: 10, // 图例的高度
          itemGap: 8, // 图例之间的间距
          // data: ['磁盘使用率' + pieData + '%']
        },
        series: [
          {
            center:["50%","50%"],
            name: "磁盘使用率" + pieData + "%",
            type: "pie",
            radius: ["50%", "70%"],
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              label: {
                color: "#fff ",
                show: false,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: pieData, // 需要显示的数据
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      textStyle: { color: "#3c4858", fontSize: "18" },
                    },

                    color: "#8A7EFF", //200 > 100 - 300 ? "#ba2e2b" : "#33a0ff",
                  },
                },
              },
              {
                value: total - pieData,
                itemStyle: {
                  normal: {
                    color: "#DEE1E5",
                  },
                },
              },
            ],
          },
        ],
      };
      chart.setOption(options);
    },
  },
  watch: {
    data1: {
      deep: true,
      handler: function () {
        console.log("watch");
        this.createChart();
      },
    },
    data2: {
      deep: true,
      handler: function () {
        console.log("watch");
        this.createChart();
      },
    },
  },
};
</script>
<style scoped>
.chart-container {
  width: 250px;
  height: 250px;
}
</style>
