<style scoped>
._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;}
._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
._scrollbar::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
.page_WorkEntrustmentMy .page_WEM_top{text-align: right;padding: 30px 0}
.page_WorkEntrustmentMy .page_WEM_content{overflow-x: auto;}
.page_WorkEntrustmentMy .page_WEM_content li{display: flex;border: 1px solid #ebebeb;background-color: white;margin-bottom: 20px;}
.page_WorkEntrustmentMy .page_WEM_content li>div{width: 100%;}
.page_WorkEntrustmentMy .page_WEM_content_tit{color: #666666;font-size: 16px;margin-bottom: 10px;}
.page_WorkEntrustmentMy .page_WEM_content_tit .iconfont{color: #999999}
.page_WorkEntrustmentMy .page_WEM_content_sub{color: #333333;font-size: 14px;}
.page_WorkEntrustmentMy .page_WEM_content_sub span{padding-right: 20px;}
.page_WorkEntrustmentMy .page_WEM_content_sub img{width: 32px; height: 32px;border-radius: 50%;margin-right: 10px}
.page_WorkEntrustmentMy ._flex_center{display: flex;align-items: center;}
.page_WorkEntrustmentMy .page_WEM_content .el-col-4{padding:17px 29px;height: 100%;}
.page_WorkEntrustmentMy ._wait{color: #2AAEF2}
.page_WorkEntrustmentMy ._effective{color: #47BF8C}
.page_WorkEntrustmentMy ._Invalid{color: #999999}
.page_WorkEntrustmentMy .page_WEM_content_sub .hollowFixedBtn{margin-left: 0;}
.page_WorkEntrustmentMy .border_left_dashed{border-left: 1px dashed #DCDFE6}
.page_WorkEntrustmentMy ._edHeight{height:430px;}
.page_WorkEntrustmentMy .edHeight{display: block !important;height: 290px;}
.page_WorkEntrustmentMy ._vMG_edit{overflow: auto;display: none;position:absolute;bottom:0;left: 0;font-family: 'PingFangSc-Fine';border-top:3px solid #38425d;background-color:#FFFFFF;padding: 10px;width: 100%;} 
.page_WorkEntrustmentMy ._vMG_edit ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 16px;color: #000000}
.page_WorkEntrustmentMy ._vMG_edit ._tit span{color: #666666}
.page_WorkEntrustmentMy ._vMG_edit form{padding: 25px 0}
.page_WorkEntrustmentMy .we_btn{text-align: right}
</style>
<template >
    <div class="page_WorkEntrustmentMy">
        <div class="page_WEM_top">
            <input type="button" value="新增委托" @click="addShow=true" class="normalBtn">
        </div>
        <div class="page_WEM_content _scrollbar" :class="addShow==true?'_edHeight':''">
            <ul>
                <li v-for="(item,index) in dataList">
                    <el-row>
                        <el-col :span="4">
                            <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="4" 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="4" class="border_left_dashed">
                            <p class="page_WEM_content_tit"><i class="iconfont icon-img-ren"></i> 受委托人</p>
                            <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="4" 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.CreateDate}}</p>
                        </el-col>
                        <el-col :span="4" 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-col :span="4" class="border_left_dashed" v-if="item.DelegateEffectState==1">
                            <p class="page_WEM_content_tit">操作</p>
                            <p class="page_WEM_content_sub"><button class="hollowFixedBtn" @click="user_delegate_CancelDelegate(item.Id)">取消委托</button></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 class="_vMG_edit" :class="addShow==true?'edHeight':''">
            <p class="_tit">新增委托</p>
            <el-form ref="form" :model="addMsg" label-width="100px">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="时间范围：">
                            <el-date-picker
                                class="h34"
                                v-model="transactionDate"
                                @change="timeAdd()"
                                type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="1">
                        <el-form-item label="受委托人：">
                            <el-select  v-model='addMsg.reciveEmpId' filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
                                <el-option v-for='item in searchList' 
                                    :label='item.name'
                                    :value='item.empId'
                                    :key='item.empId'>
                                    <span style="float: left">{{ item.name }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.departmentName }}</span>
                                </el-option>
                            </el-select> 
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="受委内容：">
                            <el-checkbox-group v-model="delegateContent">
                                <el-checkbox label="1" name="1" key="1">工作审批</el-checkbox>
                                <el-checkbox label="2" name="2" key="2">财务审批</el-checkbox>
                                <el-checkbox label="3" name="3" key="3">客户审批</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="we_btn">
                        <button type="button" class="normalBtn" @click="user_delegate_AddAuditDelegate()">{{$t('pub.saveBtn')}}</button>                            
                        <button class="hollowFixedBtn" type="button" @click="cancelEdit(),addShow=false">{{$t('pub.cancelBtn')}}</button>
                    </el-col>
                </el-row>
            </el-form>
        </div>       
    </div>
</template>
<script>
export default {
    data(){
        return{
            addShow:false,
            msg:{
                pageIndex:1,
                pageSize:5,
            },
            dataList:[],
            addMsg:{
                reciveEmpId:'',
                startDate:'',
                endDate:'',
                delegateContent:''
            },
            delegateContent:[],
            transactionDate:[],
            loading:false,
            searchList:[],
            noData:false,
            total:0,  
            currentPage:1,
            userId:0,
            defaultImg: 'this.src="' + require("../../assets/img/default_head_img.jpg") + '"'
        }
    },
    methods:{
        resetPageIndex() {//查询初始化页码
            this.msg.pageIndex = 1;
            this.currentPage = 1
        },
        handleCurrentChange(val) {//翻页功能按钮
            this.msg.pageIndex = val;
            this.getList();
        },
        cancelEdit(){ // 取消重置
            this.addMsg = {
                reciveEmpId:'',
                startDate:'',
                endDate:'',
                delegateContent:''
            };
            this.delegateContent = [];
            this.transactionDate = [];
        },
        timeAdd(){  // 日期格式        
            if(!this.transactionDate){
                this.msg.startDate = '';
                this.msg.endDate = '';
                return 
            }            
            this.addMsg.startDate = this.transactionDate[0];
            this.addMsg.endDate = this.transactionDate[1];
        },
        getList() {  //获取列表数据
            this.apipost('user_delegate_GetMyDelegatePageList',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{
                        this.noData = false;
                        data.forEach(x=>{
                            x.delegateContent = x.DelegateContent.split(',');
                        })
                        this.dataList = res.data.data.pageData;
                    }
                }
            }, err => {})
        },
        user_delegate_CancelDelegate(id){ // 取消委托
            this.$confirm('是否取消委托?取消后不可撤回！', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.apipost('user_delegate_CancelDelegate',{delegateId:id}, res => {
                    if(res.data.resultCode == 1) {
                        this.getList();
                        this.$message.success(res.data.message);
                    }else{
                        this.$message.error(res.data.message);
                    }
                }, err => {})                  
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });          	
        },
        user_delegate_AddAuditDelegate(){ // 新增委托
            if(this.delegateContent.length<=0){
                return this.$message.error('请选择委托内容！');
            }else{
                this.addMsg.delegateContent = this.delegateContent.join(',');
            }
            if(this.addMsg.reciveEmpId==''){
                return this.$message.error('请选择受委托人！');
            }
            if(this.addMsg.reciveEmpId==this.userId){
                this.addMsg.reciveEmpId='';
                this.searchList = [];
                return this.$message.error('不能选择自己为委托人！');
            }
            if(this.addMsg.startDate==''){
                return this.$message.error('请选择时间范围！');
            }            
            this.apipost('user_delegate_AddAuditDelegate',this.addMsg, res => {
                if(res.data.resultCode == 1) {
                    this.addShow = false;
                    this.$message.success(res.data.message);
                    this.cancelEdit();
                }else{
                    this.$message.error(res.data.message);
                }
                this.getList();
            }, err => {})	
        },
        remoteMethod(query) {  // 远程搜索
            if (query !== '') {
                this.loading = true;
                this.apipost("admin_Get_Chat_All_SelectEmpName",{ EmName: query },res => {
                    if (res.data.resultCode == 1) {
                        if (res.data.data.length > 1) {
                            this.searchList = [];
                        }
                        this.searchList = res.data.data;                   
                        this.searchList.forEach((x, index) => {
                            this.$set(this.searchList, index, x);
                        });
                        this.loading = false;
                    }
                },err => {})
            }
        }
    },
    mounted(){
        this.getList()
        let userInfo=this.getLocalStorage();
        this.userId = userInfo.EmployeeId;
    }
}
</script>