<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="22">当前报表：按角色统计</el-col>
    </el-toolbar>
    <el-toolbar>
        <el-col :span="24" align="right">
          <el-select clearable v-model="contentTypeValue" placeholder="请选择内容类型" @change="contentTypeChange" style="width:150px">
            <el-option v-for="item in contentType" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>&nbsp;
          <tree-select class="auto-width" :value.sync="catalog" :clearable="true" :items="catalogTree" :itemsOptions="treeItemsOptions"  placeholder="请选择栏目">
          </tree-select>&nbsp;
          <el-date-picker id="statByRole-date-picker" v-model="dateRangeValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期范围" style="width:320px" @change="dateRangeChange"></el-date-picker>&nbsp;
          <el-button @click="check" class="button" type="primary"><slot name="button">查看</slot></el-button>
        </el-col>
    </el-toolbar>
    <div>
      <el-table :data="roles" resizable tooltip-effect="dark" style="width: 100%" v-loading="dataLoading" :default-sort="{prop: 'hitCount', order: 'descending'}">
        <el-table-column type="index" label="序号" width="65" align="center"></el-table-column>
        <el-table-column prop="roleName" label="所属角色" min-width="15%"></el-table-column>
        <el-table-column prop="draftCount" label="初稿" min-width="10%"></el-table-column>
        <el-table-column prop="workflowCount" label="流转中" min-width="10%"></el-table-column>
        <el-table-column prop="editingCount" label="重新编辑" min-width="10%"></el-table-column>
        <el-table-column prop="toPublishCount" label="待发布" min-width="10%"></el-table-column>
        <el-table-column prop="publishCount" label="已发布" min-width="10%"></el-table-column>
        <el-table-column prop="offlineCount" label="已下线" min-width="10%"></el-table-column>
        <el-table-column prop="archiveCount" label="已归档" min-width="10%"></el-table-column>
        <el-table-column prop="contentCount" label="总数" min-width="10%"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  data() {
    return {
      dataLoading: false,
      roles: [], // 角色数据
      contentType: [], // 内容类型
      contentTypeValue: '', // 搜索框数据
      catalog: '',
      catalogTree: [], // 栏目列表
      treeItemsOptions: {
        children: 'children',
        label: 'name',
        key: 'ID'
      },
      dateRangeValue: []
    }
  },
  methods: {
    async contentTypeChange() {
      let data = await axios.get(`/ui/catalog?contentType=${this.contentTypeValue}`)
      this.catalogTree = data.data.data
      this.$nextTick(function() {
        let el = Array.from(document.querySelectorAll('.tree-wrap .el-tree-node .el-tree-node__content .span-label'))
        el.forEach(item => {
          if (item.getAttribute('contenttype') && this.contentTypeValue) {
            if (item.getAttribute('contenttype') !== this.contentTypeValue) {
              item.style = 'color: red'
            } else {
              item.style = 'color: #606266'
            }
          } else {
            if (item.innerText === this.catalogTree[0].name && this.contentTypeValue) {
              item.style = 'color: red'
            } else {
              item.style = 'color: #606266'
            }
          }
        })
      })
    },
    dateRangeChange(val) {
      if (val && val instanceof Array) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.dateRangeValue = []
        this.startDate = ''
        this.endDate = ''
      }
    },
    refresh() {
      this.loadRolesData()
    },
    check() {
      this.loadRolesData()
    },
    async loadRolesData() {
      this.dataLoading = true
      let resp
      try {
        resp = await axios.get('/ui/stats/contentreport', {
          params: {
            type: 'role',
            startDate: this.startDate,
            endDate: this.endDate,
            contentType: this.contentTypeValue,
            catalogID: this.catalog
          }
        })
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.roles = 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.dateRangeValue = []
        this.dateRangeValue.push(this.startDate)
        this.dateRangeValue.push(this.endDate)
      }
    }
  },
  async created() {
    await this.initDate()
    this.loadRolesData()
    let contentTypeResp = await axios.get('/ui/contentcore/contenttypes')
    this.contentType = contentTypeResp.data.data
    let catalogTreeResp = await axios.get('/ui/catalog')
    this.catalogTree = catalogTreeResp.data.data
  },
  components: {
    'tree-select': TreeSelect
  }
}
</script>

<style scoped>
.auto-width {
  width: auto !important;
}
</style>
