<template>
    <el-dialog   class="client-data-dialog" :title="title" width="40%" :visible.sync="visible" :before-close="handleClose">
        <el-form :model="ruleForm" ref="ruleForm"  :rules="rules" label-width="120px" class="demo-ruleForm">
            <br/>

             <el-form-item label="用户名" prop="loginName" v-show="loginFalse">
               
                 <el-autocomplete style="width: 80%"
                             v-model="ruleForm.loginName"
                             :fetch-suggestions="querySearchAsync"
                             placeholder="请选择用户名"
                             @select="handleSelect"
                ></el-autocomplete>
            </el-form-item >

            <el-form-item label="可用坐席编号" prop="extensionNumber" v-show="numberFalse">
                  <el-select v-model="ruleForm.extensionNumber" label="可用坐席编号" placeholder="请选择" style="width:80%">
                    <el-option
                    v-for="item in operat"
                    :key="item.extensionNumber"
                    :label="item.extensionNumber"
                    :value="item.extensionNumber">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" v-if="button.type == 'SEATMANAGE'" @click="confirmBacked('ruleForm')">确 定</el-button>
            <el-button type="primary" v-if="button.type == 'NOSEATMANAGE'" @click="refuseBacked('ruleForm')">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "ByhConfirmRefuseDailog",
        props: {
            dialogVisible: {
                type: Boolean,
                required: true
            },
            extensionNumber: {
                type: String
            },
            btnType: {
                type: String
            },
        },

        data() {
            return {
                ui: {
                    submitLoading: false
                },
                loginFalse:false,
                numberFalse:false,
                operat: [],
                restaurants: [],
                visible: this.$props.dialogVisible,
                ruleForm: {
                    loginName: '',
                    extensionNumber: '',
                    type :'',
                    loginNameItem:''
                },
                rules: {
                    
                },
                loginName:'',
                button:{
                    type: '',
                },
            }
        },

        created() {
            this.ruleForm = {
                extensionNumber: this.extensionNumber,
            }
        },

        computed: {
            title() {
                 return '分配坐席';
            }
        },

        mounted() {
            this.loginName = localStorage.getItem("loginName");
            this.button.type = this.btnType;
            if(this.button.type=="NOSEATMANAGE"){
                this.loginFalse = true;
                this.numberFalse = true;
            }else{
                this.loginFalse = true;
            }
            this.loadOperate();
            this.$$get(`/user/select`)
                .then(res => {
                if (res.data.code < 1)
                    throw res.data.msg;
                var array = []
                res.data.data.forEach((item, index) => {
                    array[index] = {value: item.userName +'('+item.loginName+')', lable: item.loginName,}
                })
                this.allUser = array;
            })
            .catch(err => this.$$msg.err(err))
        },

        methods: {
            /** 确认点击 */
            confirmBacked() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    if(!this.ruleForm.loginNameItem){
                        this.$message({message: '用户名不能为空', type: 'error'});
                        return;
                    }

                    if(!this.ruleForm.extensionNumber){
                        this.$message({message: '坐席编号不能为空', type: 'error'});
                        return;
                    }

                   
                    this.$$post(`/cell/update`, {
                        extensionNumber: this.ruleForm.extensionNumber,
                        loginName : this.ruleForm.loginNameItem ,
                        type : 'BIND' ,
                    }).then(res => {
                        if (res.data.code != 1) {
                            this.$message.error(res.data.msg);
                            return
                        }
                        this.$message({message: '操作成功', type: 'success'});
                        this.handleClose();
                        window.location.reload();
                    })
                    .catch(err => {
                        alert("error!")
                    })
                })
            },

            /** 驳回点击 */
            refuseBacked() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    if(!this.ruleForm.loginNameItem){
                        this.$message({message: '用户名不能为空', type: 'error'});
                        return;
                    }
                    if(!this.ruleForm.extensionNumber){
                        this.$message({message: '坐席编号不能为空', type: 'error'});
                        return;
                    }
                    this.$$post(`/cell/update`,{
                        extensionNumber: this.ruleForm.extensionNumber, 
                        loginName: this.ruleForm.loginNameItem, 
                        type : 'BIND' ,
                    }).then(res => {
                        if (res.data.code < 1) {
                            this.$message.error(res.data.msg);
                            return
                        }
                        this.$message({message: '操作成功', type: 'success'});
                        this.handleClose();
                        window.location.reload();
                    })
                })
            },
           
            querySearchAsync(queryString, cb) {
                var allUser = this.allUser;
                var results = queryString ? allUser.filter(this.createStateFilter(queryString)) : allUser;
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadOperate() {
                this.$$post('/cell/getDisribute')
                .then(res => {
                    if (res.data.code == 1){
                        this.operat = res.data.data;
                    }else{
                        this.$message({message: res.data.msg, type: 'error'});
                    }
                })
                .catch(err => this.$$msg.err(err))
            },

            handleSelect(item) {
                this.ruleForm.loginName = item.value;
                this.ruleForm.loginNameItem = item.lable;
            },
            createStateFilter(queryString) {
                return (state) => {
                return (state.value.toLowerCase().search(queryString.toLowerCase()) >= 0);
                };
            },
            handleIconClick(ev) {
                console.log(ev);
            },

            /** 关闭处理 */
            handleClose() {
                this.visible = false;
                setTimeout(() => {
                    this.$emit('update:dialogVisible', false)
                }, 300);
            },
        }
    }
</script>

<style scoped>

</style>