<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabbar.home%',
  },
}
</route>
<template>
  <view class="bg-white overflow-hidden pb-tab" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <wd-sticky>
      <view class="pos-msg-container w-100vw bg-white">
        <view class="pos-container" @click.stop="goSelectCountry">
          <image style="width: 36rpx" src="@/static/images/pos.svg" mode="widthFix"></image>
          <view class="pos-name">Serbia</view>
          <image style="width: 36rpx" src="@/static/images/select.svg" mode="widthFix"></image>
        </view>
        <view class="msg-info">
          <wd-img width="40rpx" height="40rpx" src="/static/images/home/msg.svg"></wd-img>
        </view>
      </view>
    </wd-sticky>
    <view class="search-container">
      <wd-search
        class="search-input"
        placeholder-left
        hide-cancel
        v-model="homeSearch"
        :placeholder="t('home.search')"
        @search="search"
      >
        <template #prefix>
          <wd-img width="40rpx" height="40rpx" src="/static/images/home/home-search.svg"></wd-img>
        </template>
      </wd-search>
    </view>
    <view class="card-swiper-container">
      <wd-swiper
        autoplay
        v-model:current="current"
        custom-indicator-class="custom-indicator-class"
        custom-image-class="custom-image"
        custom-next-image-class="custom-image-prev"
        custom-prev-image-class="custom-image-prev"
        :list="swiperList"
      ></wd-swiper>
    </view>
    <view class="hot-category">
      <view class="home-title">
        <view class="home-title-text">{{ t('home.hotCategory') }}</view>
        <view @click="gotoCategory" class="home-see-all">
          <view class="see-all-text">{{ t('home.seeAll') }}</view>
          <image class="w-9rpx" src="@/static/images/right.svg" mode="widthFix"></image>
        </view>
      </view>
      <view class="hot-category-content">
        <view v-for="item in categories" :key="item.id" class="category-item">
          <image class="category-item-img" :src="item.img" mode="scaleToFill"></image>
          <view class="category-item-text">{{ item.text }}</view>
        </view>
      </view>
    </view>
    <view class="hot-selling">
      <view class="selling-title">
        <view class="selling-title-text">{{ t('home.hotSelling') }}</view>
        <view class="block"></view>
      </view>
      <HotTags v-model:current-tag="currentTag"></HotTags>
      <ProductList></ProductList>
      <shopSkuPopup
        v-if="showCommonPopup"
        @sku-spec-select="handleSkuSpecSelect"
        @to-add-cart="addToCart"
        v-model:skuData="skuData"
        title="specifications"
        v-model:show="showCommonPopup"
        @close="showCommonPopup = false"
      ></shopSkuPopup>
    </view>
  </view>
  <tabbar />
</template>

<script lang="ts" setup>
  import HotTags from '@/components/hot-tags/hot-tags.vue'
  import ProductList from '@/components/product-list/product-list.vue'
  import shopSkuPopup from '@/components/commonPopup/shop-sku-popup.vue'
  import { t } from '@/locale'
  import CateImg1 from '@/static/temp/cate-1.png'
  import CateImg2 from '@/static/temp/cate-2.png'
  import CateImg3 from '@/static/temp/cate-3.png'
  import CateImg4 from '@/static/temp/cate-4.png'

  defineOptions({
    name: 'Home',
  })

  const current = ref(0)
  const currentTag = ref(0)

  const gotoCategory = () => {
    uni.switchTab({
      url: '/pages/category/category',
    })
  }
  const swiperList = ref([
    'https://t.xiaoyaotravel.com/image/TourImComplait/messageContent/696b679508664bb4bceb6cc6b06d0cdc.png',
    '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',
  ])

  const categories = ref([
    { img: CateImg1, id: 1, text: 'Panda' },
    { img: CateImg2, id: 2, text: 'Gift Shop' },
    { img: CateImg3, id: 3, text: 'Egg&Meat' },
    { img: CateImg4, id: 4, text: 'Vegs&Fruits' },
  ])

  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()

  const showCommonPopup = ref(false)
  const homeSearch = ref('')
  const search = () => {
    console.log(homeSearch.value)
  }
  const goSelectCountry = () => {
    uni.navigateTo({
      url: '/pages/select-country/index',
    })
  }
</script>

<style lang="scss" scoped>
  :deep(.wd-sticky__container) {
    top: 0 !important;
  }
  .hot-selling {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 24rpx 0 24rpx 32rpx;

    .selling-title {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-right: 32rpx;
      font-family: 'PingFang SC';
      font-size: 36rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 52rpx; /* 144.444% */
      color: $shop-text-3;

      .selling-see-all {
        display: flex;
        align-items: center;

        .selling-see-all-text {
          margin-right: 18rpx;
          font-family: 'PingFang SC';
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 40rpx; /* 166.667% */
          color: $shop-primary;
          text-align: center;
        }
      }
    }
  }

  .hot-category {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 24rpx 32rpx;

    .hot-category-content {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 24rpx;

      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .category-item-img {
          width: 128rpx;
          height: 128rpx;
          margin-bottom: 8rpx;
          border-radius: 50%;
        }

        .category-item-text {
          font-family: 'PingFang SC';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 22px; /* 157.143% */
          color: $shop-text-3;
        }
      }
    }

    .home-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-right: 5rpx;
      font-family: 'PingFang SC';
      font-size: 36rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 52rpx; /* 144.444% */
      color: $shop-text-3;

      .home-see-all {
        display: flex;
        align-items: center;

        .see-all-text {
          margin-right: 18rpx;
          font-family: 'PingFang SC';
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 40rpx; /* 166.667% */
          color: $shop-primary;
          text-align: center;
        }
      }
    }
  }

  .card-swiper-container {
    box-sizing: border-box;
    padding: 0 16rpx 24rpx;
    padding-bottom: 24rpx;
    --wot-swiper-radius: 0;
    --wot-swiper-item-padding: 0 0;
    --wot-swiper-nav-dot-color: rgba(255, 169, 145, 0.2);
    --wot-swiper-nav-dot-active-color: #ff4c1b;

    :deep(.custom-indicator-class) {
      bottom: -24rpx;
    }
    :deep(.custom-image) {
      border-radius: 12rpx;
    }
    :deep(.custom-image-prev) {
      height: 300rpx !important;
    }
  }
  .search-container {
    box-sizing: border-box;
    padding: 0 16rpx;
    margin-bottom: 24rpx;
    .search-input {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      height: 84rpx;
      padding: 20rpx 24rpx;
      background-color: #fff;
      border: 2rpx solid var(--f-2-f-2-f-2, $shop-bg-line);
      border-radius: 102rpx;
      :deep(.wd-search__block) {
        background-color: $shop-white !important;
      }
      :deep(.wd-icon) {
        display: none;
      }
      :deep(.wd-search__input) {
        padding-left: 20rpx;
      }
    }
  }
  .pos-msg-container {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 23rpx;

    .pos-container {
      display: flex;
      align-items: center;
      height: 76rpx;

      .pos-name {
        margin: 0 16rpx;
        font-family: 'PingFang SC';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 44rpx; /* 157.143% */
        color: var(--333, #333);
        text-align: center;
      }
    }
  }
  .msg-info {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76rpx;
    height: 76rpx;
    padding: 18rpx;
    background: var(--f-2-f-2-f-2, $shop-bg-line);
    border-radius: 130rpx;
  }
</style>
