<template>
  <div>
    <div ref="barChartRef" :key="title" 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: ''
    },
    // 横坐标值偏移角度
    axisLabelRotate: {
      type: Number,
      default: 60
    },
    // 查询条件(图表内置查询条件，配置中写死，不支持动态更新)
    searchParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 显示数据的key（x代表横坐标，y代表纵坐标显示的值）
    showKeys: {
      type: Object,
      default: () => {
        return {
          x: 'time',
          y: 'quantity'
        }
      }
    }
  },
  data() {
    return {
      myChart: {},
      loading: false,
      queryCount: 0 // 用来判断是否是最后一次返回的数据，方式频繁切换条件造成图表异步查询到的数据不正确
    }
  },
  watch: {
    // chartConfig: {
    //   handler: function(newData) {
    //     if(newData) {
    //       this.$nextTick(()=>{
    //         this.renderChart()
    //       })
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  created() {},
  mounted() {},
  methods: {
    getChartData() {
      const flag = ++this.queryCount
      this.loading = true
      this.getDataFunc({ ...this.searchTime, ...this.searchParams }).then(res => {
        if (res.success && flag === this.queryCount) {
          const obj = {
            name: ['product'],
            value: [this.title]
          }
          res.data.forEach(item => {
            obj.name.push(item[this.showKeys.x])
            obj.value.push(item[this.showKeys.y])
          })
          this.getChartConfig(obj.name, obj.value)
          this.loading = false
        }
      }).catch(e => {
        this.loading = false
        console.log(e)
      })
    },
    getChartConfig(xValue, value) {
      const option = {
        grid: {
          top: 10,
          left: 60,
          right: 60
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          // axisLabel: {
          //   rotate: this.axisLabelRotate
          // },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'bar',
          seriesLayoutBy: 'row',
          showBackground: true,
          barMaxWidth: 30,
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#1C67FF' },
              { offset: 1, color: '#5D8BFF' }
            ])
          },
          backgroundStyle: {
            borderRadius: [5, 5, 0, 0],
            color: '#F4F7FF'
          }
        }],
        backgroundStyle: {
          color: 'red'
        },
        dataset: {
          source: [
            xValue,
            value
          ]
        }
      }
      // this.$emit('update:chartConfig', option)
      this.myChart = echarts.init(this.$refs.barChartRef)
      this.myChart.setOption(option)
    }
    // renderChart() {
    //   this.myChart = echarts.init(this.$refs.barChartRef)
    //   this.myChart.setOption(this.chartConfig)
    // }
  }
}
</script>

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