<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';;
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
const animationDuration = 2600;
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      required: true,
    },
  },
  data() {
    return {
      chart: null,
      config: {
        // tooltip: {
        // },
        radar: {
          top: 10,
          radius: "66%",
          center: ["50%", "42%"],
          splitNumber: 8,
          splitArea: {
            areaStyle: {
              color: "rgba(127,95,132,.3)",
              opacity: 1,
              shadowBlur: 45,
              shadowColor: "rgba(0,0,0,.5)",
              shadowOffsetX: 0,
              shadowOffsetY: 15,
            },
          },
          indicator: [
            // { name: "服务接诊量指数-接诊量1586人次/年(★★★★★)", max: 5 },
            // { name: "单次服务费用指数(◼◼◼◼)", max: 5 },
            // { name: "服务病例严重指数(★★★)", max: 5 },
            // { name: "服务供应指数(★★★★★)", max: 5 },
            // { name: "信任度指数(★★★★★)", max: 5 },
            // { name: "老年人偏好指数(★★★★★)", max: 5 },
          ],
        },
        series: [
          {
            type: "radar",
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: "rgba(0,0,0,.2)",
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1,
              },
            },
            data: [
              {
                value: [],
              },
            ],
            animationDuration: 2600,
          },
        ],
      },
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    getIcon(icon, n) {
      if (!icon || !n) return "";
      let str = "";
      Array.apply(null, Array(Math.round(n))).forEach(() => {
        str += icon;
      });
      return `(${str})`;
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions(chartData) {
      if (!chartData.data) return;
      let option = {};
      option = this.config;
      const series = chartData.data.map((v) => {
        let max = v.max || 5; //标准值
        let val = v.value > max ? max : v.value; //实际值
        return {
          name: `${v.name}${this.getIcon(v.icon, val)}`,
          value: Number(val),
          max,
        };
      });
      option.radar.indicator = series;
      option.series[0].data[0].value = series.map((_) => _.value);
      this.chart.setOption(option);
    },
  },
};
</script>