<template>
  <div v-loading="tableDataLoad">
    <template v-if="headValue.length > 0">
      <header class="flex-box flex-d-center">
        <div class="flex-box">
          <el-cascader
            v-model="headValue"
            :options="options"
            :show-all-levels="false"
            :props="{
              expandTrigger: 'hover',
              label: 'name',
              value: 'id',
              children: 'list'
            }"
          ></el-cascader>
        </div>
        <div>
          <el-dropdown @command="handleCommand" v-if="this.$isAuthoritys(this.$11)">
            <el-button type="primary">
              导出报表
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="A">考核结果报表</el-dropdown-item>
              <!--             <el-dropdown-item command="B">多次考核结果对比表</el-dropdown-item>
              <el-dropdown-item command="C">单次考核对比表</el-dropdown-item>
              <el-dropdown-item command="D">自定义导出</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </header>
      <div class="main">
        <div class="main-herader flex-box-ce">
          <div class="flex-1 fontColorB item" @click="amfTabLckick(0)" style="margin-right: 10px;">
            <div>{{ flow.all }}</div>
            <div>参与人数</div>
            <!-- <div class="bian"></div> -->
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(1)">
            <div>{{ flow.target }}</div>
            <div>目标制定</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(2)">
            <div>{{ flow.confirm }}</div>
            <div>目标确认</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(3)">
            <div>{{ flow.execution }}</div>
            <div>执行中</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(4)">
            <div>{{ flow.result_value }}</div>
            <div>结果值录入</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(5)">
            <div>{{ flow.score }}</div>
            <div>评分</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(9)">
            <div>{{ flow.review }}</div>
            <div>审批</div>
          </div>
          <div class="flex-1 fontColorB item" @click="amfTabLckick(11)">
            <div>{{ flow.done }}</div>
            <div>考核结束</div>
          </div>
        </div>
        <div class="main-main">
          <div class="main-title">
            绩效分布图
            <el-tooltip effect="dark" placement="top-start">
              <div slot="content">
                <div style="margin-bottom: 10px;">“-”代表什么？</div>
                <div style="padding-left: 20px;">
                  1、员工的绩效考评未结束时，显示“-”
                  <br />
                  2、绩效考评已结束，但员工的考核结果还没有公布时，也会显示“-
                </div>
              </div>
              <i class="el-icon-warning fontColorC"></i>
            </el-tooltip>
          </div>
          <div class="flex-box">
            <div class="flex-4">
              <div class="main-title2">等级分布</div>
              <template v-if="headValue.length > 0">
                <div ref="echarts2" class="echarts"></div>
              </template>
              <NoData v-else></NoData>
            </div>
            <div class="flex-3" style="padding-right: 20px;padding-top: 70px;overflow-x:hidden;">
              <el-table :data="tableData" :header-cell-style="{ background: '#ECF5FF' }">
                <el-table-column prop="name" label="绩效等级">
                  <template slot="header" slot-scope="scope">
                    <el-tooltip effect="dark" placement="top-start">
                      <div slot="content">
                        <div style="margin-bottom: 10px;">“-”代表什么？</div>
                        <div style="padding-left: 20px;">
                          1、员工的绩效考评未结束时，显示“-”
                          <br />
                          2、绩效考评已结束，但员工的考核结果还没有公布时，也会显示“-
                        </div>
                      </div>
                      <span>
                        <span>绩效等级</span>
                        <i class="el-icon-warning fontColorC"></i>
                      </span>
                    </el-tooltip>
                  </template>
                </el-table-column>

                <el-table-column prop="value" label="人数"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="main-footer">
          <div class="main-title">绩效排名</div>
          <div class="flex-box-ce search">
            <div class="flex-box-ce">
              <div class="label">部门</div>
              <el-select v-model="deptName" clearable  placeholder="请选择部门" style="width: 300px;">
                <el-option v-for="(item, index) in deptList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="flex-box-ce">
              <div class="label">等级</div>
              <el-select v-model="rank" clearable placeholder="请选择等级">
                <el-option v-for="(item, index) in tableData" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </div>
          </div>
          <div class="table-box" style="padding: 20px;">
            <el-table :data="getEmployees()" :header-cell-style="{ background: '#ECF5FF' }">
              <el-table-column type="index"></el-table-column>
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="dept_name" label="部门">
				  <template slot-scope="scope">
					<div v-if="scope.row.dept.length > 0">
						<span v-for="(item, index) in scope.row.dept" :key="index">
							{{ item.name }}
							<span v-if="scope.row.dept.length - index > 1">,</span>
						</span>
					</div>
					<span v-else>--</span>
				  </template>
			  </el-table-column>
              <el-table-column prop="final_point" label="考核结果"></el-table-column>
              <el-table-column prop="final_level" label="绩效等级">
                <template slot="header" slot-scope="scope">
                  <el-tooltip effect="dark" placement="top-start">
                    <div slot="content">
                      <div style="margin-bottom: 10px;">“-”代表什么？</div>
                      <div style="padding-left: 20px;">
                        1、员工的绩效考评未结束时，显示“-”
                        <br />
                        2、绩效考评已结束，但员工的考核结果还没有公布时，也会显示“-
                      </div>
                    </div>
                    <span>
                      <span>绩效等级</span>
                      <i class="el-icon-warning fontColorC"></i>
                    </span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="rank" label="绩效排名"></el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button type="text" @click="openDetail(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </template>
    <div class="flex-box-v flex-center-center" v-else style="padding: 26px 35px;background-color: #fff;border: 1px solid #e8e8e8;border-radius: 4px;height: 400px;">
      <img src="@/assets/image/invite_new_company.png" style="width: 200px;height: 200px;margin-bottom: 10px;" />
      <div class="fontColorB">您没有参与任何考核</div>
    </div>
  </div>
</template>

<script>
import ECharts from 'echarts';
export default {
  data() {
    return {
      tableDataLoad: false, //列表load
      options: [], //
      headValue: [],
      amhlList: [
        { value: 0, label: '全部' },
        { value: 2, label: '月度' },
        { value: 3, label: '季度' },
        { value: 4, label: '半年度' },
        { value: 5, label: '年度' },
        { value: 1, label: '日' },
        { value: 6, label: '自定义' }
      ],
      flow: {},
      tableData: [],
      package_id: '',
      employees: [],
      deptList: [],
      deptName: '', //部门名称
      rank: '' ,//级别
      cycle_type:0,
    };
  },
  components: {},
  watch: {
    deptName(val) {
      // this.getEmployees();
    },
    rank(val) {
      // this.getEmployees();
    },
    headValue(val) {
      this.tableData=[];
      this.deptList=[];
      this.cycle_type=val[0];
      this.package_id = val[val.length - 1];
      this.getData();
    }
  },
  mounted() {
    this.assessTree();
  },
  methods: {
    //点击表格某一行
    amfTabLckick(index) {
      let data={
        navcli:index,
        cycle_type:this.cycle_type,
        id:this.package_id,
      }
      this.$router.push({ path: '/assessDetails', query: { amfTabLckick: JSON.stringify(data) } });
    },
    getEmployees() {
      var employees = this.employees;
	  // console.log(employees,this.deptName)
      var arr = [];
      if (this.deptName) {
        arr = employees.filter(item => {
          return item.dept.some(x=>x.dept_id==this.deptName)
        });
      } else {
        arr = employees;
      }
      if (this.rank) {
        arr = arr.filter(item => {
          return item.final_level == this.rank;
        });
      }
      return arr;
    },
    getData() {
      if(!this.package_id){
        return false;
      }
      this.tableDataLoad = true;
      this.$axios('get', '/api/per/statistics', { package_id: this.package_id })
        .then(res => {
          this.flow = res.data.data.flow;
		  let employees=res.data.data.employees;
		  employees.forEach(item=>{
			  item.name=this.$getEmployeeList()[item.id].name
		  })
          this.setTableData(employees);
          this.employees = employees;
          this.getEmployees();
        })
        .finally(() => {
          this.tableDataLoad = false;
        });
    },
    setTableData(employees) {
      var obj = {};
      let deptList = []; //部门列表
      this.deptList = [];
      employees.forEach(item => {
        var count = 0;
        deptList.push(...item.dept)
        employees.forEach(item2 => {
          if (item.final_level == item2.final_level) {
            count++;
          }
        });
        obj[item.final_level] = count;
      });
      this.getResult(Object.keys(obj), Object.values(obj));
      let tableData = [];
      for (let key in obj) {
        tableData.push({ name: key, value: obj[key] });
      }
	  var result = [];
	  var obj = {};
	  for(var i =0; i<deptList.length; i++){
		 let item=deptList[i];
		 if(!obj[item.dept_id]){
		   result.push({label:item.name,value:item.dept_id});
			obj[item.dept_id] = true;
		}
	  }
	  this.deptList=result;
      this.tableData = tableData;
    },

    //结果分析
    getResult(keys, values) {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: keys
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            data: values,
            type: 'bar',
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#26A2FF', '#4ECB73', '#36CBCB', '#F2637B', '#FBD437', '#749f83', '#ca8622'];
                  var index;
                  //给大于颜色数量的柱体添加循环颜色的判断
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                    return colorList[index];
                  }
                  return colorList[params.dataIndex];
                }
              }
            },
            barMaxWidth: 30
          }
        ]
      };
      var myChart = ECharts.init(this.$refs.echarts2);
      option && myChart.setOption(option);
    },

    //考核人数
    getAssessNum() {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200
                // itemStyle: {
                //   color: '#409EFF'
                // }
              }
            ],
            type: 'bar',
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                  var index;
                  //给大于颜色数量的柱体添加循环颜色的判断
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                    return colorList[index];
                  }
                  return colorList[params.dataIndex];
                }
              }
            },
            barMaxWidth: 30
          }
        ]
      };
      var myChart = ECharts.init(this.$refs.echarts1);
      option && myChart.setOption(option);
    },
    //请求绩效树
    assessTree() {
      this.tableDataLoad = true;
      this.$axios('get', 'api/per/package/list', { page: 0, is_manage_scope: 1 })
        .then(res => {
          if (res.data.code == 1) {
            let data = res.data.data.list;
            let arr = [
              { name: '月度', id: 2, list: [] },
              { name: '日', id: 1, list: [] },
              { name: '季度', id: 3, list: [] },
              { name: '半年度', id: 4, list: [] },
              { name: '年度', id: 5, list: [] },
              { name: '自定义', id: 6, list: [] }
            ];
            data.forEach(item => {
              arr.forEach(item2 => {
                if (item2.id == item.cycle_type) {
                  item2.list.push(item);
                }
              });
            });
            this.options = arr;
            let headValue = [];
            this.options.some(item => {
              if (item.list.length > 0) {
                headValue.push(item.id);
                headValue.push(item.list[0].id);
                return true;
              }
            });
            if (headValue.length > 0) {
              this.headValue = headValue;
              window.addEventListener('resize', this.selfAdaption);
            }
          }
        })
        .finally(() => {
          this.tableDataLoad = false;
        });
    },
    //echarts自适应
    openDetail(item) {
      if (item.per_id) {
        this.$router.push({
          path: '/staffAssDet',
          query: { assID: this.package_id, employeeID: item.per_id, employeeIDs: item.id }
        });
      }
    },
    selfAdaption() {
      // var echarts1 = ECharts.init(this.$refs.echarts1);
      var echarts2 = ECharts.init(this.$refs.echarts2);
      // echarts1.resize();
      echarts2.resize();
    },
    handleCommand(val) {
      switch (val) {
        case 'A': //导出结果
			this.$axios('post', '/api/per/user/download_token').then(res => {
			  let token=res.data.data.token
			  let url = `${this.$serverdomain}/api/download/export/result?package_id=${this.package_id}&token=${token}`;
			  window.open(url, '_blank');
			});
          break;
        case 'g': //管理
          this.isManagement = true;
          break;
      }
    },
    filtrationStr(str) {
      let name = '';
      switch (str) {
        case 'all':
          name = '参与人数';
          break;
        case 'done':
          name = '流程完成节点人数';
          break;
        case 'review':
          name = '审批节点节点人数';
          break;
        case 'target':
          name = '目标制定节点人数';
          break;
        case 'confirm':
          name = '目标确认节点人数';
          break;
        case 'execution':
          name = '执行中节点人数';
          break;
        case 'score_self':
          name = '自评节点人数';
          break;
        case 'result_value':
          name = '结果值录入节点人数';
          break;
        case 'score_mutual':
          name = '互评节点人数';
          break;
        case 'special_scorer':
          name = '指定评分人节点人数';
          break;
        case 'score_supervisor':
          name = '上级评分节点人数';
          break;
        case 'score':
          name = '所有评分节点人数';
          break;
      }
      return name;
    }
  },
  beforeDestroy() {
    //离开路由
    window.removeEventListener('resize', this.selfAdaption); //取消echarts自适应
  }
};
</script>

<style scoped="scoped" lang="scss">
.all {
  background-color: #fff;
  padding: 20px;
}
header {
  height: 42px;
}
.main {
  background-color: #fff;
}
.main-herader {
  margin: 10px 0;
  // box-shadow: 0 0 3px #ccc;
  // box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
}
.item {
  text-align: center;
  padding: 20px;
  position: relative;
  cursor: pointer;
  background: #F6FAFF;
}
.item div:nth-child(1) {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #409eff;
}
.bian {
  position: absolute;
  width: 1px;
  height: 30px;
  background-color: #e8e8e8;
  right: 0;
  top: 50%;
  margin-top: -15px;
}
.echarts {
  height: 350px;
  width: 100%;
}
.main-title {
  font-weight: 600;
  padding: 20px 0px;
  font-size: 15px;
  position: relative;
  padding-left: 10px;
}
.main-title::before{
	content: " ";
	position: absolute;
	width: 4px;
	height: 20px;
	background-color: #409eff;
	left: 0;
}
.main-title2 {
  padding-left: 40px;
}
.departments {
  width: 46%;
  margin-bottom: 10px;
}
.departments span {
  background-color: #e6a23c;
  color: #fff;
  width: 18px;
  height: 18px;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  display: inline-block;
}
.department-name {
  padding: 0 10px;
}
.label {
  width: 50px;
  text-align: right;
  margin-right: 10px;
}
.search {
  padding: 20px;
  padding-bottom: 0;
}
</style>
