
<template>
  <div id="space-chart"></div>
</template>

<script>
export default {
  name: "SpaceChart",
  props: ["spaceStatus", "remainDays"],
  data() {
    return {
      currentColor: "#fff",
      e: event,
      index: 0,
      mockdata: {
        pieNumData: [],
      },
    };
  },

  watch: {
    spaceStatus: function (value) {
      if (value != undefined) {
        console.log(value);
      }

      (this.mockdata.pieNumData = [
        {
          value: value.doc,
          name: this.$t("serviceDriveAuth['文件']"),
          days: value.endDate == 0 ? this.$t("serviceDriveAuth['永久授權']") : this.remainDays,
         
        },
        { value: value.video, name: this.$t("serviceDriveAuth['影片']"), days: this.remainDays },
        { value: value.image, name: this.$t("serviceDriveAuth['圖片']"), days: this.remainDays },
        {
          value: value.item + value.paper,
          name: this.$t("serviceDriveAuth['題目與試卷']"),
          days: this.remainDays
        },
        { value: value.other, name: this.$t("serviceDriveAuth['其他']"), days: this.remainDays },
        {
          value: value.student,
          name: this.$t("serviceDriveAuth['學生使用']"),
          days: this.remainDays
        },
        {
          value: value.teacher,
          name: this.$t("serviceDriveAuth['已分配至教師']"),
          days: this.remainDays
        },
        {
          value: value.unUsed > 0?Math.abs(value.unUsed):0,
          name: this.$t("serviceDriveAuth['未使用']"),
          days: this.remainDays
        },
      ]),
        this.drawLine(this.mockdata.pieNumData);
    },
  },
  methods: {
    byteToGibiByte(n) {
      //統一轉成ＧB 2的30次方
      return (n / Math.pow(2, 30)).toFixed(2);
    },

    drawLine(pieNumData) {
      //基于准备好的dom，初始化echarts实例
     
      let _this = this;
      let myChart = this.$echarts.init(document.getElementById("space-chart")); //绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(50,50,50,0.9)",
          borderColor: "#8D8D8D",
          borderWidth: 1,
          formatter: function (v) {
            if (v.color != "#48474c") _this._data.currentColor = v.color;
            else _this._data.currentColor = "white";
             //console.log(this) 
            return `
            <div class='chart-toolTip'> 
             <p id='color-title'  >${v.data.name}${_this.$t("serviceDriveAuth['空間']")}</p>
             <p class='title'>${v.data.name}${_this.$t("serviceDriveAuth['空間數']")}<span class='value'>&nbsp;${
              v.value / Math.pow(2, 20) < 1024
                ? (v.value / Math.pow(2, 20)).toFixed(2) + "&nbspMB"
                : (v.value / Math.pow(2, 30)).toFixed(2) + "&nbspGB"
            } </span></p>
             <p class='title'>${
               v.data.name
             }${_this.$t("serviceDriveAuth['空間比率']")}<span class='value'>&nbsp;${v.percent} %</span></p>

             
            `;
          },
        },
        /*legend: {
          show:false,
          animation:false,
          orient: "vertical",
          icon: "circle",
          top: 40,
          textStyle: {
            color: "white",
          },

          //抓值印在標籤上
          formatter: function (name) {
            let data = pieNumData;
            let total = 0; //回傳自行運算百分比
            let target;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            let arr = ((target / total) * 100).toFixed(2) + "%";
            //console.log(arr)
            return name + " \n " + arr;
          },
          right: 0,
        },*/
        color: [
          "#f862bb",
          "#f6d76d",
          "#65dcda",
          "#00f492",
          "#d6b8ff",
          "#89c4f4",
          "#ffab4b",
          "#48474c",
        ],

        series: [
          {
            type: "pie",
            radius: ["65%", "90%"],
            //right: 100,
            avoidLabelOverlap: true,
            hoverOffset: 0, //調整餅圖凸顯時的高度
            label: {
              show: false,
              position: "center",

              formatter:
                "{title1|{b}空間數}\n{num|{c}}{chracter|GB}\n\n{title2|空間占比}\n {percent|{d}}{chracter|%}",
              align: "left",
              rich: {
                title1: { fontWeight: "bold", padding: [2, 15, 2, 0] },
                title2: { fontWeight: "bold", padding: [2, 63, 2, 0] },
                chracter: {
                  fontSize: 10,
                  color: "white",
                  padding: [0, 0, 10, 3],
                },
                picon: {
                  color: "white",
                },
                percent: {
                  color: "white",
                  fontSize: 30,
                  fontWeight: "bold",
                },
                num: {
                  color: "white",
                  fontSize: 30,
                  fontWeight: "bold",
                  padding: [2, 0, 2, -20],
                },
              },
            },
            startAngle: 90,
            emphasis: {
              label: {
                show: false, //把餅圖中間預設顯示各類圖例的效果關掉
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#2b2b2e",
              borderWidth: 2,
            },
            data: this.mockdata.pieNumData,
          },
        ],
      });

      // Set the default selected highlights
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 7,
      });
      myChart.on("mousemove", function (e) {
        //在滑動時修改提示框樣式時的方法！！！
        document.getElementById("color-title").style.color =
          _this._data.currentColor;
      });

      myChart.on("mouseover", function (e) {
        //Highlight the hovering piece
        document.getElementById("color-title").style.color =
          _this._data.currentColor;
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: 0,
        });

        if (e.dataIndex == 0) {
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
        }
        if (e.dataIndex != this.index) {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.index,
          });
        }
      });
      myChart.on("mouseout", function (e) {
        this.index = e.dataIndex;
        document.getElementById("color-title").style.color =
          _this._data.currentColor;
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: this.index,
        });
      });
      //自適應
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        };
      }, 200);
    },
  },
};
</script>

<style lang='less'>
#space-chart {
 
  position: relative;
  height: 250px;
  margin-top: -20px;
  margin-bottom: 20px;
  margin-left: 2%;
  .chart-toolTip {
    padding: 10px;
    #color-title {
      font-weight: bolder;
    }
    .title {
      font-size: 10px;
      color: gray;
      font-weight: bolder;
    }
    .value {
      font-weight: bolder;
      color: white;
    }
  }
}
</style>