<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%product.details%',
  },
}
</route>
<template>
  <!-- :style="{ marginTop: safeAreaInsets?.top + 'px' }" -->
  <view class="w-full h-[100vh] box-border">
    <wd-navbar :bordered="false" fixed safeAreaInsetTop @click-left="handleClickLeft">
      <template #left>
        <view class="w-68rpx h-68rpx rounded-full bg-white flex justify-center items-center">
          <wd-icon name="thin-arrow-left" size="18" />
        </view>
      </template>
      <template #right>
        <view
          class="w-68rpx h-68rpx overflow-hidden rounded-full bg-white flex justify-center items-center"
        >
          <image class="w-56rpx h-56rpx" :src="collect" alt=""></image>
        </view>
      </template>
    </wd-navbar>

    <view class="w-full relative">
      <wd-swiper
        class="w-full aspect-[3/4] object-cover"
        :list="swiperList"
        :autoplay="false"
        :indicator="false"
        height="1000rpx"
        v-model:current="current"
        @click="handleClick"
        @change="onChange"
      ></wd-swiper>
      <view
        class="overflow-hidden flex space-x-8rpx box-border p-8rpx mx-auto absolute bottom-48rpx left-1/2 -translate-x-1/2 z-100 bg-white rounded-8rpx"
      >
        <view
          v-for="(item, index) in swiperList.slice(0, 6)"
          :key="index"
          class="w-100rpx h-100rpx relative shrink-0"
        >
          <wd-img width="100%" height="100%" :src="item" @click="previewImage(index)" />
          <view
            v-show="index === 5 && swiperListNumber"
            @click="previewImage(index)"
            class="w-full h-full leading-58px absolute top-0 left-0 text-center text-28rpx font-semibold text-white bg-[#000]/[0.4] z-500"
          >
            + {{ swiperListNumber }}
          </view>
        </view>
      </view>
    </view>
    <view class="w-full box-border px-32rpx">
      <view class="flex justify-between items-center py-24rpx">
        <span class="text-[#333] font-semibold text-xl line-clamp-1">
          {{ 'Light Brown Jacket' }}
        </span>
        <span class="text-[#ff4c1b] font-semibold text-base">USD 84.00</span>
      </view>

      <h1 class="font-semibold text-base">{{ 'Description' }}</h1>
      <p class="line-clamp-2 text-sm text-[#666]">
        <span class="">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem ipsum dolor
          sit amet, consectetur adipiscing elit, sed do eiusmod
        </span>
        <span class="text-[#ff4c1b] underline">red more</span>
      </p>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { t } from '@/locale'
  import collect from '@/static/images/category/collect.svg'
  // const { safeAreaInsets } = uni.getSystemInfoSync()
  type childrenObj = {
    name: string
    imageUrl: string
  }
  const categoryIndex = ref<number>(0)

  function handleClickLeft() {
    uni.navigateBack()
  }

  const current = ref<number>(0)

  const swiperList = ref<string[]>([
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
    // 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
  ])

  const swiperListNumber = computed(() =>
    swiperList.value.length > 6 ? swiperList.value.length - 6 : 0,
  )

  function handleClick(e) {
    console.log(e)
  }
  function onChange(e) {
    console.log(e)
  }

  function previewImage(current: number) {
    uni.previewImage({
      urls: swiperList.value,
      current,
      loop: true,
      indicator: 'number',
    })
  }

  onLoad((id) => {
    console.log(id, '商品详情')
  })

  onMounted(() => {})
</script>
<style lang="scss" scoped>
  ::v-deep .wd-navbar {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  }

  ::v-deep .wd-swiper__track {
    --wot-swiper-radius: 0px;
  }

  .text-color {
    color: #ff4c1b;
  }
</style>
