<template>
  <div class="chart-box">
    <h3>性别比例</h3>
    <v-chart v-loading="loading" class="chart" :options="options" />
  </div>
</template>

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

const { mapActions } = createNamespacedHelpers("indexEcharts")

export default {
  name: 'UserSex',
  components: {
    'v-chart': ECharts,
  },
  props: [
    'value',
  ],
  data() {
    return {
      loading: false,
      dataset: [],
      defaultOpt: {
        legend: {},
        color: ['#6A96F8', '#F5749E'],
        tooltip: {},
        series: {
          type: 'pie',
          name: '性别比例',
          radius: ['50%', '70%'],
        }
      },
    }
  },
  computed: {
    options() {
      return {
        ...this.defaultOpt,
        series: {
          ...this.defaultOpt.series,
          data: this.dataset || [],
        },
      }
    }
  },
  methods: {
    ...mapActions(['getUserSex']),
    getData(filers) {
      this.loading = true
      this.getUserSex(filers).then((data) => {
        this.dataset = data || {}
        this.loading = false
      }).catch(() => {
        this.loading = true
      })
    },
  },
  mounted () {
    const endDate = new Date()
    const startDate = dayjs().subtract(7, 'day').toDate()
    this.getData({ startDate, endDate })
  },
}
</script>

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