<template>
    <!-- 联系人 -->
    <cell-box class="cell-box" :class="{ empty: !formItem.value.length }">
        <div class="cell weui-cell weui-cell_access contcats" @click="visible = true">
            <span class="label">
                <slot></slot>
            </span>
            <span class="placeholder vux-cell-box">{{ listItem.placeholder }}</span>
            <div class="weui-cell__ft"></div>
        </div>
        <div class="list" v-if="formItem.value.length">
            <span class="tag" v-for="(item, index) in formItem.value" :key="index">
                {{ item.realname }}
                <x-icon type="ios-close-empty" size="30" @click="formItem.value.splice(index, 1)"></x-icon>
            </span>
        </div>

        <div v-transfer-dom>
            <teacher-selector
                :is-multiple="listItem.verify.type === 'teacherCheckbox'"
                :userlist="formItem.value"
                :show="visible"
                @handleSubmit="change"
                @close="visible = false"
            >
          </teacher-selector>
        </div>
    </cell-box>
</template>

<script>
import { CellBox, TransferDom } from 'vux'
import common from '@/common/formRender/mixin/common.js'
export default {
    name: 'FormContacts',
    mixins: [common],
    directives: { TransferDom },
    components: {
        CellBox,
        TeacherSelector: () => import('@/common/selector/TeacherSelector')
    },
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    data () {
        return {
            visible: false
        }
    },
    created () {
        this.verifyInit()
    },
    methods: {
        // 选人
        change (list) {
            this.formItem.value = list
            this.visible = false
            this.clearValidate()
        },
        // 校验初始化
        verifyInit () {
            const rules = []
            const { required } = this.listItem.verify
            if (required) rules.push(this.required(this.listItem.title))
            if (rules.length) this.validator = new this.Schema({ value: rules })
        },
        // 校验
        verify () {
            return this.validate({ value: this.formItem.value })
        }
    }
}
</script>

<style lang="less" scoped>
.weui-cell__ft {
    display: none;
}

.cell-box {
    display: block;
    padding-top: 0;
    padding-left: 0;
    &.empty {
        padding-bottom: 0;
    }
}

.cell {
    justify-content: space-between;
    margin-right: -15px;
    .placeholder {
        padding-right: 13px;
        color: #999;
        &::before {
            display: none;
        }
        &::after {
            right: 0;
        }
    }
}

.list {
    display: flex;
    flex-flow: wrap;
    margin-top: -5px;
    padding-left: 15px;
    .tag {
        margin-top: 5px;
        margin-right: 10px;
        font-size: 14px;
        height: 32px;
        padding: 0 10px;
        line-height: 30px;
        color: #409eff;
        background-color: #ecf5ff;
        border: 1px solid #d9ecff;
        border-radius: 4px;
        white-space: nowrap;
        .vux-x-icon {
            vertical-align: top;
            fill: #409eff;
            margin-left: -5px;
            margin-right: -10px;
        }
    }
}
</style>
