<template>
    <!-- 联系人 -->
    <div>
        <basic-edit></basic-edit>
        <div>
            <div class="title">默认值：</div>
            <el-button type="primary" icon="el-icon-plus" @click="visible = true">添加</el-button>
            <div>
                <el-tag
                    v-for="(item, index) in formItem.verify.value"
                    :key="index"
                    size="medium"
                    closable
                    disable-transitions
                    @close="formItem.verify.value.splice(index, 1)"
                    @click.stop
                >{{item.realname}}</el-tag>
            </div>
        </div>
        <type-edit
            title="选择类型"
            :list="typeList"
            v-model="formItem.verify.type"
            @change="change"
        ></type-edit>
        <verify-edit></verify-edit>

        <!-- 教师选择器 -->
        <user-selector
            :mode="formItem.verify.type"
            :list="formItem.verify.value"
            :visible.sync="visible"
        ></user-selector>
    </div>
</template>

<script>
export default {
    name: 'FormContacts',
    components: {
        BasicEdit: () => import('@/common/formDesign/components/formEdit/components/BasicEdit'),
        TypeEdit: () => import('@/common/formDesign/components/formEdit/components/TypeEdit'),
        VerifyEdit: () => import('@/common/formDesign/components/formEdit/components/VerifyEdit'),
        UserSelector: () => import('@/common/userSelector/UserSelector')
    },
    data () {
        return {
            formItem: this.$store.state.form.formItem,
            visible: false,
            typeList: [
                { name: '允许多选', value: 'teacherCheckbox' },
                { name: '仅允许单选', value: 'teacherRadio' }
            ]
        }
    },
    created () {
        this.init()
    },
    methods: {
        // 初始化
        init () {
            if (!this.formItem.verify) {
                this.$set(this.formItem, 'verify', {
                    value: [],
                    type: 'teacherCheckbox',
                    required: false
                })
            }
        },
        // 更新单选多选
        change (value) {
            const list = this.formItem.verify.value
            if (value === 'teacherRadio' && list.length > 1) this.formItem.verify.value = [list[0]]
        }
    }
}
</script>

<style lang="less" scoped>
.el-tag {
    margin-top: 10px;
    margin-right: 10px;
}
</style>
