<template>
    <view class="d-flex j-sb b-radius border-#AFDDBB bg-#FBFDFB mb-20 pd-24 p-rtv" v-for="(item, index) in modelValue?.checkBox" :key="index">
        <view v-if="showClose" @click="handleDelete(index)" class="d-flex j-c a-c c-#FF4444 f-s-28" style="position: absolute; top: 10rpx; right: 10rpx">
            <up-icon name="close" color="#FF4444" size="12"></up-icon>
        </view>
        <view class="flex1 ov-hd">
            <view class="ov-hd tx-ov d-flex a-c">
                <view class="c-primary f-s-24 f-w-5 bg-#EBF6EE pd4-4-12-4-6 b-radius" style="font-style: italic">{{ Number(index) + 1 < 10 ? '0' + (Number(index) + 1) : Number(index) + 1 }}</view>
                <view class="w-10"></view>
                <view class="c-#333 f-w-5 f-s-34 tx-ov ov-hd">{{ modelValue?.variety }}</view>
            </view>
            <view class="d-flex a-c pt-10">
                <text class="c-#666 f-s-24 tx-ov ov-hd">{{ item }}</text>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const props = withDefaults(
    defineProps<{
        modelValue: any;
        landIds?: any[];
        showClose?: boolean;
    }>(),
    {
        showClose: true,
    },
);

const emit = defineEmits<{
    'update:modelValue': [value: any];
    'update:landIds': [value: any[]];
}>();

const handleDelete = (index: number) => {
    if (!props.modelValue || !props.modelValue.checkBox) return;

    // 创建新的checkBox数组，移除指定索引的元素
    const newCheckBox = [...props.modelValue.checkBox];
    newCheckBox.splice(index, 1);

    // 创建新的对象，保持其他属性不变
    const newValue = {
        ...props.modelValue,
        checkBox: newCheckBox,
    };

    // 触发更新事件
    emit('update:modelValue', newValue);

    // 同时更新landIds，确保与checkBox保持一致
    if (props.landIds && Array.isArray(props.landIds)) {
        const newLandIds = [...props.landIds];
        newLandIds.splice(index, 1);
        emit('update:landIds', newLandIds);
    }
};
</script>
