<template>
  <!-- 页面的最外层容器，用于包裹整个页面内容 -->
  <view class="container">
    <!-- 搜索栏背景区域，用于设置搜索相关部分的背景样式 -->
    <view class="bg-sear">
      <!-- 可滚动到顶部的区域，通常用于放置一些操作元素，方便用户能快速回到页面顶部 -->
      <view class="scrolltop">
        <!-- 搜索栏的具体视图容器，绑定了点击事件 `toSearchPage`，点击此处可触发跳转到搜索页面的操作 -->
        <view class="section"
              @tap="toSearchPage">
          <!-- 搜索图标元素，通过指定路径引入图片资源，设置类名为 `search-img`，用于在搜索栏中显示搜索图标，提示用户此处可进行搜索操作 -->
          <image src="@/static/images/icon/search.png"
                 class="search-img" />
          <!-- 搜索栏的占位文本，显示“搜索”字样，提示用户在此处输入想要搜索的内容 -->
          <text class="placeholder">
            搜索
          </text>
        </view>
      </view>
    </view>

    <!-- 页面主要内容区域，包含轮播图、分类导航、消息通知、商品展示等多个板块 -->
    <view class="content">
      <!-- swiper 组件用于实现轮播图功能，通过一系列属性来配置轮播图的展示效果和行为 -->
      <swiper :autoplay="autoplay"
              :indicator-color="indicatorColor"
              :interval="interval"
              :duration="duration"
              :indicator-active-color="indicatorActiveColor + ' '"
              :circular="true"
              class="pic-swiper"
              indicator-dots
              previous-margin="20rpx"
              next-margin="20rpx">
        <!-- 使用 `v-for` 指令循环遍历 `indexImgs` 数组，`index` 为当前项的索引，每个元素对应轮播图中的一张图片相关信息 -->
        <block v-for="(item, index) in indexImgs"
               :key="index">
          <!-- swiper-item 组件表示轮播图中的每一项，即每张图片对应的展示容器 -->
          <swiper-item class="banner-item">
            <!-- 图片的外层视图容器，方便对图片进行样式设置和布局调整 -->
            <view class="img-box">
              <!-- 轮播图中的图片元素，通过 `:src` 绑定图片的 URL 地址（来自 `item.imgUrl`），同时利用自定义属性 `:data-prodid` 传递商品相关的 ID 信息，并且绑定了点击事件 `toProdPage`，点击图片可触发跳转到对应商品页面的操作 -->
              <image :src="item.imgUrl"
                     :data-prodid="item.relation"
                     class="banner"
                     @tap="toProdPage" />
            </view>
          </swiper-item>
        </block>
      </swiper>
      <!-- 轮播图部分结束 -->
      <!-- 分类导航区域，展示多个不同分类的导航项，每个项可点击跳转到对应的页面 -->
      <view class="cat-item">
        <!-- 单个分类导航项的视图容器，设置了自定义属性 `data-sts="1"`，并绑定点击事件 `toClassifyPage`，点击该项可触发跳转到相应分类页面的操作，不同分类项通过此属性传递不同参数以区分具体分类情况 -->
        <view class="item"
              data-sts="1"
              @tap="toClassifyPage">
          <!-- 分类项的图标元素，通过指定路径引入图片资源，此处图标可能用于标识“新品推荐”分类 -->
          <image src="@/static/images/icon/newProd.png" />
          <!-- 分类项的文本标签，显示“新品推荐”字样，明确告知用户该分类的含义 -->
          <text>新品推荐</text>
        </view>
        <view class="item"
              data-sts="1"
              @tap="toClassifyPage">
          <!-- 类似上述分类项结构，该图标用于标识“限时特惠”分类，文本标签显示对应分类名称 -->
          <image src="@/static/images/icon/timePrice.png" />
          <text>限时特惠</text>
        </view>
        <view class="item"
              data-sts="3"
              @tap="toClassifyPage">
          <!-- 此图标对应“每日疯抢”分类标识，文本标签显示相应分类名称 -->
          <image src="@/static/images/icon/neweveryday.png" />
          <text>每日疯抢</text>
        </view>
        <view class="item"
              @tap="toCouponCenter">
          <!-- 该图标表示“领优惠券”分类相关标识，文本标签显示对应操作名称，点击此项会触发领优惠券相关的业务逻辑（具体由 `toCouponCenter` 函数处理） -->
          <image src="@/static/images/icon/newprods.png" />
          <text>领优惠券</text>
        </view>
      </view>

      <!-- 消息播放区域，只有当 `news` 数组有数据（即 `news` 存在且长度大于 0）时才显示，用于展示滚动播放的消息通知，点击可触发跳转到消息页面的操作 -->
      <view v-if="news && news.length"
            class="message-play"
            @tap="onNewsPage">
        <!-- 消息通知的图标元素，通过指定路径引入图片资源，一般是类似喇叭的图标，用于提示此处为消息相关区域 -->
        <image src="@/static/images/icon/horn.png"
               class="hornpng" />
        <!-- swiper 组件用于实现消息的垂直滚动播放效果，通过相关属性控制滚动行为 -->
        <swiper :vertical="true"
                :autoplay="true"
                :circular="true"
                duration="1000"
                class="swiper-cont">
          <!-- 使用 `v-for` 指令循环遍历 `news` 数组，`index` 为当前项的索引，每个元素对应一条消息内容 -->
          <block v-for="(item, index) in news"
                 :key="index">
            <!-- swiper-item 组件表示滚动消息中的每一项，在此处直接通过双括号插值表达式展示消息的标题（`item.title`） -->
            <swiper-item class="items">
              {{ item.title }}
            </swiper-item>
          </block>
        </swiper>
        <!-- 箭头图标元素，可能用于视觉上提示用户可点击查看更多消息等操作（具体功能要结合样式和交互设计来看） -->
        <text class="arrow" />
      </view>
    </view>

    <!-- 商品展示相关区域，通过条件判断 `v-if="updata"` 来控制显示与否，内部根据不同商品分类或样式展示相应商品信息 -->
    <view v-if="updata"
          class="updata">
      <!-- 使用 `v-for` 指令循环遍历 `taglist` 数组，`index` 为当前项的索引，每个元素对应一组商品相关的信息，包括商品列表、标题等 -->
      <block v-for="(item, index) in taglist"
             :key="index">
        <!-- 每日上新类型商品展示区域，只有当商品组的 `style` 属性为 `'2'` 且包含商品数据（即 `item.prods` 存在且长度大于 0）时才显示 -->
        <view v-if="item.style==='2' && item.prods && item.prods.length"
              class="up-to-date">
          <!-- 商品组标题区域，包含标题文本以及“查看更多”操作按钮 -->
          <view class="title">
            <!-- 通过双括号插值表达式展示商品组的标题，数据来源于 `item.title` 属性 -->
            <text>{{ item.title }}</text>
            <!-- “查看更多”操作按钮的视图容器，设置了多个自定义属性（`data-sts`、`data-id`、`data-title`）用于传递相关参数，绑定点击事件 `toClassifyPage`，点击可触发跳转到分类页面查看更多该类型商品的操作 -->
            <view class="more-prod-cont"
                  data-sts="0"
                  :data-id="item.id"
                  :data-title="item.title"
                  @tap="toClassifyPage">
              <!-- “查看更多”的文本标签 -->
              <text class="more">
                查看更多
              </text>
            </view>
          </view>
          <!-- 商品列表展示区域，通过循环遍历 `item.prods` 数组展示每个商品的详细信息 -->
          <view class="item-cont">
            <block v-for="(prod, index2) in item.prods"
                   :key="index2">
              <!-- 单个商品的视图容器，绑定点击事件 `toProdPage`，点击可触发跳转到对应商品页面的操作，通过自定义属性 `:data-prodid` 传递商品的 ID 信息 -->
              <view class="prod-item"
                    :data-prodid="prod.prodId"
                    @tap="toProdPage">
                <view>
                  <!-- 商品图片的外层视图容器，用于包裹图片展示相关组件 -->
                  <view class="imagecont">
                    <!-- `img-show` 组件用于展示商品图片（可能是自定义的图片展示组件，具备特定功能或样式处理），通过 `:src` 绑定商品图片的 URL 地址（`prod.pic`），并通过 `:class-list` 绑定类名数组（`['prodimg']`）来应用特定的图片样式 -->
                    <img-show :src="prod.pic"
                              :class-list="['prodimg']" />
                  </view>
                  <!-- 商品名称的文本标签，通过双括号插值表达式展示商品的名称（`prod.prodName`） -->
                  <view class="prod-text">
                    {{ prod.prodName }}
                  </view>
                  <!-- 商品价格展示区域，包含价格符号、整数部分、小数部分的文本展示 -->
                  <view class="price">
                    <!-- 价格符号文本，显示“￥”字样 -->
                    <text class="symbol">
                      ￥
                    </text>
                    <!-- 价格的整数部分，通过调用 `wxs.parsePrice` 函数对商品价格（`prod.price`）进行处理，取处理结果的第一个元素作为整数部分展示（`wxs.parsePrice` 函数具体功能需查看相关代码） -->
                    <text class="big-num">
                      {{ wxs.parsePrice(prod.price)[0] }}
                    </text>
                    <!-- 价格的小数部分，通过 `wxs.parsePrice` 函数取处理结果的第二个元素展示，并添加小数点 -->
                    <text class="small-num">
                      .{{ wxs.parsePrice(prod.price)[1] }}
                    </text>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>

        <!-- 商城热卖类型商品展示区域，只有当商品组的 `style` 属性为 `'1'` 且包含商品数据（`item.prods` 存在且长度大于 0）时才显示 -->
        <view v-if="item.style==='1' && item.prods && item.prods.length"
              class="hot-sale">
          <!-- 商品组标题区域，包含标题文本以及“更多”操作按钮（带有箭头图标，用于提示用户可点击查看更多商品） -->
          <view class="title">
            <text>{{ item.title }}</text>
            <view class="more-prod-cont"
                  data-sts="0"
                  :data-id="item.id"
                  :data-title="item.title"
                  @tap="toClassifyPage">
              <!-- “更多”的文本标签 -->
              <text class="more">
                更多
              </text>
              <!-- 箭头图标元素，用于视觉上引导用户点击操作 -->
              <text class="arrow" />
            </view>
          </view>
          <!-- 商品列表展示区域，通过循环遍历 `item.prods` 数组展示每个商品的详细信息 -->
          <view class="hotsale-item-cont">
            <block v-for="(prod, index2) in item.prods"
                   :key="index2">
              <!-- 单个商品的视图容器，绑定点击事件 `toProdPage`，点击可触发跳转到对应商品页面的操作，通过自定义属性 `:data-prodid` 传递商品的 ID 信息 -->
              <view class="prod-items"
                    :data-prodid="prod.prodId"
                    @tap="toProdPage">
                <view class="hot-imagecont">
                  <!-- 商品图片展示的外层视图容器，内部使用 `img-show` 组件展示商品图片，原理与前面类似 -->
                  <img-show :src="prod.pic"
                            :class-list="['hotsaleimg']" />
                </view>
                <!-- 商品详细信息展示区域，包含商品名称、简介、价格以及购物车图标等元素 -->
                <view class="hot-text">
                  <!-- 商品名称展示部分 -->
                  <view class="hotprod-text">
                    {{ prod.prodName }}
                  </view>
                  <!-- 商品简介的文本标签，通过双括号插值表达式展示商品的简介内容（`prod.brief`） -->
                  <view class="prod-info">
                    {{ prod.brief }}
                  </view>
                  <!-- 商品价格及购物车图标相关展示区域 -->
                  <view class="prod-text-info">
                    <!-- 商品价格展示部分，格式与前面相同，包含价格符号、整数部分、小数部分 -->
                    <view class="price">
                      <text class="symbol">
                        ￥
                      </text>
                      <text class="big-num">
                        {{ wxs.parsePrice(prod.price)[0] }}
                      </text>
                      <text class="small-num">
                        .{{ wxs.parsePrice(prod.price)[1] }}
                      </text>
                    </view>
                    <!-- 购物车图标元素，通过指定路径引入图片资源，通常表示可将该商品加入购物车的操作（具体功能需结合相关交互逻辑确定） -->
                    <image src="@/static/images/tabbar/basket-sel.png"
                           class="basket-img" />
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>

        <!-- 更多宝贝类型商品展示区域，只有当商品组的 `style` 属性为 `'0'` 且包含商品数据（`item.prods` 存在且长度大于 0）时才显示 -->
        <view v-if="item.style==='0' && item.prods && item.prods.length"
              class="more-prod">
          <!-- 商品组标题区域，直接通过双括号插值表达式展示商品组的标题（来源于 `item.title` 属性） -->
          <view class="title">
            {{ item.title }}
          </view>
          <!-- 商品列表展示区域，通过循环遍历 `item.prods` 数组展示每个商品的详细信息 -->
          <view class="prod-show">
            <block v-for="(prod, index2) in item.prods"
                   :key="index2">
              <!-- 单个商品的视图容器，绑定点击事件 `toProdPage`，点击可触发跳转到对应商品页面的操作，通过自定义属性 `:data-prodid` 传递商品的 ID 信息 -->
              <view class="show-item"
                    :data-prodid="prod.prodId"
                    @tap="toProdPage">
                <view class="more-prod-pic">
                  <!-- 商品图片展示的外层视图容器，内部使用 `img-show` 组件展示商品图片，方式与前面一致 -->
                  <img-show :src="prod.pic"
                            :class-list="['more-pic']" />
                </view>
                <!-- 商品详细信息展示区域，包含商品名称、简介、价格以及购物车图标等元素 -->
                <view class="prod-text-right">
                  <!-- 商品名称展示部分 -->
                  <view class="prod-text more">
                    {{ prod.prodName }}
                  </view>
                  <!-- 商品简介的文本标签，通过双括号插值表达式展示商品的简介内容（`prod.brief`） -->
                  <view class="prod-info">
                    {{ prod.brief }}
                  </view>
                  <!-- 商品价格及购物车图标相关展示区域 -->
                  <view class="b-cart">
                    <!-- 商品价格展示部分，包含价格符号、整数部分、小数部分 -->
                    <view class="price">
                      <text class="symbol">
                        ￥
                      </text>
                      <text class="big-num">
                        {{ wxs.parsePrice(prod.price)[0] }}
                      </text>
                      <text class="small-num">
                        .{{ wxs.parsePrice(prod.price)[1] }}
                      </text>
                    </view>
                    <!-- 购物车图标元素，通过指定路径引入图片资源，绑定点击事件 `addToCart(prod)`，点击可触发将该商品加入购物车的操作 -->
                    <image src="@/static/images/tabbar/basket-sel.png"
                           class="basket-img"
                           @tap.stop="addToCart(prod)" />
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script setup>
const wxs = number()
const indicatorColor = ref('#d1e5fb')
const indicatorActiveColor = ref('#1b7dec')
const autoplay = ref(true)
const interval = ref(2000)
const duration = ref(1000)
const indexImgs = ref([])
const seq = ref(0)
const news = ref([])
const taglist = ref([])
const updata = ref(true)

onLoad(() => {
  getAllData()
})
onShow(() => {
  // #ifdef MP-WEIXIN
  uni.getSetting({
    success (res) {
      if (!res.authSetting['scope.userInfo']) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
    }
  })
  // #endif
  http.getCartCount() // 重新计算购物车总数量
})

onPullDownRefresh(() => {
  // 模拟加载
  setTimeout(() => {
    getAllData()
    uni.stopPullDownRefresh() // 停止下拉刷新
  }, 100)
})

const getAllData = () => {
  http.getCartCount()// 重新计算购物车总数量
  getIndexImgs()
  getNoticeList()
  getTag()
}

const toProdPage = (e) => {
  const prodid = e.currentTarget.dataset.prodid

  if (prodid) {
    uni.navigateTo({
      url: '/pages/prod/prod?prodid=' + prodid
    })
  }
}
/**
 * 加入购物车
 * @param item
 */
const addToCart = (item) => {
  uni.showLoading({
    mask: true
  })
  http.request({
    url: '/prod/prodInfo',
    method: 'GET',
    data: {
      prodId: item.prodId
    }
  })
    .then(({ data }) => {
      http.request({
        url: '/p/shopCart/changeItem',
        method: 'POST',
        data: {
          basketId: 0,
          count: 1,
          prodId: data.prodId,
          shopId: data.shopId,
          skuId: data.skuList[0].skuId
        }
      })
        .then(() => {
          uni.hideLoading()
          http.getCartCount() // 重新计算购物车总数量
          uni.showToast({
            title: '加入购物车成功',
            icon: 'none'
          })
        })
    })
}

const toCouponCenter = () => {
  uni.showToast({
    icon: 'none',
    title: '该功能未开源'
  })
}

/**
 * 跳转搜索页
 */
const toSearchPage = () => {
  uni.navigateTo({
    url: '/pages/search-page/search-page'
  })
}

/**
 * 跳转商品活动页面
 * @param e
 */
const toClassifyPage = (e) => {
  let url = '/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts
  const id = e.currentTarget.dataset.id
  const title = e.currentTarget.dataset.title

  if (id) {
    url += '&tagid=' + id + '&title=' + title
  }

  uni.navigateTo({
    url
  })
}
/**
 * 跳转公告列表页面
 */
const onNewsPage = () => {
  uni.navigateTo({
    url: '/pages/recent-news/recent-news'
  })
}

/**
 * 加载轮播图
 */
const getIndexImgs = () => {
  http.request({
    url: '/indexImgs',
    method: 'GET',
    data: {}
  })
    .then(({ data }) => {
      indexImgs.value = data
      seq.value = data
    })
}

const getNoticeList = () => {
  // 加载公告
  http.request({
    url: '/shop/notice/topNoticeList',
    method: 'GET',
    data: {}
  })
    .then(({ data }) => {
      news.value = data
    })
}

/**
 * 加载商品标题分组列表
 */
const getTag = () => {
  http.request({
    url: '/prod/tag/prodTagList',
    method: 'GET',
    data: {}
  })
    .then(({ data }) => {
      taglist.value = data
      for (let i = 0; i < data.length; i++) {
        updata.value = false
        updata.value = true
        getTagProd(data[i].id, i)
      }
    })
}

const getTagProd = (id, index) => {
  http.request({
    url: '/prod/prodListByTagId',
    method: 'GET',
    data: {
      tagId: id,
      size: 6
    }
  })
    .then(({ data }) => {
      updata.value = false
      updata.value = true
      const taglistParam = taglist.value
      taglistParam[index].prods = data.records
      taglist.value = taglistParam
    })
}
</script>

<style scoped lang="scss">
@use './index.scss';
</style>
