<template>
  <div class="right-list-toobar">
    <el-toolbar>
      <div class="layout-data-search layout-data-search-5">
        <el-button @click="refresh">
          <i class="fa fa-refresh"></i>刷新</el-button>
        <el-select class="layout-select"  clearable v-model="contentTypeValue" placeholder="请选择内容类型" @change="contentTypeChange">
          <el-option v-for="item in contentType"  :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <tree-select width="220" :value.sync="catalog"  :clearable="true" :items="catalogTree" :itemsOptions="treeItemsOptions" placeholder="请选择栏目">
        </tree-select>
        <el-date-picker id="assessStat-date-picker" class="layout-date-picker" v-model="dateRangeValue" type="daterange"  format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateRangeChange"></el-date-picker>
        <el-button @click="check" class="button" type="primary"><slot name="button">查看</slot></el-button>
      </div>
    </el-toolbar>
    <div>
      <el-table :data="assessStat" resizable tooltip-effect="dark" style="width: 100%" v-loading="dataLoading" >
        <el-table-column type="index" label="序号" width="65"></el-table-column>
        <el-table-column prop="branchName" label="所属机构" show-overflow-tooltip></el-table-column>
        <el-table-column prop="realName" label="添加人" show-overflow-tooltip></el-table-column>
        <el-table-column label="用户状态" width="100">
          <template slot-scope="scope">
            <i class="fa fa-check icon-success" v-if="scope.row.status === 'Y'"></i>
            <i class="fa fa-times icon-danger" v-else></i>
          </template>
        </el-table-column>
        <el-table-column prop="publishedCount" label="发布量"></el-table-column>
        <el-table-column prop="sumScore" label="绩效总分" :formatter="scoreFormat"></el-table-column>
        <el-table-column prop="avgScore" label="平均分" :formatter="scoreFormat"></el-table-column>
        <el-table-column label="操作" width="70">
          <template slot-scope="scope">
            <el-button @click="showScore(scope.row)" type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 用户内容得分详细信息 -->
    <el-dialog title="用户内容得分详细信息" :visible.sync="showScoreDialog" width="80%">
      <el-table :data="scoreDetail" resizable tooltip-effect="dark" style="width: 100%" v-loading="dialogDataLoading" >
        <el-table-column type="index" label="序号" width="65"></el-table-column>
        <el-table-column prop="catalogName" label="所在栏目" min-width="9%"></el-table-column>
        <el-table-column prop="count0" label="0-9" min-width="6%"></el-table-column>
        <el-table-column prop="count1" label="10-19" min-width="7%"></el-table-column>
        <el-table-column prop="count2" label="20-29" min-width="7%"></el-table-column>
        <el-table-column prop="count3" label="30-39" min-width="7%"></el-table-column>
        <el-table-column prop="count4" label="40-49" min-width="7%"></el-table-column>
        <el-table-column prop="count5" label="50-59" min-width="7%"></el-table-column>
        <el-table-column prop="count6" label="60-69" min-width="7%"></el-table-column>
        <el-table-column prop="count7" label="70-79" min-width="7%"></el-table-column>
        <el-table-column prop="count8" label="80-89" min-width="7%"></el-table-column>
        <el-table-column prop="count9" label="90-99" min-width="7%"></el-table-column>
        <el-table-column prop="count10" label="100" min-width="6%"></el-table-column>
        <el-table-column prop="sumCount" label="已打分记录数" min-width="11%"></el-table-column>
      </el-table>
      <div slot="footer">
        <el-button type="primary" @click="showScoreDialog = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  data() {
    return {
      dataLoading: false,
      assessStat: [], // 内容收藏数据
      contentType: [], // 内容类型
      contentTypeValue: '', // 搜索框数据
      catalog: '',
      dateRangeValue: [],
      startDate: '',
      endDate: '',
      catalogTree: [], // 栏目列表
      treeItemsOptions: {
        children: 'children',
        label: 'name',
        key: 'ID'
      },
      showScoreDialog: false, // 得分详细框
      scoreDetail: [], // 得分详细信息
      dialogDataLoading: false,
      currentUserName: '' // 当前会员
    }
  },
  methods: {
    scoreFormat(row, column) {
      if (column.property === 'sumScore') {
        return parseFloat(row[column.property]).toFixed(1)
      } else {
        return parseFloat(row[column.property]).toFixed(2)
      }
    },
    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.length > 1) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.startDate = ''
        this.endDate = ''
      }
    },
    refresh() {
      this.contentTypeValue = ''
      this.catalog = ''
      this.startDate = ''
      this.endDate = ''
      this.dateRangeValue = []
      this.loadAssessStatData()
    },
    check() {
      this.loadAssessStatData()
    },
    showScore(row) {
      this.currentUserName = row.userName
      this.showScoreDialog = true
      this.loadScore()
    },
    async loadScore() {
      this.dialogDataLoading = true
      let resp
      try {
        resp = await axios.get('/ui/stats/contentassessreport', {
          params: {
            type: 'assessstatdetail',
            userName: this.currentUserName,
            startDate: this.startDate,
            endDate: this.endDate,
            contentType: this.contentTypeValue,
            catalogID: this.catalog
          }
        })
        this.dialogDataLoading = false
      } catch (e) {
        this.dialogDataLoading = false
        return
      }
      this.scoreDetail = resp.data.data
    },
    async loadAssessStatData() {
      this.dataLoading = true
      let resp
      try {
        resp = await axios.get('/ui/stats/contentassessreport', {
          params: {
            type: 'assessstat',
            startDate: this.startDate,
            endDate: this.endDate,
            contentType: this.contentTypeValue,
            catalogID: this.catalog
          }
        })
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.assessStat = resp.data.data
    }
  },
  async created() {
    this.loadAssessStatData()
    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>
  .layout-select {
    width:240px;
  }
</style>
