<template>
  <div class="EchartsWarp">
    <div v-if="data" :id="`canvas`+key"></div>
  </div>
</template>

<script>

export default {
  name: 'ChartTypeBase',
  props: {
    // key 默认随机数s
    key: {
      type: String,
      default: ()=>{
        return  Math.random().toString(36).substr(2)
      }
    },
    type: {
      type: String,
      default: 'bar'
    },
    /**
     // 示例数据 普通柱状图/普通折线图 {key,value} or {key,{value:value,其他数据}
     // {
     //   Mon: 100,
     //   Tue: {
     //   itemStyle: {
     //     color: '#5470c6'
     //   },
     //   value :200
     // }
     // }
     // 柱状堆叠 / 折线堆叠
     // product 代表每组的名称 / product 代表每条线的名称
     // [{ product: 'Matcha Latte', key1: 43.3, key2: 85.8, key3: 93.7 }]
     **/
    data: {
      type: [Object, Array],
      default: () => {
        return undefined
      }
    },
    color: {
      type: Array,
      default: () => {
        return undefined
      }
    },
    title: {
      type: String,
      default: ''
    },
    subtext: {
      type: String,
      default: ''
    },
    left: {
      type: String,
      default: 'left'
    },
    // 折线图是否平滑
    smooth: {
      type: Boolean,
      default: true
    },
    // 圆饼图尺寸
    radius: {
      type: [String, Array],
      default: () => {
        return ['50%', '0%']
      }
    },
    // 圆饼图是否改为玫瑰图
    rosetype: {
      type: String,
      default: ''
    },
    // 自定义传参
    mixinsdata: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 自定义传参
    mixinslegend: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 自定义传参
    mixinsitemstyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      myChart: undefined
    }
  },
  watch: {
    data: {
      handler: function (val, oldVal) {
        this.myEcharts();
      },
      deep: true
    }
  },
  methods: {
    myEcharts() {
      if (this.data) {
        if (!this.myChart) {
          this.myChart = this.$echarts.init(document.getElementById('canvas'+ this.key));
        }
        this.myChart.setOption(this.getOption());
      }
    },
    getOption() {
      let _option = {
        title: {
          text: this.title,
          subtext: this.subtext,
          left: this.left
        },
        xAxis: {type: 'category'},
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
      }
      if (this.color) {
        Object.assign(_option, {
          color: this.color
        })
      }
      // 如果data是数组类型
      if (this.type === 'bar' && Array.isArray(this.data)) {
        Object.assign(_option, this.getOptionBarStack())
      } else if (this.type === 'line' && Array.isArray(this.data)) {
        Object.assign(_option, this.getOptionLineStack())
      } else if (this.type === 'pie') {
        Object.assign(_option, this.getOptionPie())
      } else {
        Object.assign(_option, this.getOptionBase())
      }
      console.log(_option)
      return Object.assign(_option, this.mixinsdata)
    },
    // 圆饼图
    getOptionPie() {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: Object.assign({
          bottom: '10%',
          left: 'center'
        }, this.mixinslegend),
        series: {
          type: 'pie',
          radius: this.radius[1] === '0%' ? this.radius[0] : this.radius,
          roseType: this.rosetype,
          emphasis: {
            itemStyle: Object.assign({
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              borderRadius: 10,
              // borderColor: '#fff',
              // borderWidth: 2
            }, this.mixinsitemstyle)
          },
          data: Object.keys(this.data).map(h => {
            return {
              name: h,
              value: this.data[h]
            }
          })
        }
      }
    },
    // 柱状图
    getOptionBase() {
      return {
        xAxis: {
          type: 'category',
          data: Object.keys(this.data),
          axisTick: {
            alignWithLabel: true
          }
        },
        series: [
          {
            data: Object.values(this.data),
            type: this.type,
            smooth: this.smooth
          }
        ]
      }
    },
    // 堆叠柱状图
    getOptionBarStack() {
      return {
        dataset: {
          source: [
            Object.keys(this.data[0]),
            ...this.data.map(
              h => {
                return Object.values(h)
              }
            )
          ]
        },
        yAxis: {},
        series: [...Object.keys(this.data[0]).map(
          h => {
            return {type: this.type}
          }
        )].splice(1)
      }
    },
    // 折线图
    getOptionLine() {
      return {}
    },
    // 堆叠折线图 [{ product: 'Matcha Latte', key1: 43.3, key2: 85.8, key3: 93.7 }]
    getOptionLineStack() {
      return {
        legend: {
          data: this.data.map(h => h.product)
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: Object.keys(this.data[0]).splice(1)
        },
        series: [...this.data.map(
          h => {
            return {
              name: h.product,
              type: 'line',
              stack: 'Total',
              data: Object.values(h).splice(1)
            }
          }
        )]
      }
    }
  },
  ready() {
    this.myEcharts();
  }
}
</script>

<style>
.EchartsWarp div:first-child div:last-child {
  height: auto;
}
</style>
