<template>
    <view class="relative bg-#fff b-radius pd-24 d-flex a-c" :class="{ 'bg-#EDF7F0': selected && selectable }" @click="handleClick">
        <!-- 序号标签 -->
        <view v-if="showIndex" class="absolute top-0 left-0 w-60 h-60 c-#fff f-s-20 f-w-5 pd-4 pt-4 pb-4 z-index-10" style="border-radius: 16rpx 0 0rpx 0; background: linear-gradient(135deg, #22c55e 50%, transparent 50%)">
            <span class="w-30 h-30 f-s-24 f-w-5" style="transform: rotate(-45deg); display: block">{{ String(index + 1).padStart(2, '0') }}</span>
        </view>
        <!-- 图片 -->
        <view class="w-100 h-100 radius-8 ov-hd mr-24" style="flex-shrink: 0">
            <up-image :src="item?.imgs?.split(',')?.[0]" mode="aspectFill" width="100%" height="100%"></up-image>
        </view>
        <!-- 信息区域 -->
        <view class="flex-1 flex a-c j-sb">
            <!-- 左侧：品名和规格 -->
            <view class="flex flex-cln">
                <view class="f-s-34 f-w-5 c-#333 mb-4">{{ item?.specnLevel }}</view>
                <view class="f-s-24 c-#999">{{ item?.finalSpecn }}{{ item?.finalUnit }}{{ item?.finalFormType }}</view>
            </view>
            <!-- 中间：重量和检验状态 -->
            <view class="flex flex-cln a-c">
                <view class="f-s-34 f-w-5 c-#333">{{ item?.capacity }}{{ item?.unit }}</view>
                <view v-if="item?.examinReport?.length > 0" class="f-s-24 mt-8 c-#37a954">已检验</view>
                <view v-else class="f-s-24 mt-8 c-#f74c30">未检验</view>
            </view>
            <!-- 右侧：入库状态 -->
            <view class="flex a-c">
                <view v-if="+item?.status !== 0" class="f-s-24 c-#37a954" style="text-decoration: underline">已入种源库</view>
                <view v-else class="f-s-24 c-#999">未入库</view>
            </view>
        </view>
        <!-- 选中对勾图标 -->
        <view v-if="selected && selectable" class="absolute bottom-24 right-24 w-40 h-40 bg-#37a954 d-flex a-c j-c radius-8">
            <up-icon name="checkmark" color="#fff" size="24rpx"></up-icon>
        </view>
    </view>
</template>

<script setup lang="ts">
const props = defineProps({
    // 单个产出项数据
    item: {
        type: Object,
        default: () => ({}),
    },
    // 序号（用于显示）
    index: {
        type: Number,
        default: 0,
    },
    // 是否支持点击选中
    selectable: {
        type: Boolean,
        default: false,
    },
    // 是否已选中
    selected: {
        type: Boolean,
        default: false,
    },
    // 是否显示序号标签
    showIndex: {
        type: Boolean,
        default: true,
    },
});

const emit = defineEmits<{
    click: [item: any];
    'update:selected': [value: boolean];
}>();

// 处理点击事件
const handleClick = () => {
    if (props.selectable) {
        emit('update:selected', !props.selected);
    }
    emit('click', props.item);
};
</script>

<style scoped lang="scss">
// 组件样式使用 UnoCSS 原子类，无需额外样式
</style>
