<template>
    <div class="channelcodeList page-body">
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">


            </div>
        </div>
        <div class="page-content">
            <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
                separator="none" title="" :data="data" :columns="columns" row-key="name">
                <template v-slot:top="props">
                    <div class="q-table__title">离职人员未交接客户列表 <span style="font-size: 12px;color: red;">(首次加载过慢、请耐心等待...)</span> </div>
                    <q-space />

                </template>

                <template v-slot:body-cell-optioned="props">
                    <q-td :props="props">
                        <q-btn flat size="xs" icon="iconfont icon-zhuanjiao1" style="font-weight:400;color: #3FC4FF"
                            class="q-mr-xs" label="转交" @click="gotransfer(props.row)" />
                    </q-td>
                </template>
                <template v-slot:bottom>
                    <!-- <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
              :input="true" @input="changePage" /> -->
                </template>
            </q-table>
        </div>
        <q-dialog v-model="isDetails">
            <q-card style="width: 450px;">
                <q-card-section class="row items-center q-pb-none">
                    <div class="text-h6">客户交接</div>
                    <q-space />
                    <q-btn icon="close" flat round dense v-close-popup />
                </q-card-section>
                <q-separator />
                <q-card-section>

                    <q-select style="width: 100%;" filled stack-label option-value="Id" option-label="EmployeeName"
                        use-input v-model="jiaojMsg.ReceiveUserId" @filter="filterFn" ref="Id" :options="Employeelist"
                        label="交接人员" :dense="false" emit-value map-options />
                </q-card-section>
                <q-separator />
                <q-card-actions align="right" class="bg-white">
                    <q-btn class="q-mr-md" label="取消" @click="isDetails=false" />
                    <q-btn color="accent" class="q-mr-md" label="确定" @click="saveOrderInfo()" />
                </q-card-actions>

            </q-card>
        </q-dialog>




    </div>
</template>

<script>
    import {
        getLeaveUserClientList,
        setLeaveUserCustomerTransfer
    } from '../../api/system/wechat';
    import {
        queryEmployee
    } from '../../api/users/user'

    export default {
        meta: {
            title: "渠道码"
        },
        name: "channelcodeList",
        data() {
            return {
                loading: false,
                data: [],
                pageCount: 0,

                msg: {
                    pageIndex: 1,
                    pageSize: 9999999,
                    rowsPerPage: 15,
                    ChannelGroupId: 0,
                    Name: '',
                    Type: 0,
                },

                columns: [{
                    name: 'DeptName',
                    label: '部门',
                    field: 'DeptName',
                    align: 'left'
                },
                {
                    name: 'EmpName',
                    field: 'EmpName',
                    label: '员工名称',
                    align: 'left',
                },
                {
                    name: 'ClientNum',
                    field: 'ClientNum',
                    label: '客户数量',
                    align: 'left'
                },
                {
                    name: 'optioned',
                    label: '操作',
                    field: 'DeptId'
                }
                ],
                isDetails: false,
                jiaojMsg: {
                    TransferUserId: 0,
                    ReceiveUserId: '',
                    ClientList: []
                },
                Employeelist: [],
                AllEmployeelist: []
            }
        },
        created() {
            this.getList()
            this.queryEmployee()
        },
        methods: {
            queryEmployee() {//下拉人员列表
                queryEmployee({ IsLeave: 1 }).then(res => {
                    if (res.Code == 1) {
                        this.AllEmployeelist = JSON.parse(JSON.stringify(res.Data));
                        this.Employeelist = res.Data

                    }
                }).catch(() => {

                })
            },
            filterFn(val, update) {
                update(() => {
                    if (val === '') {
                        this.Employeelist = JSON.parse(JSON.stringify(this.AllEmployeelist))
                    } else {
                        const needle = val.toLowerCase()
                        this.Employeelist = this.AllEmployeelist.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1)
                    }
                })
            },
        

            getList() {
                this.loading = true
                getLeaveUserClientList({}).then(res => {
                    this.loading = false
                    this.data = res.Data
                })
                    .catch(err => {
                        this.loading = false
                    })
            },
            gotransfer(row) {
                this.jiaojMsg.TransferUserId = row.EmpId;
                this.jiaojMsg.ClientList = row.ClientList;
                this.isDetails = true
            },
            saveOrderInfo() {//保存
                if (this.jiaojMsg.ReceiveUserId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请选择接替人员`,
                        position: 'top'
                    })
                    return
                }
                if (this.jiaojMsg.ReceiveUserId == this.jiaojMsg.TransferUserId) {
                    this.$q.notify({
                        type: 'negative',
                        message: `接替人员不能是本人`,
                        position: 'top'
                    })
                    return
                }
                setLeaveUserCustomerTransfer(this.jiaojMsg).then(res => {
                    if(res.Code==1)
                    this.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: res.Message,
                            position: 'top'
                    })
                    this.isDetails = false
                    this.getList()
                })
                .catch(err => {
                })
            },




        }
    }

</script>

<style>
    .channelcodeList .Sysuser_Date .el-input--prefix .el-input__inner {
        background-color: red;
        border: 0;
    }

    .channelcodeList .state-item {
        padding: 2px 5px;
        border-radius: 3px;
        text-align: center;
        font-size: 10px;
    }

    .channelcodeList .frIdlist {
        padding: 3px 10px;
        border-radius: 3px;
        background: #EEEEEF;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        margin-bottom: 5px;
        cursor: pointer;
    }

    .class-popover .q-pr-lg {
        padding-right: 0;
        margin-top: 20px;
    }

    .channelcodeList .el-date-editor.el-input {
        width: 100%;
    }

    .channelcodeList .el-date-editor.el-input input {
        background-color: transparent !important;
    }

    .channelcodeList .el-range-editor .el-range-input {
        background: none;
    }

    .Sysuser_Date .el-input__inner {
        background: transparent !important;
        border: 0 !important;
    }

    .channelcodeList .el-drawer.rtl {
        overflow: inherit;
    }

    .channelcodeList .box_l {
        width: 400px;
        border-radius: 6px;
        margin-right: 15px;
        background: #fff;
        margin-top: 20px;
        margin-left: 10px;
        box-shadow: 0px 0px 10px rgba(191, 191, 191, 0.7);

    }

    .channelcodeList .boxl_title {
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e8e8e8;
    }
</style>