<template>
  <div class="box boxMinHeight">
    <PageHeadTwo title="待办事项"></PageHeadTwo>
    <div class="main flex-box">
      <div class="main-left">
        <ul class="ul scroll-bar" v-if="tabs.length > 0">
          <li class="flex-box-ce li" v-for="(item, index) in tabs" :key="index" :class="[selectIndex == index ? 'isActiveLi' : '']" @click="activeLi(item, index)">
            <div class="index-name font-flex-word">{{ item.name }}</div>
          </li>
        </ul>
        <noData v-else content="暂无分类" imgW="120px" imgH="80px"></noData>
      </div>
      <div class="flex-1 main-right">
        <el-tabs v-model="activeName" class="tabs" v-if="selectIndex==0">
          <el-tab-pane :title="tab.title" :name="tab.name" :key="tab.name" v-for="(tab, index) in editableTabs">
            <span slot="label" v-if="tab.num>0">
                <el-badge :value="tab.num" :max="999">
                  <span>{{tab.title}}</span>
                </el-badge>
             </span>
             <span slot="label" v-else>
                  <div style="position: relative;vertical-align: middle;display: inline-block;">
                    <span>{{ tab.title }}</span>
                  </div>
              </span>
            <div v-if="agencyList.length > 0" v-loading="loading">
              <div class="flex-box-ce item" v-for="(item, index) in agencyList" :key="index" @click="openDetail(item)">
                <template v-if="item.userInfo">
                  <userImage :img_url="item.userInfo.img_url" :user_name="item.userInfo.name" fontSize="14" width="40px" height="40px"></userImage>
                </template>
                <div class="flex-1 font-flex-word content">{{ item.content }}</div>
                <div class="fontColorB">
                  {{ $moment(item.update_time).format('YYYY-MM-DD HH:mm') }}
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <Pagination :page="page" :page_size="page_size" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
            </div>
            <NoData v-else content="暂无内容"></NoData>
          </el-tab-pane>
        </el-tabs>
        <template v-else>
          <div v-if="agencyList.length > 0" v-loading="loading">
            <div class="flex-box-ce item" v-for="(item, index) in agencyList" :key="index" @click="openDetail(item)">
              <template v-if="item.userInfo">
                <userImage :img_url="item.userInfo.img_url" :user_name="item.userInfo.name" fontSize="14" width="40px" height="40px"></userImage>
              </template>
              <div class="flex-1 font-flex-word content">{{ item.content }}</div>
              <div class="fontColorB">
                {{ $moment(item.update_time).format('YYYY-MM-DD HH:mm') }}
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
            <Pagination :page="page" :page_size="page_size" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
          </div>
          <NoData v-else content="暂无内容"></NoData>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import PageHeadTwo from '@/components/public/PageHeadTwo';
export default {
  name: 'backlog',
  components: { EmployeeSelector, PageHeadTwo },
  data() {
    return {
      total: 0,
      page: 1,
      page_size: 10,
      tabs: [{ name: '待处理', num: 0 }, { name: '已处理', num: '' }],
      editableTabs: [
        { title: '全部待办', name: '0', num: 0 },
        { title: '目标制定', name: '1', num: 2 },
        { title: '目标确认', name: '2', num: 15 },
        { title: '结果录入', name: '4', num: 0 },
        { title: '评分', name: '5', num: 2 },
        { title: '审批', name: '9', num: 33 }
      ],
      activeName:'0',
      loading: false,
      selectIndex: 0,
      agencyList: []
    };
  },
  created() {
    if(this.$route.query.activeName){
      this.activeName=this.$route.query.activeName;
    }
    if(this.$route.query.selectIndex){
      this.selectIndex=this.$route.query.selectIndex;
    }
    this.getAgencyNum();
  },
  mounted() {
    this.getAgency();
    this.getAgencyALL();
  },
  watch: {
    activeName() {
      this.page = 1;
      this.getAgency();
      this.getAgencyALL();
    }
  },
  methods: {
    //待办数量
    getAgencyNum() {
      this.$axios('get', '/api/per/package/msg/agency_num', { status:0 }).then(res => {
          let data=res.data.data
          this.editableTabs=[
            { title: '全部待办', name: '0', num: 0 },
            { title: '目标制定', name: '1', num: data.target },
            { title: '目标确认', name: '2', num: data.confirm },
            { title: '结果录入', name: '4', num: data.result_value },
            { title: '评分', name: '5', num: data.score },
            { title: '审批', name: '9', num: data.review }
          ]
      })
    },
    openDetail(item) {
      if (item.type == 1) {
        let data={
          assID: item.remark.package_id,
          employeeID: item.remark.packageEmployee_id,
          employeeIDs: item.remark.employee_id,
        }
        if(this.selectIndex==0){
          data.pendingList=JSON.stringify(this.pendingList);
          data.page=this.page;
        }
        this.$router.push({
          path: '/staffAssDet',
          query:data
        });
      } else {
        this.$router.push({ name: 'resultSet', query: { id: item.remark.packageEmployee_id, packageName: item.remark.package_name } });
      }
    },
    //待办
    getAgency() {
      this.loading = true;
      this.$axios('get', '/api/per/package/msg/agency', { node_type: this.activeName, status: this.selectIndex, page: this.page, page_size: this.page_size })
        .then(res => {
          let list = res.data.data.list;
          list.forEach(item => {
            if (item.remark.employee_id) {
              //被考核人
              item.userInfo = this.$getEmployeeList()[item.remark.employee_id];
            }
            if (item.employee_id) {
              //当是导入导出时，显示登录者
              item.userInfo2 = this.$getEmployeeList()[item.employee_id];
            }
          });
          this.agencyList = list;
          this.total = res.data.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getAgencyALL() {
      this.$axios('get', '/api/per/package/msg/agency', { node_type: this.activeName, status:0, page: 1, page_size: 10000 })
        .then(res => {
          let list = res.data.data.list;
          let pendingList=[];
          list.forEach(item => {
            if (item.remark.employee_id) {
               let userInfo=this.$getEmployeeList()[item.remark.employee_id];
               pendingList.push({name:userInfo.name,img_url:userInfo.img_url,employeeID:item.remark.packageEmployee_id,package_name:item.remark.package_name})
            }
          });
          this.pendingList=pendingList;
        })
    },
    activeLi(item, index) {
      this.selectIndex = index;
      if(index==1){
         this.activeName='0';
      }else{
         this.getAgencyALL();
      }
      this.page = 1;
      this.getAgency();
    },
    // 页面变更
    handleCurrentChange(val) {
      this.page = val;
      this.getAgency();
    },
    // 页面跳转
    handleSizeChange(val) {
      this.page_size = val;
      this.getAgency();
    }
  }
};
</script>

<style scoped="scoped">
.tabs ::v-deep.el-badge__content.is-fixed {
  position: absolute;
  top: 50%;
  right: -2px;
}
.box {
  padding: 20px;
  font-size: 14px;
  position: relative;
  background-color: #fff;
}
.main {
  margin-top: 40px;
}
/* bug： 我在flex布局的元素中使用了elementui的table组件，饿了么的table上会被加一个动态的宽度， 当第一次改变flex元素宽度的时候。table的动态宽度会变化，第二次和以后就不会变化了。*/
/* 给使用flex的元素加上 overflow-x：hidden */
.main-right {
  margin-left: 20px;
  overflow-x: hidden;
}
.main-left {
  width: 200px;
  border-radius: 3px;
  box-sizing: border-box;
}
.main-left::after {
  position: absolute;
  content: '';
  width: 1px;
  height: auto;
  left: 220px;
  top: 0;
  bottom: 0;
  background-color: #f1f1f1;
}
::v-deep .has-gutter {
  display: none;
}
.li {
  height: 53px;
  line-height: 53px;
  padding: 0 20px;
  border-bottom: 1px solid #f1f1f1;
  color: #777777;
  width: 100%;
}
.li:hover {
  background-color: #f5f7fa;
}
.li:hover .el-icon-more {
  display: block;
}
.index-name {
  width: 170px;
}
.ul {
  max-height: calc(100vh - 230px);
  overflow: auto;
  width: 200px;
}
.isActiveLi {
  background-color: #f5f7fa;
  color: #409eff !important;
  position: relative;
}
.isActiveLi::after {
  width: 3px;
  content: ' ';
  background-color: #409eff;
  left: 0;
  bottom: 0;
  top: 0;
  position: absolute;
}
.item {
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  border-bottom: 1px solid #e8e8e8;
}
.item:hover {
  background-color: #f5f7fa;
}
.content {
  padding: 0 10px;
}
</style>
