<template>
  <div class="container">
    <div class="all">
      <!-- <PageHeadTwo title="预览"></PageHeadTwo> -->
      <div class="main scroll-bar">
        <div class="flex-box-ce">
          <userImage :user_name="userData.name" :img_url="userData.img_url" fontSize="14" width="50px" height="50px"></userImage>
          <div>
            <div class="name" style="margin: 0 10px;margin-bottom: 5px;">{{ userData.name }}</div>
            <div class="name fontColorC" style="margin: 0 10px;" v-for="(item,index) in dept_list" :key="index">{{item.name}}</div>
          </div>
          <el-button class="primaryBtn"  @click="addUser()">更换</el-button>
        </div>
        <div class="flex-box-ce flex-d-wrap" style="margin-top: 30px;">
            <div v-for="(item, index) in flow" :key="index" :class="[index == 0 ? 'flow-item-start' : 'flow-item']" class="flex-box-ce flex-center-center">
                <el-tooltip effect="dark" :content="item.code == 'execution' ? execution : item.remarks" placement="top">
                  <span class="flow-box">
                    <span>{{ index + 1 }}.{{ item.remark }}</span>
                    <span v-if="item.code == 'execution'"><i class="el-icon-warning-outline"></i>:</span>
                    <template v-if="item.target.length > 0">
                      <span v-for="(item2, index2) in item.target" :key="index2">
                        {{ item2.employee_name }}
                        <span v-if="item.target.length - index2 > 1">,</span>
                      </span>
                    </template>
                  </span>
                </el-tooltip>
              <div @click.stop="processDet(item)" style="width: 20px;" v-if="item.target.length>0"><svg-icon icon-class="detailsPonit" class="detailsPonit"/></div>
            </div>
        </div>
      <el-table :data="tableData" stripe :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" :header-cell-style="{ background: '#ECF5FF'}">
        <el-table-column prop="wdName" label="维度"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="point_limit" label="加扣分上限"></el-table-column>
        <el-table-column prop="per_remark" label="考核标准"></el-table-column>
        <el-table-column prop="weight" label="指标权重(%)"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
      </el-table>
      </div>
    </div>
    <!-- 流程详情 -->
    <BrawerBox :drawerTitle="flowTitle" :showDrawer.sync="isFlow">
      <template slot="main">
        <ul class="ul">
          <li v-for="(item, index) in target" :key="index" class="flex-box-ce li">
            <div class="flex-box-ce" style="margin-right: 20px;width: 150px;">
              <userImage :user_name="item.employee_name" :img_url="getUserImg(item.employee_id)"></userImage>
              <span style="margin-left: 10px;">{{ item.employee_name }}</span>
            </div>
          </li>
        </ul>
      </template>
    </BrawerBox>
    <!-- 选择被考核人员 -->
    <EmployeeSelector
      :selected="selected"
      :isRequired="true"
      title="选择被考核人员"
      :isChecKedAll="false"
      :employee_list="employee_list"
      :visible.sync="setAdministrator"
      :multi="false"
      :is_employee_list="true"
      :is_filtration_creator="false"
      @confirm="confirmAdministrator"
    />
  </div>
</template>

<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import PageHeadTwo from '@/components/public/PageHeadTwo';
import BrawerBox from '@/components/public/BrawerBox';
export default {
  name: 'Preview',
  components: { EmployeeSelector, PageHeadTwo,BrawerBox },
  props:{
    parameter:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    employeeList:{
      type:Array,
      default:()=>{
        return []
      }
    },
    employeeId:{
      type:Array,
      default:()=>{
        return []
      }
    },
    groupId:{
       type:Number,
       default:()=>{
        return []
      }
     },
  },
  data() {
    return {
      selected: { employee: [], dept: [] }, //已经选择人员
      setAdministrator: false,
      // parameter:{},
      employee_list:[],
      dept_list:{name:''},
      userData:{
        id:'',
        name:'',
        img_url:''
      },//被预览用户
      group_id:'',//被预览考核表ID 非原生数据，必填
      raw_data:0,//是否原生数据 0 否 1 是
      dimension:{},//原生维度数据 原生数据，必填
      process:{},//原生流程数据 原生数据 必填

      flow:[],//
      tableData:[],
      execution: '目标制定并确认完毕后，进入到【执行中】阶段，期间员工执行计划，上级跟踪过程。管理员可以点击【开始评分】后，进入结果数据收集和评分阶段',
      isFlow: false,
      target: [],
      flowTitle:''
    };
  },
  mounted() {
    let userData=this.employeeId;
    this.employee_list=this.employeeList;
    this.userData=userData[0]
    this.selected.employee=userData
    this.group_id=this.groupId
    this.raw_data=this.groupId? 0:1
    this.getDeptLlist();
    if(this.parameter){
      this.getData();
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.wdLeg,
          colspan: 1
        };
      }
    },
    getUserImg(id) {
      return this.$getEmployeeList()[id].img_url;
    },
    //点击流程
    processDet(obj) {
      this.flowTitle = obj.remark;
      obj.target.forEach(item => {
        item.status_tow = obj.status;
      });
      this.target = obj.target;
      this.isFlow = true;
    },
    getData(){
      let data={
         employee_id_code:this.$returnCode(this.userData.id),//被预览用户
         // group_id:this.group_id,//被预览考核表ID 非原生数据，必填
         raw_data:1,//是否原生数据 0 否 1 是
         dimension:this.parameter.dimension,//原生维度数据 原生数据，必填
         process:this.parameter.process,//原生流程数据 原生数据 必填
      }
      this.$axios('post', '/api/per/evaluation/preview', data).then(res => {
        if (res.data.code == 1) {

            let flow=res.data.data.list[0].process;
            let dimension=res.data.data.list[0].dimension
            let tableData=[]
            dimension.forEach(item=>{
              if(item.index.length>0){
                item.index.forEach(item2=>{
                   item2.wdName=item.name;
                   item2.wdLeg=0;
                   item.index[0].wdLeg=item.index.length
                   tableData.push(item2)
                })
              }
            })
            flow.forEach(item => {
              let remName = item.remark;
              item.target.forEach((add, att) => {
                remName += add.employee_name;
                remName += item.target.length - att > 1 ? ',' : '';
              });
              item.remarks = remName;
              item.remarkDel = item.remark.split('：')[0];
            });
            this.flow=flow
            this.tableData=tableData
        }
      });
    },

    //选择人员
    addUser() {
      this.selected.employee = this.userData.name ? [this.userData] : [];
      this.setAdministrator = true;
    },
    confirmAdministrator(e) {
      this.userData = e.employee.length > 0 ? e.employee[0] : [];
      this.getDeptLlist();
      this.getData();
      this.setAdministrator = false;
    },
    getDeptLlist(){
      this.$nextTick(()=>{
        if(this.$getEmployeeList()[this.userData.id]){
         this.dept_list=this.$getEmployeeList()[this.userData.id].dept_list
        }
      })
    }
  }
};
</script>

<style scoped="scoped">
.container {
  height: 100%;
  font-size: 14px;
  width: 100%;
}
.all {
  position: relative;
  min-width: 1100px;
  box-sizing: border-box;
  padding: 20px;
}
.main {
  margin-top: 40px;
  overflow: auto;
}
.inputDc {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
}
.primaryBtn {
  margin-left: 20px;
}
.el-icon-more {
  cursor: pointer;
  width: 20px;
  vertical-align: middle;
}
.flow-item-start,
.flow-item {
  background-color: #f4f6f9;
  height: 36px;
  width: 300px;
  text-align: center;
  position: relative;
  margin-right: 20px;
  margin-top: 20px;
  padding: 0 10px;
}
.flow-box{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 240px;
  display: inline-block;
}
.flow-item-start::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-left: 20px solid #f4f6f9;
  border-bottom: 18px solid transparent;
  border-radius: 2px;
  top: 0;
  right: -20px;
}
.flow-item::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-left: 20px solid #fff;
  border-bottom: 18px solid transparent;
  border-radius: 2px;
  top: 0;
  left: 0px;
}
.flow-item::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-left: 20px solid #f4f6f9;
  border-bottom: 18px solid transparent;
  border-radius: 2px;
  top: 0;
  right: -20px;
}
.detailsPonit{
  margin-left:10px;
  font-size: 14px;
  color: #848484;
  cursor:pointer;
}
.li {
  border-bottom: 1px solid #f1f1f1;
  padding: 10px 0;
}
.ul {
  margin: 20px 0;
  margin-top: 10px;
}
.btn {
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
}
</style>
