<template>
  <div class="flex flex-1 flex-col gap-[16px]">
    <div
        v-for="(item, index) in items"
        :key="index"
        class="w-full"
        @click="openShow"
    >
      <div class="relative w-full">
        <van-image
            :src="item.image"
            :style="{ aspectRatio: item.ratio }"
            fit="cover"
            class="w-full"
        />
        <div
            class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
        >
          LOT{{ index + 1 }}
        </div>
      </div>
      <div class="pt-[8px]">
        <div class="text-[14px] text-[#000000] leading-[20px]">
          {{ item.title }}
        </div>
        <div class="mt-[4px] text-[12px] text-[#575757]">
          起拍价：{{ item.startingPrice }}
        </div>
        <div
            v-if="item.transactionPrice"
            class="mt-[4px] text-[12px] text-[#b58047]"
        >
          成交价：{{ item.transactionPrice }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  items: Array
});

const emit = defineEmits(['openShow']);

const openShow = () => {
  emit('openShow');
};
</script>