<template>
  <div class="new-radar">
    <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,
  countLabel,
  countLegendSelect,
} from "../../newStyles/styleCommon";
export default {
  name: "new-bar",
  props: ["option", "config", "modalSet", "index", "site"],
  data() {
    return {
      originData: [],
      chartOption: {
        tooltip: {
          trigger: "item",
          axisPointer: { type: "shadow" },
        },
        legend: {},
      },
      chart: null,
    };
  },
  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: "已经钻取到最后一层了",
        });
      }
      let key = this.modalSet.find((i) => i.zuan).key;
      let index = this.config[key].findIndex((i) => i.zuan);
      this.config.zuanStack.push(event.data.zuanName[index]);
      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 { dimension, measure } = this.config;
      dimension = dimension.filter((i) => !i.extJson.hidden);
      measure = measure.filter((i) => !i.extJson.hidden);
      let { radarLabelSize, radarLabelColor } = this.option;
      dimension = [...dimension];
      if (this.config.zuanFlag) {
        let zuanField = this.config.zuan[this.config.zuanLevel];
        let zuanIndex = dimension.findIndex((i) => i.zuan);
        dimension.splice(zuanIndex, 1, zuanField);
      }
      if (this.option.isTitleShow) {
        this.chartOption.title = title(this.option);
      }
      this.chartOption.legend = legend(this.option);
      let clearData = this.originData.map((i) => {
        let item = { key: [], value: [] };
        dimension.reduce((r, d) => {
          r.key.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 = { ...this.chartOption };
      let legengData = [];
      let seriesData = clearData.map((item) => {
        let name = item.key.join("-");
        legengData.push(name);
        return {
          name,
          value: item.value,
          zuanName: item.key,
          itemStyle: {},
        };
      });
      chartOption.legend.data = legengData;
      chartOption.series = [
        { type: "radar", data: seriesData, label: countLabel(this.option) },
      ];
      let indicator = measure.map((item, index) => {
        return {
          name: item.columnTitle,
          max: seriesData.reduce((r, i) => {
            return Math.max(r, i.value[index]);
          }, 0),
          min: seriesData.reduce((r, i) => {
            return Math.min(r, i.value[index]);
          }, 0),
        };
      });
      chartOption.radar = {
        indicator,
        center: ["50%", this.option.yPosition + "%"],
        shape: this.option.radarShape || "polygon",
        axisName: {
          fontSize: radarLabelSize,
          color: radarLabelColor,
        },
      };
      this.setSerieColor(chartOption);
      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);
    },
    // 设置系列颜色
    setSerieColor(chartOption) {
      let list = this.option.colorList.slice(
        0,
        chartOption.series[0].data.length
      );
      list.forEach(({ color1, color2, direction }, index) => {
        direction = direction || "top";
        if (color1 && color2) {
          chartOption.series[0].data[index].itemStyle.color = {
            x: direction == "left" ? 1 : 0,
            y: direction == "top" ? 1 : 0,
            x2: direction == "right" ? 1 : 0,
            y2: direction == "bottom" ? 1 : 0,
            colorStops: [
              { offset: 0, color: color1 },
              { offset: 1, color: color2 },
            ],
          };
        } else if (color1 && !color2) {
          chartOption.series[0].data[index].itemStyle.color = color1;
        }
      });
    },
    update(data) {
      this.originData = data;
      this.refresh();
    },
    initRender() {
      let option = {
        legend: {
          data: ["Allocated Budget", "Actual Spending"],
        },
        radar: {
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            tooltip: { show: true },
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "Allocated Budget",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "Actual Spending",
              },
            ],
          },
        ],
      };
      this.chart = echarts.init(document.getElementById(this.index));
      this.chart.setOption(option, true);
      this.$nextTick(this.chart.resize);
    },
  },
};
</script>
<style lang="scss">
.new-radar {
  .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>
