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

<script>
import { chartOption, chartOptionMixins } from "@/views/analyse/custom/mixins";
import { random } from "@/utils";
import { getLineDataArr } from "@/utils/chart";

export default {
  mixins: [chartOptionMixins],
  name: "CRadar",
  data() {
    return {
      id: 'radar',
      max: 0
    }
  },
  mounted() {

  },
  methods: {
    getSum(x) {
      let sum = 0
      for (let i = 0; i < this.selected.y.length; i++) {
        sum += this.getDataCount(x, this.selected.y[i])
      }
      if (this.max < sum) {
        this.max = sum
      }
      return this.max
    },
    getMax() {
      let max = 0
      for (let i = 0; i < this.selected.x.length; i++) {
        let data = this.getDataCount(this.selected.x[i])
        if (max < data) {
          max = data
        }
      }
      return max
    },
    getOption() {
      const matrix = this.form.schema.y.field
      const enable = this.form.setting.config.line.enable
      let legend = matrix ? this.selected.y.map(item => item) : []
      let color = matrix ? this.selected.y.map(item => this.getColor(item)) : undefined
      let radar = this.selected.x.map(x => {
        return {
          name: x,
          max: matrix ? this.getSum(x) : this.getMax()
        }
      })
      let data = matrix ? this.selected.y.map(y => {
        return {
          value: this.selected.x.map(x => this.getDataCount(x, y)),
          name: y,
          label: this.getDataLabel()
        }
      }) : [{
        value: this.selected.x.map(x => this.getDataCount(x)),
        name: '总和',
        lineStyle: {
          color: this.getColor('主题颜色')
        },
        label: this.getDataLabel()
      }]
      if (matrix && enable) {
        const name = this.form.setting.config.line.name
        legend.push(name)
        data.push({
          value: getLineDataArr(this.form, this.selected, this.count),
          name: name,
          label: this.getDataLabel()
        })
        color.push(this.form.setting.config.line.color)
      }
      return {
        tooltip: {
          trigger: 'item'
        },
        color: color,
        legend: {
          data: legend
        },
        radar: {
          indicator: radar,
          axisName: {
            show: this.form.setting.show,
            fontFamily: this.form.setting.fontFamily,
            fontSize: this.form.setting.fontSize,
            fontWeight: this.form.setting.fontWeight ? 'bold' : 'normal',
            color: this.form.setting.fontColor,
          },
        },
        series: [{
          name: '',
          type: 'radar',
          data: data
        }]
      }
    },
  }
}
</script>
