<!--  -->
<template>
  <div>
    <div class="title_bar">
      <div class="back" @click="handleBack">返回</div>
      <span></span>
      <div>等级分布详情</div>
    </div>
    <div class="detail_content">
        <el-button
          @click="handleChange"
          style="margin-bottom:20px">{{selectDepName}}<i class="el-icon-arrow-down"></i></el-button>
      <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="考评结果">
          <template slot-scope="scop">
            <div>
              {{scop.row.allScore || '--'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="scoreLevel" label="实际分布">
           <template slot-scope="scop">
            <div>
              {{scop.row.scoreLevel || '--'}}
            </div>
          </template>
        </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
            <div>
              <el-button
               @click="handlePush(scope.row)"
              type="text"
              size="small">
              查看详情
            </el-button>
            </div>
          </template>
        </el-table-column>
    </el-table>
    </div>
    <dialog-depart
      v-if="showDialogDepart"
      :isShow.sync='showDialogDepart'
      :showDataList.sync='showData'
      :len.sync="len"
      :isSignle.sync="isSignle"
    />
   </div>
</template>

<script>
import {getChartDetail, getDepList} from '@/api/report'
import dialogDepart from '@/components/getDepart'

export default {
  components: {
    dialogDepart
  },
  data () {
    return {
      // 表格数据
      tableData: [],
      // 当前选中部门
      selectDepName: '全部',
      // 当前选中部门id
      selectDepId: '',
      showDialogDepart: false,
      //
      showData: {
        list: []
      },
      //
      len: 1,
      //
      isSignle: true
    }
  },
  computed: {
  },
  beforeMount () {},
  mounted () {
    this.handleDetailReq()
  },
  methods: {
    handlePush (item) {
      console.log('item: ', item.recordId)
      this.$router.push({
        name: 'assessment-performance',
        query: {
          id: item.recordId
        }
      })
    },
    // 返回上一页
    handleBack () {
      this.$router.go(-1)
    },
    // 多选框转中处理
    handleChange (val) {
      this.showDialogDepart = true
    },
    // 请求详情页面信息
    async handleDetailReq (depId) {
      let params = {
        currPage: 1,
        departmentId: depId,
        flowProcess: this.$route.query.flowProcess,
        scoreLevel: this.$route.query.scoreLevel,
        startId: this.$route.query.startId,
        pageSize: 999
      }
      let result = await getChartDetail(params)
      if (result.code !== 200) return this.$message.errot(result.eror)
      this.tableData = result.data.list
    }
  },
  watch: {
    showDialogDepart (newV, oldV) {
      if (!newV && oldV) {
        this.selectDepName = this.showData.list[0].departmentName
        this.selectDepId = this.showData.list[0].departmentId
        this.handleDetailReq(this.selectDepId)
      }
    }
  }

}
</script>

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