<template>
  <div class="subPage">
    <div class="selectCase">
      <el-select v-model="CaseId" placeholder="请选择">
        <el-option
          v-for="item in cases"
          :key="item.CaseId"
          :label="item.CaseName"
          :value="item.CaseId">
        </el-option>
      </el-select>
    </div>
    <div class="flex-h" v-for="(item,index) in pageData" :key="index">
      <div class="flex-item" v-for="(subItem,subIndex) in item" :key="subIndex">
        <div v-if="subItem.type === 'dashboardList'">
          <dashboardList :data="subItem.data"></dashboardList>
        </div>
        <div v-if="subItem.type === 'histogram'">
          <histogram :data="subItem.data"></histogram>
        </div>
        <div v-if="subItem.type === 'pieDiagram'">
          <pieDiagram :data="subItem.data"></pieDiagram>
        </div>
        <div v-if="subItem.type === 'brokenLineGraph'">
          <brokenLineGraph :data="subItem.data"></brokenLineGraph>
        </div>
        <div v-if="subItem.type === 'ringChart'">
          <ringChart :data="subItem.data"></ringChart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import dashboardList from '../../../components/dashboardList/index'
import histogram from '../../../components/histogram/index'
import pieDiagram from '../../../components/pieDiagram/index'
import brokenLineGraph from '../../../components/brokenLineGraph/index'
import ringChart from '../../../components/ringChart/index'

export default {
  name: '',
  data () {
    return {
      postData: {
        caseid: ''
      },
      pageData: [
        [
          { type: 'dashboardList', remark: '列表面板', data: { title: '', list: [{ name: '会员总数', value: '1000', }, { name: '课程预约总量', value: '1000', }, { name: '饮品下单总量', value: '1000', }] } }
        ],
        [
          { type: 'histogram', remark: '柱状图', data: { title: '今日数据', list: [{ x: '推荐会员新增', y: 38 }, { x: '课程数', y: 52 }, { x: '预约数', y: 61 }, { x: '到场人次', y: 145 }] } },
          { type: 'pieDiagram', remark: '扇形图', data: { title: '明日课程预约数据', list: [{ item: '小小体验官', count: 40, percent: 0.4 }, { item: '哈他瑜伽', count: 52, percent: 0.52 }, { item: '小小飞行家', count: 8, percent: 0.08 }] } }
        ],
        [
          { type: 'brokenLineGraph', remark: '折线图', data: { title: '下单饮品数据', list: [{ x: '09/05', y: 3 }, { x: '09/06', y: 4 }, { x: '09/07', y: 3.5 }, { x: '09/08', y: 5 }, { x: '09/09', y: 4.9 }, { x: '09/10', y: 6 }, { x: '09/11', y: 7 }, { x: '09/12', y: 9 }, { x: '09/13', y: 13 }] } },
          { type: 'ringChart', remark: '环形图', data: { title: '本月课程预约', list: [{ item: '健身课程', count: 40, percent: 0.4 }, { item: '社交课程', count: 21, percent: 0.21 }, { item: '教育课程', count: 17, percent: 0.17 }, { item: '健康课程', count: 13, percent: 0.13 }, { item: '艺术课程', count: 9, percent: 0.09 }] } },
        ],
        [
          { type: '', remark: '', data: { title: '', list: [] } },
        ],
      ],
    }
  },
  components: {
    dashboardList,
    histogram,
    pieDiagram,
    brokenLineGraph,
    ringChart,
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.drawHistogram()
    })
  },
  methods: {
    drawHistogram () { // 绘制柱状图
      // this.histogramInit.source(this.histogramParams)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>
