<!-- 
    filename: ChipYield.vue
    author: liubin
    date: 2024-04-11 10:46:47
    description: 
-->

<template>
  <chart-container class="chip-yield-chart" :noScroll="true">
    <div
      ref="chart"
      style="width: 10vw"
      :style="{ height: vHeight + 'vh' }"
    ></div>
  </chart-container>
</template>

<script>
import ChartContainerVue from "../components/ChartContainer.vue";
import chartMixin from "../mixins/chart.js";
import screenfull from "screenfull";

export default {
  name: "ChipYield",
  components: { ChartContainer: ChartContainerVue },
  mixins: [chartMixin],
  props: {
    vHeight: {
      type: Number,
      default: 22,
    },
  },
  data() {
    return {
      isFullscreen: false,
      options: {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          containLabel: true,
        },
        tooltip: {},
        title: {
          text: "78%",
          left: "48%",
          top: "35%",
          textAlign: "center",
          textStyle: {
            fontWeight: 600,
            fontSize: 32,
            color: "#fffd",
          },
          subtext: "\u200224年累计产出\u2002",
          subtextStyle: {
            fontSize: 14,
            fontWeight: 100,
            color: "#fffd",
            align: "right",
          },
        },
        series: [
          // 背景 series - 2024计划
          {
            type: "pie",
            name: "2024目标",
            radius: ["70%", "85%"],
            center: ["50%", "52%"],
            emptyCircleStyle: {
              color: "#042c5f33",
            },
          },
          // 数据 series - 2024累计
          {
            type: "pie",
            radius: ["70%", "85%"],
            center: ["50%", "52%"],
            avoidLabelOvervlap: false,
            label: {
              show: false,
              // position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 90,
                name: "2024累计产出",
                selected: false,
                itemStyle: {
                  borderJoin: "round",
                  borderCap: "round",
                  borderWidth: 12,
                  borderRadius: "50%",
                  color: {
                    type: "linear",
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: "#4CF0E811" },
                      { offset: 1, color: "#4CF0E8" },
                    ],
                  },
                },
              },
              {
                value: 20,
                name: "-",
                itemStyle: { color: "transparent" },
                label: { show: false },
              },
            ],
          },
          // 数据 series2 - 2023累计
          {
            type: "pie",
            radius: ["55%", "70%"],
            center: ["50%", "52%"],
            avoidLabelOvervlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 90,
                name: "2023累计产出",
                selected: false,
                itemStyle: {
                  borderJoin: "round",
                  borderCap: "round",
                  borderWidth: 12,
                  borderRadius: "50%",
                  color: {
                    type: "linear",
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: "#1065ff66" },
                      { offset: 1, color: "#1065ff" },
                    ],
                  },
                },
              },
              {
                value: 20,
                name: "-",
                itemStyle: { color: "transparent" },
                label: { show: false },
              },
            ],
          },
        ],
      },
    };
  },
  watch: {
    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
    isFullscreen(val) {
      this.options.title.top = val ? "40%" : "35%";
      this.options.title.textStyle.fontSize = val ? 48 : 32;
      this.options.title.subtextStyle.fontSize = val ? 18 : 14;
      this.initOptions(this.options);
    },
  },
  mounted() {
    /** 清除 MIN_WIDTH, 此处比较特殊, 需要这么一步, 去除 chart mixin 的滚动条功能 */
    this.MIN_WIDTH = 0;
    this.initOptions(this.options);

    if (screenfull.isEnabled) {
      screenfull.on("change", () => {
        this.isFullscreen = screenfull.isFullscreen;
      });
    }
  },
};
</script>

<style scoped lang="scss">
.chip-yield-chart {
  height: 100%;
  flex: 1;
  overflow: visible;
}
</style>
