<template>
    <!-- 下拉多选 -->
    <cell class="empty-label" is-link @click.native="visible = true">
        <template slot="title">
            <slot></slot>
        </template>
        <span class="value">{{ formItem.value[0] }}{{ checked.length > 1 ? ` (+${checked.length - 1})` : '' }}</span>
        {{ !checked.length ? listItem.placeholder : '' }}
        <div v-transfer-dom>
            <popup v-model="visible">
                <checklist
                    class="checklist"
                    v-bind="minmax"
                    v-model="checked"
                    :options="listItem.option.list.map(item => ({ key: item.value, value: item.name }))"
                    @on-change="change"
                ></checklist>
                <div class="close">
                    <x-button plain type="primary" @click.native="visible = false">关闭</x-button>
                </div>
            </popup>
        </div>
    </cell>
</template>

<script>
import common from '@/common/formRender/mixin/common.js'
import checkbox from '@/common/formRender/mixin/checkbox.js'
import { Cell, TransferDom, Popup, Checklist, XButton } from 'vux'
export default {
    name: 'FormCheckbox',
    mixins: [common, checkbox],
    directives: { TransferDom },
    components: { Cell, Popup, Checklist, XButton },
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    data () {
        return {
            visible: false
        }
    },
    created () {
        this.verifyInit()
    },
    methods: {
        // 同步 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>
.vux-popup-dialog {
    max-height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    .checklist {
        flex-grow: 1;
        overflow-y: auto;
    }
}
.close {
    flex-shrink: 0;
    padding: 10px 15px;
    .weui-btn {
        padding: 0;
    }
}
</style>
