<!--  -->
<template>
  <div>
    <div class="title_bar">
      <div @click="handleBack">返回</div>
      <span></span>
      <div>等级分布详情</div>
    </div>
    <div class="detail_content">
        <el-cascader :options="depList" @change="handleChange" style="margin-bottom:20px" ></el-cascader>
      <el-table :data="tableData"
              border
              :header-cell-style="{ background:'#F5F7FA'}"
              style="margin-top:20px">
        <el-table-column prop="staffName" label="姓名"></el-table-column>
        <el-table-column prop="staffNo" label="工号"></el-table-column>
        <el-table-column prop="departmentName" label="部门"></el-table-column>
        <el-table-column prop="allScore" label="考评结果"></el-table-column>
        <el-table-column prop="scoreLevel" label="实际分布"></el-table-column>
    </el-table>
    </div>
   </div>
</template>

<script>
import {getChartDetail, getDepList} from '@/api/report'
export default {
  data () {
    return {
      // 表格数据
      tableData: [],
      // 部门数据列表
      depList: []
    }
  },
  computed: {},
  beforeMount () {},
  mounted () {
    this.handleDepListReq()
    this.handleDetailReq()
  },
  methods: {
    // 返回上一页
    handleBack () {
      this.$router.go(-1)
    },
    // 多选框转中处理
    handleChange (val) {
      this.handleDetailReq(val[1])
    },
    // 请求详情页面信息
    async handleDetailReq (depId) {
      let params = {
        currPage: 1,
        departmentId: depId,
        flowProcess: this.$route.query.flowProcess,
        startId: this.$route.query.startId,
        pageSize: 20
      }
      let result = await getChartDetail(params)
      this.tableData = result.data.list
    },
    // 请求部门信息
    async handleDepListReq (handleNode) {
      let params = {
        type: 0
      }
      let result = await getDepList(params)
      console.log(result)
      this.depList = this.handleDepResult(result.data)
    },
    // 递归生成可用数组
    handleDepResult (list) {
      return Array.from(list).map(item => {
        let resItem = {
          value: item.departmentId,
          label: item.departmentName
        }
        // 如果有下一级部门则递归调用
        if (item.list && item.list.length > 0) {
          let children = this.handleDepResult(item.list)
          resItem['children'] = children
        }
        return resItem
      })
    }
  },
  watch: {

  }

}
</script>

<style lang='' scoped>
.title_bar{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.title_bar>:nth-child(1){
  font-size: 16px;
  color: #b4b4b4;
  margin-right: 10px;
}
.title_bar>:nth-child(2){
  height: 15px ;
  width: 1px;
  background: #333;
}
.title_bar>:nth-child(3){
  font-size: 16px;
  color: #333;
  margin-left: 10px;
}
.detail_content{
  background: white;
  padding: 40px 20px;
  border:solid 1px #b4b4b4;
}
</style>
