<template>
    <el-dialog class="client-data-dialog" title="案件交接" width="30%" :visible.sync="visible" :before-close="handleClose">
        <el-form :model="ruleForm" ref="ruleForm"  label-width="80px" class="demo-ruleForm">
            <el-form-item label="交接人员" prop="collUser">
                <el-autocomplete style="width: 80%" v-model="ruleForm.collUser" :fetch-suggestions="querySearchAsync" placeholder="请选择交接人员" @select="handleSelect"></el-autocomplete>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="allotCollUser('ruleForm')">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "AllotCollUserDialog",
        props: {
            dialogVisible: {
                type: Boolean,
                required: true
            },
            collNo: {
                type: String
            }
        },

        data() {
            return {
                ui: {
                    submitLoading: false
                },
                visible: this.$props.dialogVisible,

                ruleForm: {
                    collNo: '',
                    collUser: '',
                },
                allUser: [],
            }
        },

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

        mounted: function () {
            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, lable: item.loginName,}
                    })
                    this.allUser = array;
                })
                .catch(err => this.$$msg.err(err))
        },

        methods: {
            /** 提交点击 */
            allotCollUser() {
                this.$$post(`/collect/allotCollUser`,{collNo: this.ruleForm.collNo, collUser: this.loginName
                }).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);
            },
            handleSelect(item) {
                this.loginName = item.lable;

            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().search(queryString.toLowerCase()) >= 0);
                };
            }
            ,

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

<style scoped>

</style>