<template>
  <div>
    <div ref="lineChartRef" v-loading="loading" class="chart" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    // 获取数据的接口方法
    getDataFunc: {
      type: Function,
      default: () => {}
    },
    // chartConfig: {
    //   type: Object,
    //   default: ()=>{
    //     return {}
    //   }
    // },

    // 查询日期范围(公共查询条件)
    searchTime: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 获取到的数据是否需要特殊处理（已废弃）
    specialHandling: {
      type: Boolean,
      default: false
    },
    // 图表标题
    title: {
      type: String,
      default: ''
    },
    // 查询条件(图表内置查询条件，配置中写死，不支持动态更新)
    searchParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 显示数据的key（x代表横坐标，y代表纵坐标显示的值）
    showKeys: {
      type: Object,
      default: () => {
        return {
          x: '',
          y: ''
        }
      }
    },
    // 单位（目前是饼图专用）
    unit: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      myChart: {},
      loading: false,
      queryCount: 0 // 用来判断是否是最后一次返回的数据，方式频繁切换条件造成图表异步查询到的数据不正确
    }
  },
  watch: {
    // chartConfig: {
    //   handler: function(newData) {
    //     if(newData) {
    //       this.$nextTick(()=>{
    //         this.renderChart()
    //       })
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  created() {},
  methods: {
    getChartData() {
      const flag = ++this.queryCount
      this.loading = true
      this.getDataFunc({ ...this.searchTime, ...this.searchParams }).then(res => {
        if (res.success && flag === this.queryCount) {
          const info = res.data.map(item => {
            return {
              value: item[this.showKeys.y],
              name: item[this.showKeys.x]
            }
          })
          this.getChartConfig(info)
          this.loading = false
        }
      }).catch(e => {
        this.loading = false
        console.log(e)
      })
    },
    getChartConfig(list) {
      const option = {
        color: ['#3FA6FD', '#EC7489', '#37D77A', '#FF9D4F', '#948FF6', '#67EAF0', '#faec69', '#FF6666', '#FB75DA', '#78B9FB'],
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            const dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:linear-gradient(-90deg, ${params.color.colorStops[0].color}, ${params.color.colorStops[1].color})"></span>`
            const result = dotHtml + params.name + ' ' + params.value + this.unit + ' ' + params.percent + '%'
            return result
          }
        },
        legend: {
          bottom: 50,
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            hoverAnimation: true,
            radius: [64, 124],
            center: ['50%', '40%'],
            // itemStyle: {
            //   borderRadius: 10
            // },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold'
            //   }
            // },
            // label: {
            //   show: false,
            //   position: 'center'
            // },
            data: list,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [
                    { c1: '#4180FF', c2: '#799FFF' },
                    { c1: '#20B4F6', c2: '#46DAF9' },
                    { c1: '#14CC76', c2: '#4EDE7D' },
                    { c1: '#8B6AEA', c2: '#979BFA' },
                    { c1: '#8DEFF4', c2: '#4EE6EE' },
                    { c1: '#FFE95F', c2: '#F4EC08' },
                    { c1: '#FFA35D', c2: '#FF891E' },
                    { c1: '#EA8FA1', c2: '#EE5A70' }
                  ]
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: colorList[params.dataIndex].c1
                  }, {
                    offset: 1,
                    color: colorList[params.dataIndex].c2
                  }])
                }
              }
            }
          }
        ]
      }
      // this.$emit('update:chartConfig', option)
      this.myChart = echarts.init(this.$refs.lineChartRef)
      this.myChart.setOption(option)
    }
    // renderChart() {
    //   this.myChart = echarts.init(this.$refs.lineChartRef)
    //   this.myChart.setOption(this.chartConfig)
    // }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  // height: 500px;
  height: 25vw;
  min-height: 360px;
}
</style>
