<template>
  <div>
    <div class="chart-box" v-if="mode == 'all' || mode == 'report'">
      <h3>用户来源 <small>{{subtitle}}</small></h3>
      <v-chart v-loading="loading" class="chart" :options="options" />
    </div>
    <div class="chart-box" v-if="mode == 'all' || mode == 'table'">
      <el-select v-model="userType">
        <el-option label="所有用户" value="all"></el-option>
        <el-option label="注册用户" value="registered"></el-option>
      </el-select>
      <el-table v-loading="loading" :data="tableData"  border  center  style="width: 100%; margin-top: 16px" height="400">
        <el-table-column v-for="(item, index) in tableTitle" :key="index" :label="item" :prop="index == 0 ? 'label' : item"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
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: 'UserSource',
  components: {
    'v-chart': ECharts,
  },
  props: [
    'value',
    'subtitle',
    'mode',
  ],
  data () {
    return {
      loading: false,
      dataset: {},
      reportOpts: {
        legend: {},
        color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
        tooltip: {},
        yAxis: {},
        grid: [
          { right: '50%' },
          { right: '5%' }
        ],
      },
      userType: 'all',
      tableTitle: ['日期'],
    }
  },
  computed: {
    tableData () {
      const data = (this.dataset.data || []).reduce((acc, item, index) => {
          const { date, fromName, count, registered } = item
          const num = this.userType === 'registered' ? registered : count
          
          this.tableTitle = this.tableTitle.indexOf(fromName) > -1 ? this.tableTitle : this.tableTitle.concat(fromName) // eslint-disable-line
          acc[date] = { ...acc[date], [`${fromName}`]: !num ? 0 : num }

          return acc
        }, {})
      
      return Object.keys(data).map(x => ({ label:x, ...data[x] }))
    },

    // 柱图
    barOptions () {
      const source = this.dataset.columnar || [];
      return {
        xAxis: { type: 'category' },
        legend: {
          left: '20%',
          data: ['所有用户', '注册用户'],
        },
        series: [
          { type: 'bar', name: '所有用户', datasetIndex: 0 },
          { type: 'bar', name: '注册用户' },
        ],
        dataset: {
          id: 'bar',
          dimensions: [ 'fromName', 'userCount', 'registered' ],
          source: source,
        },
      }
    },
    // 饼图
    pieOptions () {
      const { person_estate_agent = 0, person_null = 0, person_realty_consultant = 0 } = this.dataset.pie || {};
      return {
        xAxis: {},
        legend: {
          left: '70%',
          data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
        },
        series: [
          {
            type: 'pie',
            datasetIndex: 1,
            center: ['75%', '50%'],
            radius: [0, '50%'],
          },
        ],
        dataset: {
          id: 'pie',
          source: [
            { form: '来源置业顾问', value: person_realty_consultant },
            { form: '来源全民经纪人', value: person_estate_agent },
            { form: '自主进入', value: person_null },
          ]
        },
      }
    },
    options() {
      return {
        ...this.reportOpts,
        xAxis: [
          this.barOptions.xAxis,
          this.pieOptions.xAxis,
        ],
        legend: [
          this.barOptions.legend,
          this.pieOptions.legend,
        ],
        series: [
          ...this.barOptions.series,
          ...this.pieOptions.series,
        ],
        dataset: [
          this.barOptions.dataset,
          this.pieOptions.dataset,
        ],
      }
    }
  },
  methods: {
    ...mapActions(['getUserResource']),
    getData(filters) {
      this.loadding = true
      this.getUserResource(filters).then((data) => {
        this.dataset = data || {}
        this.loading = false
      }).catch((err) => {
        this.loading = false
      })
    }
  },
  mounted () {
    const endDate = new Date()
    const startDate = dayjs().subtract(7, 'day').toDate()

    this.getData({ startDate, endDate })
  },
}
</script>

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