<template>
    <!-- 文字多选 -->
    <div class="weui-cell">
        <div class="label">
            <slot></slot>
        </div>
        <div>
            <div
                v-for="(item, index) in listItem.option.list"
                :key="index"
                @click="select(item.value)"
            >
                <el-checkbox :value="checked" :label="item.value">{{ item.name }}</el-checkbox>
                <div class="describe" v-if="item.describe">{{ item.describe }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import common from '@/common/formRender/mixin/common.js'
import checkbox from '@/common/formRender/mixin/checkbox.js'
export default {
    name: 'FormCheckboxText',
    mixins: [common, checkbox],
    components: {
        ElCheckbox: () => import('./components/ElCheckbox')
    },
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    data () {
        return {
            visible: false
        }
    },
    created () {
        this.verifyInit()
        this.change(this.checked)
    },
    methods: {
        select (value) {
            const index = this.checked.indexOf(value)
            if (index > -1) {
                this.checked.splice(index, 1)
                this.change(this.checked)
            } else if (!this.max || this.checked.length < this.max) {
                this.checked.push(value)
                this.change(this.checked)
            }
        },
        // 同步 value
        change (checked) {
            const map = value => this.listItem.option.list.find(item => item.value === value).name
            this.formItem.value = checked.map(map)
            this.clearValidate()
        },
        // 校验
        verify () {
            return this.validate({ value: this.formItem.value })
        }
    }
}
</script>

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