<template>
  <div class="box">
	<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}} <span v-if="item.num">({{item.num}})</span></div>
            </li>
          </ul>
          <noData v-else content='暂无分类' imgW="120px" imgH="80px"></noData>
        </div>
        <div class="flex-1 main-right">
          <div v-if="messageList.length>0" v-loading="loading">
            <div class="flex-box-ce item" v-for="(item, index) in messageList" :key="index" @click="disposeMessage(item)">
              <!-- 导入导出显示登陆者 -->
              <template v-if="item.type==3||item.type==4">
                 <template v-if="item.userInfo2">
                    <userImage :img_url="item.userInfo2.img_url" :user_name="item.userInfo2.name" fontSize="14" width="40px" height="40px"></userImage>
                 </template>
              </template>
              <template v-else>
                 <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>
              </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_size="page_size" :page="page" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
          </div>
          <NoData v-else content="暂无内容"></NoData>
        </div>
    </div>
  </div>
</template>

<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import PageHeadTwo from '@/components/public/PageHeadTwo'
export default {
  name: 'unread',
  components: { EmployeeSelector,PageHeadTwo },
  data() {
    return {
      total: 0,
      page: 1,
      page_size: 10,
      tabs: [
        {name:'未读',num:0},
        {name:'已读',num:''},
      ],
      loading:false,
      selectIndex:0,
      messageList: [], //消息列表
    }
  },
  created() {
    if(this.$route.query.selectIndex){
      this.selectIndex=this.$route.query.selectIndex;
    }
  },
  mounted() {
    this.getMessage();
  },
  methods: {
    // 处理未读信息
    disposeMessage(item){
      if(item.type==1||item.type==2){
         this.$router.push({ path:'/staffAssDet',query:{
           assID:item.remark.package_id,
           employeeID:item.remark.packageEmployee_id,
           employeeIDs:item.remark.employee_id,
         }});
      }else if(item.type==3){ //导入

      }else{//导出
         window.open(this.$serverdomain + item.remark.file_path);
      }
      if(this.selectIndex==0){
          this.$axios('post', '/api/per/package/msg/cc', { id: item.id, type: item.type, employee_id_code: this.$returnCode(item.employee_id) }).then(res => {
            this.getMessage();
          })
      }
    },
    //待办
    getMessage() {
      this.loading=true;
      this.$axios('get', '/api/per/package/msg/cc', { 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.tabs[this.selectIndex].num=res.data.data.total;
        this.$nextTick(()=>{
          this.messageList = list;
          this.total = res.data.data.total;
        })
      }).finally(()=>{
        this.loading=false;
      });
    },
    activeLi(item, index) {
      this.selectIndex = index;
      this.page=1;
      this.getMessage();
    },
    // 页面变更
    handleCurrentChange(val) {
      this.page = val;
      this.getMessage();
    },
    // 页面跳转
    handleSizeChange(val) {
      this.page_size = val;
      this.getMessage();
    }
  },
};

</script>

<style scoped="scoped">
.box {
  padding: 20px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
}
.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>
