<template>
  <van-popup
      v-model:show="props.show"
      position="bottom"
      :style="{ height: props.height }"
      round
      closeable
      @closed="handleClose"
  >
    <div class="p-[16px] overflow-y-auto h-full">
      <!-- 商品基本信息 -->
      <div class="flex flex-col gap-[12px]">
        <img
            :src="props.detail?.artwork?.hdPic"
            class="w-full rounded-[4px] object-cover"
            :alt="props.detail?.name"
        />
        <div class="text-[16px] font-medium text-[#000]">
          {{ props.detail?.name }}
        </div>

        <!-- 价格信息 -->
        <div class="flex flex-col gap-[8px]">
          <div class="text-[14px] text-[#575757]">
            起拍价：{{ formatPrice(props.detail?.startPrice) }}
          </div>
          <div v-if="props.detail?.soldPrice" class="text-[14px] text-[#b58047]">
            成交价：{{ formatPrice(props.detail?.soldPrice) }}
          </div>
        </div>

        <!-- 商品详情 -->
        <div class="mt-[16px]">
          <div class="text-[16px] font-medium mb-[12px]">商品详情</div>
          <div class="flex flex-col gap-[8px]">
            <div class="flex justify-between text-[14px]">
              <span class="text-[#575757]">尺寸</span>
              <span>{{ props.detail?.artwork?.size || '-' }}</span>
            </div>
            <div class="flex justify-between text-[14px]">
              <span class="text-[#575757]">年代</span>
              <span>{{ props.detail?.artwork?.year || '-' }}</span>
            </div>
            <div class="flex justify-between text-[14px]">
              <span class="text-[#575757]">材质</span>
              <span>{{ props.detail?.artwork?.material || '-' }}</span>
            </div>
          </div>
        </div>

        <!-- 作品描述 -->
        <div v-if="props.detail?.artwork?.description" class="mt-[16px]">
          <div class="text-[16px] font-medium mb-[12px]">作品描述</div>
          <div class="text-[14px] text-[#575757] whitespace-pre-wrap">
            {{ props.detail?.artwork?.description }}
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { formatPrice } from '~/utils/format'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  height: {
    type: String,
    default: '90vh'
  },
  detail: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:show'])

const handleClose = () => {
  emit('update:show', false)
}
</script>

<style scoped>
:deep(.van-popup) {
  max-height: 90vh;
}

:deep(.van-popup__close-icon) {
  color: #000;
}
</style>