<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="$t('objFill.xingzenwt')" @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>{{$t('objFill.shijianduan')}}</p>
                            <p class="page_WEM_content_sub">{{item.StartDate}} {{$t('OrderList.zhi')}} {{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>{{$t('objFill.gongzuonr')}}</p>
                            <p class="page_WEM_content_sub">
                                <template v-for="(son,sindex) in item.delegateContent">
                                    <span v-if="son=='1'">{{$t('objFill.gongzuosp')}}</span>
                                    <span v-if="son=='2'">{{$t('objFill.danjushenpi')}}</span>
                                    <span v-if="son=='3'">{{$t('objFill.kehushenpi')}}</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>{{$t('objFill.weituoren')}}</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>{{$t('fnc.cjshijian')}}</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>{{$t('admin.admin_status')}}</p>
                            <p class="page_WEM_content_sub _wait" v-if="item.DelegateEffectState==1">{{$t('objFill.dengdaisx')}}</p>
                            <p class="page_WEM_content_sub _effective" v-if="item.DelegateEffectState==2">{{$t('active.cl_sxzhong')}}</p>
                            <p class="page_WEM_content_sub _Invalid" v-if="item.DelegateEffectState==3">{{$t('objFill.yisixiao')}}</p>
                        </el-col>
                        <el-col :span="4" class="border_left_dashed" v-if="item.DelegateEffectState==1">
                            <p class="page_WEM_content_tit">{{$t('hotel.table_operat')}}</p>
                            <p class="page_WEM_content_sub"><button class="hollowFixedBtn" @click="user_delegate_CancelDelegate(item.Id)">{{$t('objFill.quxiaowt')}}</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">{{$t('objFill.xingzenwt')}}</p>
            <el-form ref="form" :model="addMsg" label-width="100px">
                <el-row>
                    <el-col :span="11">
                        <el-form-item :label="$t('salesModule.TimeRange')">
                            <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="$t('objFill.weituoren')">
                            <el-select  v-model='addMsg.reciveEmpId' filterable remote reserve-keyword :placeholder="$t('pub.PleaseKeyWords')" :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="$t('objFill.shouweinr')">
                            <el-checkbox-group v-model="delegateContent">
                                <el-checkbox label="1" name="1" key="1">{{$t('objFill.gongzuosp')}}</el-checkbox>
                                <el-checkbox label="2" name="2" key="2">{{$t('objFill.caiwushenp')}}</el-checkbox>
                                <el-checkbox label="3" name="3" key="3">{{$t('objFill.kehushenpi')}}</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,
                CreateBy: 0,
            },
            dataList:[],
            addMsg:{
                reciveEmpId:'',
                startDate:'',
                endDate:'',
                delegateContent:'',
                InitiatorEmpId: 0
            },
            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(this.$t('objFill.shifouquxiaowtbkch'), this.$t('tips.tips'), {
                confirmButtonText: this.$t('pub.sureBtn'),
                cancelButtonText: this.$t('pub.cancelBtn'),
                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: this.$t('OrderList.orderStatus.cancel'),
                });
            });
        },
        user_delegate_AddAuditDelegate(){ // 新增委托
            if(this.delegateContent.length<=0){
                return this.$message.error(this.$t('objFill.qingxzwtnr'));
            }else{
                this.addMsg.delegateContent = this.delegateContent.join(',');
            }
            if(this.addMsg.reciveEmpId==''){
                return this.$message.error(this.$t('objFill.qingxzswtr'));
            }
            if(this.addMsg.reciveEmpId==this.userId){
                this.addMsg.reciveEmpId='';
                this.searchList = [];
                return this.$message.error(this.$t('objFill.bunengxzjwwtr'));
            }
            if(this.addMsg.startDate==''){
                return this.$message.error(this.$t('objFill.qingxzshijianfw'));
            }
            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.msg.CreateBy = this.addMsg.InitiatorEmpId = this.$route.query.id
        this.getList()
        let userInfo=this.getLocalStorage();
        this.userId = userInfo.EmployeeId;
    }
}
</script>