<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>
            <JobsItem
                v-for="item of value"
                :key="item.key"
                :value="item"
                @del="onItemDel"
                @edit="onItemEdit"
            />
        </a-row>
        <JobsFrom ref="JobsDrawerRef" @submit="onSubmit" />
    </div>
</template>

<script>
import JobsItem from './JobsItem.vue';
import JobsFrom from './JobsFrom.vue';

export default {
    components: { JobsItem, JobsFrom },
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        value: [Array],
    },
    methods: {
        onAdd() {
            this.$refs['JobsDrawerRef']?.open();
        },
        onItemDel(val) {
            const newData = this.value.filter((i) => i.key !== val.key);
            this.$emit('change', newData);
        },
        onItemEdit(val) {
            this.$refs['JobsDrawerRef']?.open();
            this.$nextTick(() => {
                this.$refs['JobsDrawerRef'].setData(val);
            });
        },
        async onSubmit(val) {
            const data = {
                ...val,
                startDate: `${await val.startDate.format('YYYY-MM-DD')} 00:00:00`,
                endDate: `${await val.endDate.format('YYYY-MM-DD')} 00:00:00`,
            };

            const newArr = (this.value || []).filter((i) => i.key !== data?.key);
            this.$emit('change', [...newArr, data]);
        },
    },
};
</script>
