<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-select clearable v-model="dimensionID" placeholder="请选择维度" @change="changeClickHandler">
          <el-option v-for="item in dimensions" :key="item.ID" :label="item.name" :value="item.ID">
          </el-option>
        </el-select>&nbsp;
        <el-date-picker id="statByCatalog-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="catalogList" :is-show-summary="false" :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: '',
      catalogList: [], // 菜单项
      columns: [ // tree-grid配置
        {
          text: '栏目名称',
          dataIndex: 'catalogName',
          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%'
        }
      ],
      dimensionID: 1,
      dimensions: [{ID: 1, code: 'default', name: '默认分类'}]
    }
  },
  methods: {
    async getDimensions() {
      let res = await axios.get('/ui/dimensions')
      this.dimensions = res.data.data
      let lsTmp = localStorage['user_' + localStorage.userName + '_sid_' + this.$root.siteID + '_ewdid']
      if (lsTmp && lsTmp !== '-1') {
        this.dimensionID = parseInt(lsTmp)
      } else {
        this.dimensionID = this.dimensions[0].ID
      }
      await this.loadCatalogTree()
    },
    async changeClickHandler(value) {
      this.dimensionID = value
      await this.loadCatalogTree()
    },
    dateRangeChange(val) {
      if (val && val instanceof Array) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.selectedDateRange = []
        this.startDate = ''
        this.endDate = ''
      }
    },
    refresh() {
      this.loadCatalogTree()
    },
    check() {
      this.loadCatalogTree()
    },
    async loadCatalogTree() {
      this.dataLoading = true
      let resp
      try {
        resp = await axios.get('/ui/stats/contentreport', {
          params: {
            type: 'catalog',
            startDate: this.startDate,
            endDate: this.endDate,
            dimensionID: this.dimensionID
          }
        })
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.catalogList = 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.loadCatalogTree()
    this.getDimensions()
  }
}

</script>

<style scoped>

</style>
