<template>
  <view>
    <u-navbar bgColor="transparent">
      <template #left>
        <view class="u-nav-slot">大健康商城</view>
      </template>
    </u-navbar>
    <view class="topBgBox">
      <image src="/static/indexIc/topBg.png" mode=""></image>
      <view class="searchBox">
        <search></search>
        <view class="vip flexC" @click="toRecharg">
          <image src="/static/indexIc/vip.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 分类 -->
    <view class="classBox">
      <view class="itemClss flexV" v-for="item in data.classList" :key="item.id" @click="jumpClass(item)">
        <image :src="item.image" mode=""></image>
        <text>{{ item.name }}</text>
      </view>
      <view class="itemClss flexV" @click="jumpClassHandler">
        <image src="/static/indexIc/classIc.png" mode=""></image>
        <text>更多</text>
      </view>
    </view>
    <!-- 特价专区 -->
    <view class="specialOffer">
      <image class="pinkBg" src="/static/indexIc/pinkBg.png" mode=""></image>
      <view class="special">
        <view class="topBox flexJ">
          <view class="titles">
            <view class="title">特价专区</view>
            <!-- <text>Special price zone</text> -->
            <text>SPECIAL PRICE ZONE</text>
          </view>
          <view class="more flexA" @click="toBargainPriceMoreHandler">
            更多
            <image src="/static/indexIc/orangeRight.png" mode=""></image>
          </view>
        </view>
        <view class="shop">
          <shops :list="data.specialList.slice(0, 2)" :shopWidth="322" :shopHeight="322" :isTejia="true"></shops>
        </view>
      </view>
    </view>
    <view class="recom flexA">
      <image src="/static/indexIc/recommendIc.png" mode=""></image>
      推荐商品
      <text>限时限量好物推荐</text>
    </view>
    <!-- 推荐商品 -->
    <view class="recomBox">
      <shops :list="data.recommendList" :shopWidth="344" :shopHeight="344" :isTejia="true"></shops>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app'
import search from '@/componets/searchBox.vue'
import shops from '@/componets/shops.vue'
import { getIndex } from '@/api/'

const lastPage = ref(1)

const curPage = ref(1)

onShow(() => {
  curPage.value = 1
  data.recommendList.splice(0)
  getIndexs()
})
// 跳转充值中心
const toRecharg = () => {
  uni.navigateTo({
    url: '/pages/mine/recharge'
  })
}
let data = reactive({
  classList: [], //分类
  specialList: [], //特价商品
  recommendList: [] //推荐商品
})
// 分类跳转
const jumpClass = item => {
  uni.setStorageSync('classId', item.id)
  uni.switchTab({ url: '/pages/class/class' })
}
const jumpClassHandler = () => uni.switchTab({ url: '/pages/class/class' })

const toBargainPriceMoreHandler = () => uni.navigateTo({ url: '/pages/index/bargainPrice' })

const getIndexs = async () => {
  try {
    const res = await getIndex({ page: curPage.value })
    data.classList = res.fenlei //分类
    data.specialList = res.tjgoods //特价商品
    data.recommendList = data.recommendList.concat(res.goods.data) //推荐商品
    console.log(data.recommendList, '推荐商品')
    console.log('getIndex', res)
    lastPage.value = res.goods.last_page
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getIndex', err)
  }
}
onReachBottom(() => {
  curPage.value++

  if (curPage.value >= lastPage.value) return

  getIndex()
})
</script>

<style lang="scss">
.u-nav-slot {
  color: #fff;
  font-size: 34rpx;
  font-weight: 700;
}

.topBgBox {
  width: 100%;

  image {
    width: 100%;
    height: 528rpx;
  }

  .searchBox {
    width: 100%;
    position: absolute;
    top: 176rpx;

    .vip {
      image {
        margin-left: 20rpx;
        width: 718rpx;
        height: 228rpx;
      }
    }
  }
}

.classBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 20rpx 56rpx 40rpx;
  box-sizing: border-box;

  :nth-child(4n) {
    margin-right: 0 !important;
  }

  .itemClss {
    margin: 0 86rpx 20rpx 0;

    image {
      width: 88rpx;
      height: 88rpx;
      margin-bottom: 24rpx;
    }

    text {
      color: #000000e6;
      font-size: 24rpx;
    }
  }
}

.specialOffer {
  position: relative;
  width: 702rpx;
  height: 648rpx;
  margin: 0 auto;

  .pinkBg {
    width: 100%;
    height: 100%;
  }

  .special {
    position: absolute;
    top: 24rpx;
    left: 24rpx;
    width: 654rpx;
    box-sizing: border-box;

    .topBox {
      width: 100%;
      margin-bottom: 24rpx;

      .titles {
        .title {
          color: #f84b3bff;
          font-size: 32rpx;
          font-weight: 700;
          line-height: 32rpx;
        }

        text {
          color: #f84b3bff;
          font-size: 20rpx;
          margin-top: 8rpx;
        }
      }

      .more {
        margin-top: 26rpx;
        color: #f84b3bff;
        font-size: 24rpx;

        image {
          width: 22rpx;
          height: 22rpx;
        }
      }
    }

    .shop {
      width: 654rpx;
      height: 508rpx;
      overflow: hidden;
    }
  }
}

.recom {
  color: #323233ff;
  font-size: 30rpx;
  font-weight: 700;
  line-height: 44rpx;
  margin: 40rpx 40rpx 16rpx;

  image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }

  text {
    margin-left: 8rpx;
    color: #969799ff;
    font-size: 22rpx;
    margin-top: 10rpx;
  }
}

.recomBox {
  width: 100%;
  padding: 0 24rpx;
  box-sizing: border-box;
  background: #f8f8fa;
}
</style>