<template>
  <div class="container">
    <div class="all boxMinHeight">
      <PageHeadTwo title="预览流程"></PageHeadTwo>
      <div class="main scroll-bar">
        <div class="flex-box-ce">
          <div class="flex-1 title">{{ name }}</div>
          <el-input prefix-icon="el-icon-search" placeholder="请输入名字搜索" v-model="userName" style="width: 250px;"></el-input>
        </div>
        <el-divider></el-divider>
        <div v-for="(item, index) in flow" :key="index" v-if="item.employee.name.indexOf(userName) >= 0">
          <div class="flex-box-ce">
            <userImage :user_name="item.employee.name" :img_url="item.employee.img_url" fontSize="14" width="50px" height="50px"></userImage>
            <div>
              <div class="name" style="margin: 0 10px;margin-bottom: 5px;">{{ item.employee.name }}</div>
              <div class="name fontColorC" style="margin: 0 10px;" v-if="getDeptLlist(item.employee.id).length > 0">
				<span v-for="(dept,index2) in getDeptLlist(item.employee.id)">{{dept.name}}<span v-if="getDeptLlist(item.employee.id).length - index2 > 1">,</span></span>
			  </div>
            </div>
          </div>
          <div class="flex-box-ce flex-d-wrap">
            <div v-for="(item2, index2) in item.process" :key="index2" :class="[index2 == 0 ? 'flow-item-start' : 'flow-item']" class="flex-box-ce flex-center-center">
                <el-tooltip effect="dark" :content="item2.code == 'execution' ? execution : item2.remarks" placement="top">
                  <span class="flow-box">
                    <span>{{ index2 + 1 }}.{{ item2.remark }}</span>
                    <span v-if="item2.code == 'execution'"><i class="el-icon-warning-outline"></i>:</span>
                    <template v-if="item2.target.length > 0">
                      <span v-for="(item3, index3) in item2.target" :key="index3">
                        {{ item3.employee_name }}
                        <span v-if="item2.target.length - index2 > 1">,</span>
                      </span>
                    </template>
                  </span>
                </el-tooltip>
              <div @click.stop="processDet(item2)" style="width: 20px;" v-if="item2.target.length>0"><svg-icon icon-class="detailsPonit" class="detailsPonit"/></div>
            </div>
            <template v-if="item.process.length > 0">
              <div class="flow-item flex-box-ce flex-center-center">
                <el-tooltip effect="dark" content="结束" placement="top">
                  <span class="flow-box">
                    <span>{{ item.process.length + 1 }}.结束</span>
                   <!-- <i class="el-icon-success blue" style="margin-right:10px;"></i> -->
                  </span>
                </el-tooltip>
              </div>
            </template>
          </div>
          <el-divider></el-divider>
        </div>
        <Pagination :page="page" :page_size="page_size" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
      </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>
  </div>
</template>

<script>
import PageHeadTwo from '@/components/public/PageHeadTwo';
import BrawerBox from '@/components/public/BrawerBox';
export default {
  name: 'preview',
  components: { PageHeadTwo, BrawerBox },
  data() {
    return {
      flow: [],
      name: '',
      userName: '',
      execution: '目标制定并确认完毕后，进入到【执行中】阶段，期间员工执行计划，上级跟踪过程。管理员可以点击【开始评分】后，进入结果数据收集和评分阶段',
      isFlow: false,
      target: [],
      flowTitle:'',
      total: 0,
      page: 1,
      page_size: 10,
    };
  },
  mounted() {
    if (this.$route.query.group_id) {
      this.name = this.$route.query.name;
      this.getData();
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex != 1) {
          return {
            rowspan: row.wdLeg,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    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: 'all', //被预览用户
        group_id: this.$route.query.group_id, //被预览考核表ID 非原生数据，必填
        raw_data: 0 ,//是否原生数据 0 否 1 是
        page:this.page,
        page_size:this.page_size,
      };
      this.$axios('post', '/api/per/evaluation/preview', data).then(res => {
        if (res.data.code == 1) {
          let flows = res.data.data.list;
          this.total=res.data.data.total;
          flows.forEach(obj=>{
            obj.process.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=flows;
        }
      });
    },

    getDeptLlist(id) {
      if (this.$getEmployeeList()[id]) {
        let dept_list = this.$getEmployeeList()[id].dept_list;
		console.log(dept_list)
        return dept_list.length > 0 ? dept_list : [];
      }
    },
    // 页面变更
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    // 页面跳转
    handleSizeChange(val) {
      this.page_size = val;
      this.getData();
    }
  }
};
</script>

<style scoped="scoped">
.container {
  background-color: #f4f6f9;
  font-size: 14px;
  width: 100%;
}
.all {
  box-sizing: border-box;
  background-color: #fff;
  padding: 20px;
}
.main {
  margin-top: 40px;
  overflow: auto;
}
.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;
}
.title {
  font-size: 16px;
  padding-right: 20px;
}
.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>
