<script setup>
import { showImagePreview } from 'vant';

import xImage from '@/components/x-image/index.vue'
const props = defineProps({
  detailInfo: {
    type: Object,
    default: null
  }
})
const images = [
  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
];
const clickSwipe=(index)=>{
  showImagePreview({
    images: images,
    startPosition:index,
  })
}
</script>

<template>
<div>
  <div class="flex justify-center">
    <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
  </div>
<!--  <van-swipe style="height: 188px" indicator-color="#B4B4B4"   lazy-render >
    <van-swipe-item v-for="(image,index) in images" :key="image" @click="clickSwipe(index)">
      <van-image
          fit="contain"
          width="100%"
          :height="188"
          :src="image"
      />
    </van-swipe-item>
  </van-swipe>-->
  <div class="px-[16px] bg-[#fff] pt-[11px] mb-6px">
    <div class="text-[#000] text-[16px] mb-[12px]">{{detailInfo?.artworkTitle}}</div>
    <div class="text-#575757 text-[14px] pb-8px">
      <div class="flex mb-[4px]">
        <div class="w-[70px]">作者：</div>
        <div>{{detailInfo?.artwork?.artistName??'-'}}</div>
      </div>
      <div class="flex mb-[4px]">
        <div class="w-[70px] flex-shrink-0">总平尺数：</div>
        <div>{{detailInfo?.artwork?.ruler??'-'}}</div>
      </div>
      <div class="flex mb-[4px]">
        <div class="w-[70px] flex-shrink-0">长*宽：</div>
        <div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
      </div>
      <div class="flex mb-[4px]">
        <div class="w-[70px] flex-shrink-0">画作简介：</div>
        <div>{{detailInfo?.artwork?.abstract??'-'}}</div>
      </div>
    </div>
  </div>
  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px">
    <div class="text-[#575757] text-[14px]">起拍价：</div>
    <div class="text-#575757 text-14px font-bold">RMB 1,000</div>
  </div>
  <div class="px-[16px] bg-#fff pt-12px pb-18px">
    <div class="text-[#575757] text-[14px] mb-4px">竞价表：</div>
    <div>
      <img src="@/static/images/1981736313.png" alt="">
    </div>
  </div>
</div>
</template>

<style scoped>

</style>