<template>
  <view class="text-center">
    <van-sticky>
      <view class="justify-center bg-white sh mg-b-40">
        <van-icon class="top-left" name="arrow-left" @tap="goBack" />
        <van-tabs class="top_tab" v-model:active="state.tab.active" animated>
          <van-tab v-for="item in state.tab.list" :title="item.name" />
        </van-tabs>
      </view>
    </van-sticky>
    <view class="whd_card">
      <template v-for="(item, index) in state.tab.list">
        <van-image v-show="state.tab.active == index"
          loading-icon="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/default1.png" icon-size="90vw" width="90vw" :src="item.url" />
      </template>
      <van-image loading-icon="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/default1.png" icon-size="90vw" width="90vw"
        src="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/whd_detail.png" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive } from 'vue';
import { PageUtils } from '@/utils/utils';
const state = reactive({
  tab: {
    active: 0,
    list: [
      { name: 'W', url: "https://img.edsmall.com/ROOT/ETao/fenxiao/h5/whd1.jpg" },
      { name: 'H', url: "https://img.edsmall.com/ROOT/ETao/fenxiao/h5/whd2.jpg" },
      { name: 'D', url: "https://img.edsmall.com/ROOT/ETao/fenxiao/h5/whd2.jpg" }
    ]
  },
  skuId: undefined,
})

onBeforeMount(() => {
  const query: any = PageUtils.getCurQuery()
  state.skuId = query.skuId
  if (!state.skuId) {
    uni.navigateTo({
      url: '/pages/index'
    })
    return
  }
})

function goBack() {
  PageUtils.goBack()
}
</script>

<style lang="scss" scoped>
.top_tab {
  width: 60vw;
}

.whd_card {
  border-top: 5px solid var(--orange);
  width: 90vw;
  margin: 0 5vw;
	box-shadow: 6rpx 10rpx 10rpx #aaaaaa80;
}
</style>
