<template>
  <div class="preview-progress-pie">
    <PieChart :option="option" />

    {{ finishedValue()}}
  </div>
</template>

<script>
import { PieChart } from "dr-vue-echarts";
import { Random } from "mockjs";
export default {
  name: "PreviewProgressPie",
  components: {
    [PieChart.name]: PieChart,
  },
  props: ["itemID"],
  mounted() {
    this.option.series[0].data[0].value = Random.integer(60, 100);
    this.option.series[0].data[1].value = Random.integer(60, 100);
  },
  methods: {
    finishedValue() {
      if (this.$store.getters.getItemTitle.eventID == this.itemID) {
        if (this.$store.getters.getItemTitle.eventType == "preview") {
          this.option.series[0].data[0].value =
            this.$store.getters.getCurrentPassPhaseTest * 33;
          this.option.series[0].data[1].value =
            100 - this.$store.getters.getCurrentPassPhaseTest * 33;
        }
        else if(this.$store.getters.getItemTitle.eventType == "exam"){
          console.log(this.$store.getters.getCurrentfinishedSubject.length*33)
           this.option.series[0].data[0].value = this.$store.getters.getCurrentfinishedSubject.length*33;
            this.option.series[0].data[1].value =
            100 - this.$store.getters.getCurrentfinishedSubject.length*33;

        }
      }
    },
  },
  data() {
    return {
      option: {
        tooltip: {
          show: false,
          trigger: "none",
        },
        legend: {
          show: false,
        },
        series: [
          {
            //name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,

            labelLine: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "完成",
                itemStyle: {
                  color: "#24B880",
                },
                emphasis: {
                  itemStyle: {
                    color: "#24B880",
                  },
                },
                label: {
                  color: "#575757",
                  position: "center",
                  fontSize: "12",
                  fontWeight: "bold",
                  formatter: function (data) {
                    return data.percent.toFixed(0) + "%";
                  },
                },
              },
              {
                value: 0,
                name: "未完成",
                itemStyle: {
                  color: "#848484",
                },
                emphasis: {
                  itemStyle: {
                    color: "#848484",
                  },
                },
              },
            ],
          },
        ],
      },
    };
  },
};
</script>

<style>
</style>