<template>
    <!-- 下拉多选 -->
    <el-select
        multiple
        collapse-tags
        v-model="checked"
        :placeholder="listItem.placeholder"
        :multiple-limit="listItem.verify.length ? listItem.verify.lengthMax - 0 : 0"
        @change="change"
    >
        <el-option
            v-for="item in listItem.option.list"
            :key="item.value"
            :label="item.name"
            :value="item.value"
        ></el-option>
    </el-select>
</template>

<script>
export default {
    name: 'FormCheckbox',
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    data () {
        return {
            checked: [...this.listItem.option.checked]
        }
    },
    methods: {
        // 同步 value
        change (checked) {
            const map = value => this.listItem.option.list.find(item => item.value === value).name
            this.formItem.value = checked.map(map)
        }
    }
}
</script>

<style lang="less" scoped>
</style>
