<template>
  <div class="all boxMinHeight">
    <PageHead :routePush="pushAssMan">
      <template slot="headMent">
        <el-cascader
          v-model="headValue"
          :options="options"
          :show-all-levels="false"
          :props="{
            expandTrigger: 'hover',
            label: 'name',
            value: 'id',
            children: 'list'
          }"
        ></el-cascader>
      </template>
    </PageHead>
    <header v-loading="assDetLoad">
      <div class="flex-box flex-d-center">
        <div class="flex-box">
          <div class="dept_wdiv">
            <div class="dept_inp" @click="show_dept_selector = true">
              <span v-if="deptVisibleName != ''">{{ deptVisibleName }}</span>
              <span v-else style="color: #b9b9b9;">选择部门</span>
            </div>
            <svg-icon slot="reference" icon-class="xArrowsX" />
          </div>
          <EmployeeSelector
            :title="'选择部门'"
            :isChecKedAll="false"
            :can_select_employee="false"
            :can_select_dept="true"
            :dept_children="false"
            :selected="dept_selected"
            :visible.sync="show_dept_selector"
            @confirm="dept_confirm"
          />
          <el-select v-model="groupValue" clearable  class="margin-l" placeholder="选择考核表">
            <el-option v-for="item in groupOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <div class="margin-l" style="width:200px;"><JxSearch :screen="2"  title="请输入姓名搜索" @confirm="aDetSearch"></JxSearch></div>
        </div>
      </div>
      <div class="table-box" style="margin-top: 20px;">
        <el-tabs v-model="glIndex">
          <el-tab-pane :label="item.title" :name="item.name" v-for="(item, index) in glIist" :key="index">
            <span slot="label">
              <el-tooltip  effect="dark" placement="top-start" v-if="item.text">
                  <div slot="content">
                    <div>{{item.text}}</div>
                  </div>
                  <span><span>{{ item.title }}</span><i class="el-icon-warning fontColorC"></i></span>
              </el-tooltip>
              <span v-else>{{ item.title }}</span>
            </span>
            <el-table stripe :data="glDataList" v-loading="glLoading">
              <el-table-column prop="name" label="被考核人">
                <template slot-scope="scope">
                  <div class="flex-box-ce">
                    <userImage
                      :id="scope.row.userInfo.id"
                      :user_name="scope.row.userInfo.name"
                      :img_url="scope.row.userInfo.img_url"
                      width="35px"
                      height="35px"
                      fontSize="12px"
                    ></userImage>
                    <span style="margin-left: 10px; line-height: 50px;">{{ scope.row.userInfo.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="部门">
                <template slot-scope="scope">
                  <div v-if="scope.row.dept_list.length > 0">
                    <span v-for="(item, index) in scope.row.dept_list" :key="index">
                      {{ item.name }}
                      <span v-if="scope.row.dept_list.length - index > 1">,</span>
                    </span>
                  </div>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="package_name" label="考核时段"></el-table-column>
              <el-table-column prop="status" label="评分进度">
                <template slot-scope="scope">
                  <span v-if="scope.row.status==0" class="yellow">未到评分节点</span>
                  <span v-if="scope.row.status==1" class="blue">待我评分</span>
                  <span v-if="scope.row.status==2" class="green">我已评分</span>
                  <span v-if="scope.row.status==3" class="green">已被其他管理评分</span>
                </template>
              </el-table-column>
              <el-table-column prop="score_info" label="评分">
                <template slot-scope="scope">
                    <div v-if="scope.row.score_info.length>0">
                      <div v-for="(item,index) in returnPoint(scope.row)" :key="index">
                        <div style="margin-top: 5px;" v-if="item.pointList.length>0">{{item.name}}:<span class="blue">{{item.pointList.toString()}}</span></div>
                         <div v-else>--</div>
                      </div>
                    </div>
                    <div v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="openDetail2(scope.row)" type="text" >查看详情</el-button>
                  <el-button v-if="scope.row.status == 1" @click="openDetail2(scope.row)" type="text" >去评分</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <Pagination :page_size="page_size" :page="page" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
        </el-tabs>
      </div>
    </header>
  </div>
</template>
<script>
import PageHead from '@/components/public/PageHead'; //头部---返回
import JxSearch from '@/components/public/JxSearch'; //搜索
import EmployeeSelector from '@/components/public/EmployeeSelector';
export default {
  name:'score',
  data() {
    return {
      page: 1,
      page_size: 10,
      total: 0,
      nowass: false, //已开始评分显示隐藏
      pushAssMan: null, //头部跳转
      assDetLoad: false, //loading
      headValue: [], //顶部选择考核
      options: [], //顶部考核数据
      groupValue: '', //选择考核表val
      groupOptions: [], //选择考核表数据
      scoreGroup: [], //评分考核表

      deptVisibleName: '', //部门名称
      dept_selected: { dept: [], employee: [] },
      show_dept_selector: false,
      deptList_id: [],
      package_id: '',

      name: '', //搜索名称
      glIndex: '0',
      glIist: [{ name: '0', title: '全部',text:'' }, { name: '1', title: '我的团队',text:'' }, { name: '2', title: '我协助评分的',text:'' }],
      glLoading: false,
      glDataList: []
    };
  },
  components: { PageHead, JxSearch, EmployeeSelector },
  watch: {
    groupValue(val) {
      this.getScorerRecord();
    },
    glIndex(val) {
      this.page = 1;
      this.getScorerRecord();
    },
    headValue(val) {
      this.package_id = val[val.length - 1];
      this.groupValue = '';
      this.getGroup();
      this.getScorerRecord();
      this.$setCache("cache_s_m",val)//缓存我的管理列表和我的评分列表选择的考核包
    }
  },
  created() {
    this.assessTree();
  },
  methods: {
    returnPoint(item){
      let id=item.node_info.id;
      let stats=item.status;
      let arr=[{name:'上级评分',pointList:[]},{name:'特定指标评分',pointList:[]}];
      item.score_info.forEach(e=>{
        if(stats==0){
          if(e.node_id<id){
            if(e.node_code=='score_supervisor'){//上级评分
              if(e.node_id==id&&stats==1){
                arr[0].pointList.push(e.point+"(暂存)")
              }else{
                arr[0].pointList.push(e.point)
              }
            }else{//指定评分呢
              if(e.node_id==id&&stats==1){
                arr[1].pointList.push(e.point+"(暂存)")
              }else{
                arr[1].pointList.push(e.point)
              }
            }
          }
        }else{
          if(e.node_id<=id){
            if(e.node_code=='score_supervisor'){//上级评分
              if(e.node_id==id&&stats==1){
                arr[0].pointList.push(e.point+"(暂存)")
              }else{
                arr[0].pointList.push(e.point)
              }
            }else{//指定评分呢
              if(e.node_id==id&&stats==1){
                arr[1].pointList.push(e.point+"(暂存)")
              }else{
                arr[1].pointList.push(e.point)
              }
            }
          }
        }
      })
      return arr;
    },
    openDetail2(item) {
      this.$router.push({
        path: '/staffAssDet',
        query: {
          assID: this.package_id,
          employeeID: item.record_id,
          employeeIDs: item.employee_id
        }
      });
    },
    //我评分的
    getScorerRecord() {
      if(this.headValue.length==0){
        return false
      }
      this.glLoading = true;
      let data = {
        range: this.glIndex,
        package_id: this.package_id||0,
        name: this.name,
        page: this.page,
        page_size: this.page_size,
        dept_id: JSON.stringify(this.deptList_id)
      };
      if (this.groupValue) {
        data.group_id = this.groupValue;
      }
      this.$axios('get', '/api/per/package/score_record', data)
        .then(res => {
          let list = res.data.data.list;
          list.forEach(item => {
            if (item.employee_id) {
              //当是导入导出时，显示登录者
              item.userInfo = this.$getEmployeeList()[item.employee_id];
			  if(this.$getEmployeeList()[item.employee_id]){
				  item.dept_list = this.$getEmployeeList()[item.employee_id].dept_list;
			  }
            }
          });
          this.glDataList = list;
          this.total = res.data.data.total;
        })
        .finally(() => {
          this.glLoading = false;
        });
    },
    aDetSearch(data) {
      //搜索回调
      this.page = 1;
      this.name = data;
      this.getScorerRecord();
    },
    //获取考核表
    getGroup() {
      if(!this.package_id){
        return false
      }
      this.$axios('get', '/api/per/package/group', { package_id: this.package_id }).then(res => {
        if (res.data.code == 1) {
          this.groupOptions = res.data.data;
        }
      });
    },
    //请求绩效树
    assessTree() {
      this.$axios('get', '/api/per/package/tree').then(res => {
        if (res.data.code == 1) {
          this.options = res.data.data;
          let headValue = [];
          this.options.some(item => {
            if (item.list.length > 0) {
              headValue.push(item.id);
              headValue.push(item.list[0].id);
              return true;
            }
          });
          let cache_s_m=this.$getCache('cache_s_m');//缓存的数据
          if(cache_s_m){
            this.headValue=cache_s_m
          }else if(this.$route.query.headValue){
            this.headValue=JSON.parse(this.$route.query.headValue)
          }else{
            if (headValue.length > 0) {
              this.headValue = headValue;
            }
          };
        }
      });
    },
    dept_confirm(data) {
      //部门选择
      this.dept_selected = { dept: [], employee: [] };
      let deptList_id = [];
      this.deptVisibleName = '';
      if (data.dept !== null && data.dept.length != 0) {
        this.dept_selected = data;
        data.dept.forEach((element, index) => {
          deptList_id.push(element.dept_id);
          this.deptVisibleName += element.dept_name;
          if (data.dept.length - index > 1) {
            this.deptVisibleName += ',';
          }
        });
      }
      this.deptList_id = deptList_id;
      this.getScorerRecord();
    },
    // 页面变更
    handleCurrentChange(val) {
      this.page = val;
      this.getScorerRecord();
    },
    // 页面跳转
    handleSizeChange(val) {
      this.page_size = val;
      this.getScorerRecord();
    }
  },
  beforeRouteLeave(to, from, next) {
    if(to.name!='staffAssDet'){
      localStorage.removeItem("cache_s_m")
    }
    next();
  }
};
</script>
<style scoped lang="scss">
.all {
  padding: 20px;
  background-color: #fff;
  font-size: 14px;
}
header {
  margin-top: 20px;
  .dept_wdiv {
    width: 150px;
    position: relative;
    .dept_inp {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 9;
      border: 1px solid #e0e0e0;
      border-radius: 3px;
      line-height: 40px;
      font-size: 14px;
      padding: 0 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      color: #676767;
    }
    svg {
      position: absolute;
      top: 14px;
      right: 10px;
      font-size: 14px;
      color: #b5b5b5;
    }
  }
  .navigationL {
    background-color: #f5f5f5;
    border: 1px solid #e4e4e4;
    width: 100%;
    height: 50px;
    margin: 25px 0px 15px 0;
    ::v-deep .action {
      color: #428eff;
    }
    span:hover {
      color: #428eff;
    }
    span {
      display: flex;
      cursor: pointer;
      font-size: 14px;
      padding: 15px;
      position: relative;
      width: 100%;
      justify-content: center;
      svg {
      }
      .navsvg1 {
        color: #3a3a3a;
        font-size: 15px;
        position: relative;
        margin-top: 2px;
      }
      .navsvg2,
      .navsvg3 {
        position: absolute;
        top: 16px;
        right: 0;
      }
      .navsvg2 {
        color: rgb(140, 140, 140);
        font-size: 15px;
      }
      .navsvg3 {
        transform: rotate(270deg);
        color: #8c8c8c;
      }
    }
  }

  ::v-deep .el-table tr:hover {
    cursor: pointer;
  }
}

.braTab {
  padding: 20px 0 0 20px;
  ::v-deep .el-table tr:hover {
    cursor: pointer;
  }
  ::v-deep .el-table__row {
    .cell {
      padding-left: 10px;
    }
  }
  ::v-deep td .cell {
    padding: 10px 0;
  }
}

.margin-l {
  margin-left: 10px;
}
.width-300 {
  width: 300px;
}
.m-content {
}
.m-title {
  color: #909399;
}
.ul {
  margin: 20px 0;
  margin-top: 0;
}
.li {
  border-bottom: 1px solid #ebebeb;
}
.li .flex-box-ce {
  padding: 15px 0;
}
.li:hover {
  background-color: #f5f7fa;
}
</style>
