<template>
  <div class="dashboard-container">
      <!-- 筛选条件 -->
  <div class="app-container calendar-list-container">
    <el-date-picker v-model="time" type="month" format="yyyy-MM"  value-format="yyyy-MM" placeholder="选择年月"
        class="filter-item" @change="logTimeChange" clearable>
    </el-date-picker>
  </div>
  <div ref="myChart" :style="{width: '1132px', height: '521px', position: 'relative', overflow: 'hidden'}"></div>
  </div>
</template>

<script>
import waves from '@/directive/waves.js'// 水波纹指令
import { mapGetters } from 'vuex'
import adminDashboard from './admin/index'
import editorDashboard from './editor/index'
import { findmoney } from '@/api//order'
import echarts from 'echarts'

export default {
  name: 'dashboard',
  components: { adminDashboard, editorDashboard },
  directives: {
    waves
  },
  data() {
    return {
      time: '',
      chart: null,
      options: {
        title: {
          text: '用户月充值报表'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [],
          type: 'line',
          areaStyle: {}
        }]
      }
    }
  },

  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {

  },
  mounted() {
    this.drawLine('')
  },
  methods: {
    /**
     * 搜索主题
     */
    logTimeChange(val) {
      console.log(val)
      this.drawLine(val)
    },
    drawLine(val) {
      if (val !== '') {
        this.options.title.text = val + '月充值统计/元'
      } else {
        this.options.title.text = '本月充值统计/元'
      }
      findmoney(val).then(response => {
        this.options.xAxis.data = []
        this.options.series[0].data = []
        response.money.forEach(element => {
          this.options.xAxis.data.push(element.days)
          this.options.series[0].data.push(element.price)
        })
        // 基于准备好的dom，初始化echarts实例
        this.chart = echarts.init(this.$refs.myChart)
        // 绘制图表
        this.chart.setOption(this.options, true)
      })
    }
  }
}
</script>
