<template>
    <div>
        <a-row :gutter="[16, 16]">
            <a-col>
                <a-button type="primary" block @click="onAdd">
                    <a-icon type="plus-circle" />
                    添加证件
                </a-button>
            </a-col>
            <CertificateItem
                v-for="item of value"
                :key="item.key"
                :value="item"
                @del="onItemDel"
                @edit="onItemEdit"
            />
        </a-row>
        <CertificateFrom ref="CertificateDrawerRef" @submit="onSubmit" />
    </div>
</template>

<script>
import CertificateItem from './CertificateItem.vue';
import CertificateFrom from './CertificateFrom.vue';

export default {
    components: { CertificateItem, CertificateFrom },
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        value: Array,
    },

    methods: {
        onAdd() {
            this.$refs['CertificateDrawerRef']?.open();
        },
        onItemDel(val) {
            const newData = this.value.filter((i) => i.key !== val.key);
            this.$emit('change', newData);
        },
        onItemEdit(val) {
            this.$refs['CertificateDrawerRef']?.open();
            this.$nextTick(() => {
                this.$refs['CertificateDrawerRef'].setData(val);
            });
        },
        async onSubmit(val) {
            const newArr = (this.value || []).filter((i) => i.key !== val?.key);
            this.$emit('change', [...newArr, val]);
        },
    },
};
</script>
