<template>
  <div class="right-list-toobar">
    <el-toolbar>
      <el-col :span="2"><el-button @click="refresh"><i class="fa fa-refresh"></i>刷新</el-button></el-col>
      <el-col :span="4">当前报表：按维度统计</el-col>
      <el-col :span="18" align="right">
       <el-date-picker id="statByDimension-date-picker" v-model="selectedDateRange" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期范围" @change="dateRangeChange"></el-date-picker>&nbsp;&nbsp;
        <el-button @click="check" class="button" type="primary"><slot name="button">查看</slot></el-button>
      </el-col>
    </el-toolbar>
    <div class="padding-top-bottom mini" v-loading="dataLoading">
      <tree-grid :columns="columns" :tree-structure="true" :data-source="dimensioncatalog" :need-checkbox="false">
      </tree-grid>
    </div>
  </div>
</template>

<script>
import TreeGrid from '@src/components/TreeGrid.vue'
export default {
  data() {
    return {
      dataLoading: false,
      selectedDateRange: [], // toolbar日期范围
      startDate: '',
      endDate: '',
      dimensioncatalog: [], // 菜单项
      columns: [ // tree-grid配置
        {
          text: '维度名称',
          dataIndex: 'dimensionName',
          minwidth: '25%'
        },
        {
          text: '初稿',
          dataIndex: 'draftCount',
          minwidth: '8%'
        },
        {
          text: '流转',
          dataIndex: 'workflowCount',
          minwidth: '8%'
        },
        {
          text: '重新编辑',
          dataIndex: 'editingCount',
          minwidth: '9%'
        },
        {
          text: '待发布',
          dataIndex: 'toPublishCount',
          minwidth: '8%'
        },
        {
          text: '已发布',
          dataIndex: 'publishCount',
          minwidth: '8%'
        },
        {
          text: '已下线',
          dataIndex: 'offlineCount',
          minwidth: '8%'
        },
        {
          text: '已归档',
          dataIndex: 'archiveCount',
          minwidth: '8%'
        },
        {
          text: '总数',
          dataIndex: 'contentCount',
          minwidth: '8%'
        }
      ]
    }
  },
  methods: {
    dateRangeChange(val) {
      if (val && val instanceof Array) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.selectedDateRange = []
        this.startDate = ''
        this.endDate = ''
      }
    },
    refresh() {
      this.loadDimensionCatalog()
    },
    check() {
      this.loadDimensionCatalog()
    },
    async loadDimensionCatalog() {
      this.dataLoading = true
      let resp
      try {
        resp = await axios.get('/ui/stats/contentreport', {
          params: {
            type: 'dimension',
            startDate: this.startDate,
            endDate: this.endDate
          }
        })
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.dimensioncatalog = resp.data.data
    },
    async initDate() {
      let res = await axios.get('/ui/stats/summary/initdate')
      if (res.data.status === 1) {
        this.startDate = res.data.data.startDate
        this.endDate = res.data.data.endDate
        this.selectedDateRange = []
        this.selectedDateRange.push(this.startDate)
        this.selectedDateRange.push(this.endDate)
      }
    }
  },
  components: {
    TreeGrid
  },
  async created() {
    await this.initDate()
    this.loadDimensionCatalog()
  }
}

</script>

<style scoped>

</style>
