<template>
  <div class="charts" ref="charts"></div>
</template>

<script lang="ts">
import Vue from 'vue'
import * as echarts from 'echarts/core'
import {
  BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineChart,
  LineSeriesOption,
} from 'echarts/charts'
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  // 数据集组件
  DatasetComponent,
  DatasetComponentOption,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { statSearch } from '@/service/api'
import moment from 'moment'
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
])

export default Vue.extend({
  props: {
    scale: String,
    grid: Object,
  },
  data() {
    return {
      xData: [],
      seriesData: [],
    }
  },
  methods: {
    generateD1() {
      const list = []
      for (let i = 0; i < 7; ++i) {
        const m = moment().hour(0).minute(0).second(0).add(-i, 'days')
        list.push(m)
      }
      return list.map((i) => i.unix())
    },
    generateW1() {
      const list = []
      for (let i = 0; i < 7; ++i) {
        const m = moment()
          .hour(0)
          .minute(0)
          .second(0)
          .add(-i * 7, 'days')
        list.push(m)
      }
      return list.map((i) => i.unix())
    },
    generateM1() {
      const list = []
      for (let i = 0; i < 7; ++i) {
        const m = moment().hour(0).minute(0).second(0).add(-i, 'month')
        list.push(m)
      }
      return list.map((i) => i.unix())
    },
    generateY1() {
      const list = []
      for (let i = 0; i < 7; ++i) {
        const m = moment().hour(0).minute(0).second(0).add(-i, 'year')
        list.push(m)
      }
      return list.map((i) => i.unix())
    },
    generate() {
      switch (this.scale) {
        case 'D1':
          return this.generateD1()
        case 'W1':
          return this.generateW1()
        case 'M1':
          return this.generateM1()
        case 'Y1':
          return this.generateY1()
      }
    },
    draw() {
      // 接下来的使用就跟之前一样，初始化图表，设置配置项
      // filters: ['D1', 'W1', 'M1', 'Y1'],
      const times = this.generate()
      times &&
        statSearch(times).then((ret) => {
          if (ret.error == null) {
            this.xData = ret.result
            var myChart = echarts.init(this.$refs.charts as HTMLElement)
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: times
                  ?.map((i) => {
                    return moment.unix(i).format('YYYY-MM-DD')
                  })
                  .reverse(),
              },
              yAxis: {
                type: 'value',
              },
              series: [
                {
                  data: this.xData
                    .map((i: any) => (i && i[0] && i[0].tx_count) || 0)
                    .reverse(),
                  type: 'line',
                  areaStyle: {},
                },
              ],
              grid: this.grid,
            })
          }
        })
    },
  },
  mounted() {
    this.draw()
  },
  watch: {
    scale(v) {
      this.draw()
    },
  },
})
</script>
<style lang="scss" scoped>
.charts {
  width: 100%;
}
</style>
