<template>
  <Echart
    :options="options"
    height="100%"
    width="100%"
  />
</template>

<script>
  import { countSize } from '@/utils/index.js'
  /**
   * 雷达图
   */
  import Echart from '@/common/echart'
  export default {
    name: 'Radar1',
    components: {
      Echart,
    },
    props: {
      title:{
        type: String,
        default: ''
      }, // 主标题
      subtitle:{
        type: String,
        default: ''
      }, // 子标题
      name:{
        Object,
        default:()=>{
          return {
            show: true,
            color: '#fff',
            fontSize: 12
          }
        }
      }, // 标题样式
      cdata: {
        type: Array,
        default: () => ([])
      },
      legendData:{
        type: Array,
        default: ()=>{
          // return ["平均指标", "我的指标"]
          return []
        }
      },
      indicator:{
        type: Array,
        default:()=>{
          [
            { name: "服务态度", max: 10 },
            { name: "产品质量", max: 10 },
            { name: "任务效率", max: 10 },
            { name: "售后保障", max: 10 }
          ]
        }
      }, // 指示器，用来指定雷达图的多个维度
      axisLineColors:{
        type: Array,
        default:()=>{
          return ['#f5b44d','#28f8de']
        }
      },// 坐标轴线渐变颜色
      splitLineColors:{
        type: Array,
        default:()=>{
          return ['#43dfa2','#28f8de']
        }
      }// 坐标轴线渐变颜色
    },
    watch: {
      cdata: {
        handler () {
          this.refreshChart()
        },
        immediate: true,
        deep: true
      },
      title(){
        this.refreshChart()
      },
      subtitle(){
        this.refreshChart()
      },
      indicator: {
        handler () {
          this.refreshChart()
        },
        immediate: true,
        deep: true
      },
      legendData: {
        handler () {
          this.refreshChart()
        },
        immediate: true,
        deep: true
      }
    },
    data () {
      return {
        options: {},
      }
    },
    methods:{
      // 刷新表格
      refreshChart(){
        this.options = {
          title: {
            text: this.title,
            textStyle: {
              color: "#D3D6DD",
              fontSize: countSize(0.1),
              fontWeight: "normal"
            },
            subtext: this.subtitle,
            subtextStyle: {
              color: "#fff",
              fontSize: 16
            },
            top: 'auto',
            left: 'auto'
          },
          legend: {
            // top: 120,
            // left: 80,
            top: 'auto',
            orient: "vertical",
            itemGap: 15,
            itemWidth: 12,
            itemHeight: 12,
            data: this.legendData,
            textStyle: {
              color: "#fff",
              fontSize: countSize(0.1)
            }
          },
          tooltip: {
            trigger: "item"
          },
          radar: {
            center: ["50%", "50%"], // 圆心坐标
            radius: "40%", // 半径
            name: this.name, // 指示器名称
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {offset: 0, color: this.axisLineColors[0]}, // 0%处的颜色
                    {offset: 1, color: this.axisLineColors[1]} // 100%处的颜色
                  ]
                }, // 轴线渐变颜色设置
                opacity: 0.6 // 轴线透明度
              }
            }, // 坐标轴线相关设置
            splitLine: {
              lineStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {offset: 0, color: this.splitLineColors[0]}, // 0%处的颜色
                    {offset: 1, color: this.splitLineColors[1]} // 100%处的颜色
                  ]
                },
                opacity: 0.6
              }
            }, // 坐标轴在grid中的分隔线
            splitArea: {
              areaStyle: {
                color: "#fff",
                opacity: 0.1,
                shadowBlur: 25,
                shadowColor: "#000",
                shadowOffsetX: 0,
                shadowOffsetY: 5
              }
            }, //分割区域样式
            indicator: this.indicator // 用来指定雷达图中的多个维度
          },
          // grid: {
          //   left: 90,
          //   right: 80,
          //   bottom: 40,
          //   top: "60%"
          // },
          series: [
            {
              name: "",
              type: "radar",
              symbolSize: 0, // 标记大小
              data: this.cdata.map(item=> {
                return {
                  value: item.data,
                  name: item.name,
                  itemStyle: {
                    normal: {
                      // color: "#f8d351"
                      color: item.color
                    }
                  },
                  areaStyle: {
                    normal: {
                      color: item.color,
                      shadowBlur: 25,
                      shadowColor: item.shadowColor?'#000000':'#000000',
                      shadowOffsetX: 0,
                      shadowOffsetY: -10,
                      opacity: 1
                    }
                  }
                }
              })
            },
          ]
        }
      }
    }

  };
</script>