<template>
<div>
    <q-select @input="updateModel" :label="msg.Name" v-if="!multiple" option-value="Id" option-label="EmployeeName" color="primary" filled :rules="[val => !!val|| '请选择人员信息']" emit-value v-model="msg.Content" use-input clearable @filter="filterFn" :options="EmployeeListOption" map-options ref="Admin">
        <template v-slot:no-option>
            <q-item>
                <q-item-section class="text-grey">
                    未找到相关数据
                </q-item-section>
            </q-item>
        </template>
    </q-select>
    <q-select @blur="updateMultipleModel" multiple :label="msg.Name" v-if="multiple" option-value="Id" option-label="EmployeeName" color="primary" filled :rules="[val => !!val|| '请选择人员信息']" emit-value v-model="msg.Content" use-input clearable @filter="filterFn" :options="EmployeeListOption" map-options ref="Admin">
        <template v-slot:no-option>
            <q-item>
                <q-item-section class="text-grey">
                    未找到相关数据
                </q-item-section>
            </q-item>
        </template>
    </q-select>
</div>
</template>

<script>
import {
    queryEmployee
} from '../../api/users/user';
export default {
    props: ["dict", "multiple"],
    data() {
        return {
            EmployeeListOption: [],
            allEmployeeListOption: [],
            msg: {}
        }
    },
 
    created() {
        try {
            if (!this.multiple) {
                this.dict.Content = parseInt(this.dict.Content);
            } else {
                if (this.dict.Content && this.dict.Content.length > 0) {
                    this.dict.Content = this.dict.Content.split(',').map(Number)
                } else {
                    this.dict.Content = []
                }

            }
            this.msg = this.dict
            
        } catch (error) {
           
        }

    },
    mounted() {
        this.getEmployee()
    },
    methods: {
        getEmployee() {
            var qMsg = {
                Dept_Id: 0
            }
            queryEmployee(qMsg).then(res => {
                if (res.Code == 1) {
                    this.EmployeeListOption = res.Data;
                    this.allEmployeeListOption = res.Data;
                }
            }).catch(() => {})
        },
        filterFn(val, update) {
            update(() => {
                if (val === '') {
                    this.EmployeeListOption = JSON.parse(JSON.stringify(this.allEmployeeListOption))
                } else {
                    const needle = val.toLowerCase();
                    this.EmployeeListOption = this.allEmployeeListOption.filter(v => v.EmployeeName.toLowerCase().indexOf(
                        needle) > -1);
                }
            })
        },
        updateMultipleModel() {
            if (this.msg.Content && this.msg.Content != "") {
                this.msg.Mask = ""
                this.allEmployeeListOption.forEach(x => {
                    if (this.msg.Content.indexOf(x.Id)!=-1){
                        this.msg.Mask+=x.EmployeeName+","
                    }
                })
                this.msg.Mask=this.msg.Mask.substring(0,this.msg.Mask.length-1);
                this.msg.Content=this.msg.Content.join(',')
                this.$emit("blur", this.msg)
            }
        },
        updateModel(val) {
            if (this.msg.Content && this.msg.Content != "") {
                this.msg.Mask = this.msg.Content
                this.allEmployeeListOption.forEach(x => {
                    if (x.Id == this.msg.Content) {
                        this.msg.Mask = x.EmployeeName
                    }
                })
                this.$emit("blur", this.msg)
            }

        }
    },

}
</script>

<style>

</style>
