<template>
  <div class="chart-box">
    <header-cell>
      <h3>活跃用户数</h3>
      <el-select v-model="theType" slot="action" @change="handleTypesChange">
        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </header-cell>
    <v-chart class="chart" v-loading="loading" :options="options" />
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import dayjs from 'dayjs'
import { createNamespacedHelpers } from "vuex"

const { mapActions } = createNamespacedHelpers("indexEcharts")

export default {
  name: 'UserActive',
  components: {
    'v-chart': ECharts,
    HeaderCell: () => import('@/components/HeaderCell')
  },
  props: [ 'value' ],
  data () {
    return {
      loading: false,
      dataset: [],
      theType: 'day',
      types: [
        {label: '日活跃', value: 'day'},
        {label: '周活跃', value: 'week'},
        {label: '月活跃', value: 'month'},
      ],
      defaultOpt: {
        legend: { show: false },
        color: ['#8954BA', '#175DFB', '#0BB963', '#27DEFF', '#E713D2', '#E71313'],
        tooltip: {},
        xAxis: { type: 'time' },
        yAxis: {},
      },
    }
  },
  computed: {
    options () {
      return {
        ...this.defaultOpt,
        series: {
          type: 'bar',
          name: '活跃用户',
          data: (this.dataset || []).map(x => ([ x.date,!x.activityCount ? 0 : x.activityCount ]))
        }
      }
    }
  },
  methods: {
    ...mapActions(['getUserActive']),
    getData(filers) {
      // const endDate = new Date()
      // const startDate = dayjs().subtract(7, 'day').toDate()
      this.loading = true
      this.getUserActive(filers).then((data) => {
        this.dataset = data || []
        this.loading = false
      }).catch(() => {
        this.loading = true
      })
    },
    handleTypesChange (e) {
      this.getData({ dateType: e })
    }
  },
  mounted() {
    this.getData({ dateType: this.theType })
  },
}
</script>

<style lang="scss" src="./style.scss"></style>
