<template>
    <div>
        <el-dialog
            title="坐席绑定"
            :visible="true"
            width="400px"
            append-to-body
            :close-on-click-modal="false"
            @close="handleClose">
            <div class="dialog-content">
                <el-form ref="ruleForm" 
                    :model="userInfo" 
                    :rules="rulesClient" 
                    label-width="80px" 
                    class="demo-ruleForm">
                    <el-row  type="flex" align="middle">
                        <el-col :span="24">
                        <el-form-item label="用户" prop="userId">
                            <el-select v-model="userInfo.userId" placeholder="请选择">
                                <el-option
                                  v-for="item in userList"
                                  :key="item.id"
                                  :label="item.realName"
                                  :value="item.id">
                                </el-option>
                              </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  type="flex" align="middle">
                        <el-col :span="24">
                        <el-form-item label="坐席电话" prop="seatTelephone">
                            <el-select v-model="userInfo.seatTelephone" placeholder="请选择">
                                <el-option
                                  v-for="item in phoneList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>                        
                
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取消</el-button>
                <el-button type="primary" @click="handleSubmit()">确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import systemManageApi from "@/services/systemManage";
export default {
    name: 'addOrEditRoleDialog',
    props: {
        addOrEditRoleConfig: {
            type: Boolean,
            default: () => {
                return false
            }
        },
    },
    data() {
        return {
            userInfo:{
                userId:'',//用户
                seatTelephone:'',//坐席电话
            },
            rulesClient: {
                userId: [
                    { required: true, message: '请选择用户', trigger: 'change',},
                ],
                seatTelephone: [
                    { required: true, message: '请选择坐席电话', trigger: 'change',},
                ],
            },
            phoneList: [],
            userList: [],
        }
    },
    mounted () {
        this.getSeatPhone()
        this.getSeatUnbindUser()
    },
    methods: {
        getSeatPhone() {
            systemManageApi.getSeatPhone({}).then(res => {
                if (!res.code) {
                    this.phoneList = res || []
                }
            })
        },
        getSeatUnbindUser() {
            systemManageApi.getSeatUnbindUser({}).then(res => {
                if (!res.code) {
                    this.userList = res || []
                }
            })
        },
        handleSubmit() {
            if(!this.$clickThrottle()) { return }
            let _this=this;
            this.$refs.ruleForm.validate((valid) => {
                if(valid) {
                    systemManageApi.seatUnbind(_this.userInfo).then(res => {
                        this.$message({
                            showClose: true,
                            message: '绑定成功！',
                            type: 'success'
                        });
                        this.$parent.getSeatList(1)
                        this.handleClose()
                    })
                }
            })
                
        },
        handleClose() {
            this.$emit('update:addOrEditRoleConfig', false)
        },
    }
}
</script>

<style lang="scss" scoped>
.dialog-content{
    padding: $size16;
    max-height:500px
}

::v-deep .el-dialog__header{
    border-bottom: 1px solid $border-color-lighter !important;
}

::v-deep  .el-dialog__footer{
    border-top: 1px solid $border-color-lighter !important;
}
</style>
                
    