<template>
  <div ref="chart" style="width: 360px; height: 280px;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    title: {
      type: String,
      default: '每周任务数统计'
    },
    subtext: {
      type: String,
      default: 'Task Count'
    },
    xAxisData: {
      type: Array,
      default: () => []
    },
    seriesData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.chart)
      const option = {
        title: {
          text: this.title,
          subtext: this.subtext,
          textStyle: {
            color: '#97DEFF',
            fontSize: 16
          },
          subtextStyle: {
            color: '#97DEFF',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const tar = params[1]
            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          data: this.xAxisData,
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            name: 'Placeholder',
            type: 'bar',
            stack: 'Total',
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent'
            },
            emphasis: {
              itemStyle: {
                borderColor: 'transparent',
                color: 'transparent'
              }
            },
            data: [0, 2, 4, 6, 8, 10, 12, 14]
          },
          {
            name: '任务数',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: 'inside'
            },
            data: this.seriesData
          }
        ]
      }
      this.myChart.setOption(option)
    }
  },
  watch: {
    xAxisData: {
      handler() {
        this.initChart()
      },
      deep: true
    },
    seriesData: {
      handler() {
        this.initChart()
      },
      deep: true
    }
  }
}
</script>
