<style scoped>
.page_WorkEntrustment{padding-top: 30px;}
.page_WorkEntrustment .page_WEM_top{text-align: right;padding: 30px 0}
.page_WorkEntrustment .page_WEM_content{overflow-x: auto;}
.page_WorkEntrustment .page_WEM_content li{display: flex;border: 1px solid #ebebeb;background-color: white;margin-bottom: 20px;}
.page_WorkEntrustment .page_WEM_content li>div{width: 100%;}
.page_WorkEntrustment .page_WEM_content_tit{color: #666666;font-size: 16px;margin-bottom: 10px;}
.page_WorkEntrustment .page_WEM_content_tit .iconfont{color: #999999}
.page_WorkEntrustment .page_WEM_content_sub{color: #333333;font-size: 14px;}
.page_WorkEntrustment .page_WEM_content_sub span{padding-right: 20px;}
.page_WorkEntrustment .page_WEM_content_sub img{width: 32px; height: 32px;border-radius: 50%;margin-right: 10px}
.page_WorkEntrustment ._flex_center{display: flex;align-items: center;}
.page_WorkEntrustment .page_WEM_content .el-col-6{padding:17px 29px;height: 100%;}
.page_WorkEntrustment ._wait{color: #2AAEF2}
.page_WorkEntrustment ._effective{color: #47BF8C}
.page_WorkEntrustment ._Invalid{color: #999999}
.page_WorkEntrustment .page_WEM_content_sub .hollowFixedBtn{margin-left: 0;}
.page_WorkEntrustment .border_left_dashed{border-left: 1px dashed #DCDFE6}
</style>
<template>
    <div class="page_WorkEntrustment">
        <div class="page_WEM_content _scrollbar" >
            <ul>
                <li v-for="(item,index) in dataList">
                    <el-row>
                        <el-col :span="6" class="">
                            <p class="page_WEM_content_sub _flex_center"><img :src="item.UserPhoto" :onerror='defaultImg' alt=""><span>{{item.UserName}}</span></p>
                        </el-col>                        
                        <el-col :span="6" class="border_left_dashed">
                            <p class="page_WEM_content_tit"><i class="iconfont icon-img_kqyyjl"></i> 工作内容</p>
                            <p class="page_WEM_content_sub">
                                <template v-for="(son,sindex) in item.delegateContent">
                                    <span v-if="son=='1'">工作审批</span>
                                    <span v-if="son=='2'">单据审批</span>
                                    <span v-if="son=='3'">客户审批</span>
                                </template>                                
                            </p>
                        </el-col>
                        <el-col :span="6"  class="border_left_dashed">
                            <p class="page_WEM_content_tit"><i class="iconfont icon-img-rili"></i> 时间段</p>
                            <p class="page_WEM_content_sub">{{item.StartDate}} 至 {{item.EndDate}}</p>
                        </el-col>
                        <el-col :span="6" class="border_left_dashed">
                            <p class="page_WEM_content_tit"><i class="iconfont icon-view"></i> 状态</p>
                            <p class="page_WEM_content_sub _wait" v-if="item.DelegateEffectState==1">等待生效</p>
                            <p class="page_WEM_content_sub _effective" v-if="item.DelegateEffectState==2">生效中</p>
                            <p class="page_WEM_content_sub _Invalid" v-if="item.DelegateEffectState==3">已失效</p>
                        </el-col>
                    </el-row>
                </li>
            </ul>
            <div class="noData" v-show="noData">
            {{$t('system.content_noData')}}
            </div>
            <div>
                <el-pagination 
                    background
                    @current-change="handleCurrentChange" 
                    :current-page.sync="currentPage"
                    layout="total,prev, pager, next, jumper"
                    :page-size=msg.pageSize 
                    :total=total>
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            noData:false,
            total:0,  
            currentPage:1,
            dataList:[],
            msg:{
                pageIndex:1,
                pageSize:5,
            },
            defaultImg: 'this.src="' + require("../../assets/img/default_head_img.jpg") + '"'
        }
    },
    methods:{
        getList() {  //获取列表数据
            this.apipost('user_delegate_GetDelegateMePageList',this.msg, res => {
                if(res.data.resultCode == 1) {
                    let data = res.data.data.pageData;
                    this.total = res.data.data.count;
                    if(this.total<=0){
                        this.noData = true;
                    }else{
                        data.forEach(x=>{
                            x.delegateContent = x.DelegateContent.split(',');
                        })
                        this.dataList = res.data.data.pageData;
                    }                   
                }
            }, err => {})				
        },
        resetPageIndex() {//查询初始化页码
            this.msg.pageIndex = 1;
            this.currentPage = 1
        },
        handleCurrentChange(val) {//翻页功能按钮
            this.msg.pageIndex = val;
            this.getList();
        },
    },
    mounted(){
        this.getList();
    }
}
</script>