<template>
    <!-- 联系人 -->
    <div>
        <el-button
            type="primary"
            icon="el-icon-plus"
            @click="visible = true"
        >{{ listItem.placeholder }}</el-button>

        <div class="list">
            <el-tag
                size="default"
                effect="plain"
                closable
                disable-transitions
                v-for="(item, index) in formItem.value"
                :key="index"
                @close="formItem.value.splice(index, 1)"
            >{{item.realname}}</el-tag>
        </div>

        <user-selector
            :mode="listItem.verify.type"
            :list="formItem.value"
            :visible.sync="visible"
            :attrs="{ 'append-to-body': true }"
        ></user-selector>
    </div>
</template>

<script>
export default {
    name: 'FormContacts',
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    components: {
        UserSelector: () => import('@/common/userSelector/UserSelector')
    },
    data () {
        return {
            visible: false
        }
    }
}
</script>

<style lang="less" scoped>
.list {
    display: flex;
    flex-flow: wrap;
    .el-tag {
        margin-top: 5px;
        margin-right: 10px;
    }
}
</style>
