<template>
  <div class="new-bar-single">
    <div :id="index" class="base">饼状图</div>
    <div
      class="zuan"
      v-show="config.zuanFlag && config.zuanLevel > 0"
      :style="`color:${option.zuanFontColor}`"
    >
      <i
        class="el-icon-back"
        @click="onZuanBack"
        style="cursor: pointer; margin-right: 10px"
      >
      </i>
      {{ config.zuanStack.join(` ${option.zuanFenge} `) }}
    </div>
  </div>
</template>
<script>
import { legend, title, countLegendSelect } from "../../newStyles/styleCommon";
export default {
  name: "new-pie",
  props: ["option", "config", "modalSet", "index", "site"],
  data() {
    return {
      originData: [],
      chartOption: {
        title: { textStyle: {} },
        tooltip: { trigger: "item" },
        legend: { type: "scroll" },
        grid: {},
        series: [],
      },
      chart: null,
      breadcrumb: [],
      breadcrumbStep: 0,
    };
  },
  watch: {
    site: {
      handler() {
        if (this.chart) {
          this.chart.resize();
        }
      },
      deep: true,
    },
    option: {
      handler() {
        if (this.originData.length) {
          this.refresh();
        }
      },
      deep: true,
    },
  },
  methods: {
    handleClick(event) {
      if (this.config.zuanLevel + 1 >= this.config.zuan.length) {
        return this.$message({
          type: "warning",
          message: "已经钻取到最后一层了",
        });
      }
      this.config.zuanStack.push(event.data.name);
      this.config.zuanLevel += 1;
      this.$emit("preview");
    },
    onZuanBack() {
      if (this.config.zuanLevel <= 0) return;
      this.config.zuanLevel -= 1;
      this.config.zuanStack = this.config.zuanStack.slice(
        0,
        this.config.zuanLevel
      );
      this.$emit("preview");
    },
    refresh() {
      let option = this.option;
      let { dimension, measure } = this.config;
      dimension = [...dimension].filter((i) => !i.extJson.hidden);
      measure = measure.filter((i) => !i.extJson.hidden);
      if (this.config.zuanFlag) {
        let zuanField = this.config.zuan[this.config.zuanLevel];
        let zuanIndex = dimension.findIndex((i) => i.zuan);
        dimension.splice(zuanIndex, 1, zuanField);
      }
      let clearData = this.originData.map((i) => {
        let item = { name: [], value: [] };
        dimension.reduce((r, d) => {
          r.name.push(i[d.columnTitle]);
          return r;
        }, item);
        measure.reduce((r, d) => {
          r.value.push(parseFloat(i[d.columnTitle] || 0));
          return r;
        }, item);
        return item;
      });
      let chartOption = JSON.parse(JSON.stringify(this.chartOption));
      chartOption.title = title(option);
      chartOption.legend = legend(option);
      chartOption.series = {
        name: dimension[0].columnTitle,
        type: "pie",
        center: [
          `${option.pieGridLeft || 30}%`,
          `${option.pieGridRight || 60}%`,
        ],
        radius: option.pieIsRing
          ? [`${option.pieRingRadius}%`, `${option.pieArea || 65}%`]
          : `${option.pieArea || 70}%`,
        roseType: option.roseType ? "area" : "",
        data: clearData.map((d, index) => {
          let itemStyle = {};
          if (
            option.colorList.length &&
            option.colorList[index] &&
            option.colorList[index].color1
          ) {
            if (option.colorList[index].color2) {
              let direction = option.colorList[index].direction || "top";
              let directionArr = [
                direction == "left" ? 1 : 0,
                direction == "top" ? 1 : 0,
                direction == "right" ? 1 : 0,
                direction == "bottom" ? 1 : 0,
              ];
              itemStyle = {
                color: new echarts.graphic.LinearGradient(...directionArr, [
                  {
                    offset: 0,
                    color: option.colorList[index].color1,
                  },
                  {
                    offset: 1,
                    color: option.colorList[index].color2 || "",
                  },
                ]),
              };
            } else {
              itemStyle = {
                color: option.colorList[index].color1,
              };
            }
          }
          return { name: d.name[0], value: d.value, itemStyle: itemStyle };
        }),
        itemStyle: { borderRadius: option.borderRadius || 0 },
        label: {
          color: option.labelFontColor || "#ffffff",
          show: option.isLabel,
          position: option.labelPosition,
          alignTo: "labelLine",
          formatter: function (data) {
            return `${!option.isWeidu ? "" : data.data.name} ${
              !option.isZhibiao
                ? ""
                : data.value[0].toFixed(`${option.zbxsw || 0}`)
            } ${
              !option.isBfb
                ? ""
                : data.percent.toFixed(`${option.bfb || 0}`) + "%"
            }`;
          },
          rich: { time: { fontSize: 10, color: "#999" } },
        },
        labelLine: {
          show: option.pieLabelLineShow,
          smooth: option.pieLabelLineSmooth,
          length: option.pieLabelLineLength || 10,
          length2: option.pieLabelLineLength2 || 10,
        },
        animationType: "scale",
        animationEasing: "elasticOut",
        animationDelay: function () {
          return Math.random() * 200;
        },
      };
      chartOption.legend.data = chartOption.series.data.map((i) => i.name);
      countLegendSelect(this.option, chartOption);
      this.chart = echarts.init(document.getElementById(this.index));
      this.chart.off("click", this.handleClick);
      if (this.config.zuanFlag) {
        this.chart.on("click", this.handleClick);
      }
      this.chart.setOption(chartOption, true);
    },
    update(data) {
      this.originData = data;
      this.refresh();
    },
    initRender() {
      let option = {
        title: {
          show: false,
          text: "",
          left: "auto",
          textStyle: { color: "#000", fontSize: 14, fontWeight: "normal" },
        },
        tooltip: { trigger: "item" },
        legend: {
          show: false,
          orient: "horizontal",
          left: "clean",
          top: "auto",
          type: "scroll",
          textStyle: { fontSize: 12 },
        },
        grid: {
          containLabel: true,
          left: "1%",
          top: "10%",
          right: "1%",
          bottom: "1%",
        },
        series: {
          name: "星期",
          type: "pie",
          radius: 80,
          roseType: "",
          data: [
            { name: "星期二", value: [182251], itemStyle: {} },
            { name: "星期六", value: [3521], itemStyle: {} },
            { name: "星期日", value: [8937], itemStyle: {} },
            { name: "星期三", value: [174065], itemStyle: {} },
            { name: "星期四", value: [165844], itemStyle: {} },
            { name: "星期五", value: [191055], itemStyle: {} },
            { name: "星期一", value: [156441], itemStyle: {} },
          ],
          itemStyle: { borderRadius: 0 },
          label: {
            color: "rgba(0, 0, 0, 1)",
            show: true,
            alignTo: "labelLine",
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15,
            rich: { time: { fontSize: 10, color: "#999" } },
          },
          labelLine: { length: 15, length2: 0, maxSurfaceAngle: 80 },
          animationType: "scale",
          animationEasing: "elasticOut",
        },
      };
      this.chart = echarts.init(document.getElementById(this.index));
      this.chart.setOption(option, true);
      this.$nextTick(this.chart.resize);
    },
  },
};
</script>
<style lang="scss">
.new-bar-single {
  .base {
    width: 100%;
    height: calc(100% - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .zuan {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 20px;
    padding: 0 10px;
    font-size: 12px;
  }
}
</style>
