<template>
  <layout>
    <uv-sticky
      bg-color="#F5F5F5"
      offset-top="0"
      customNavHeight="0"
    >
      <uv-navbar
        :fixed="false"
        :safeAreaInsetTop="true"
        height="0"
        bgColor="transparent"
        leftIcon=""
      />
      <!-- #ifndef MP -->
      <blank size="10"></blank>
      <!-- #endif -->
      <view class="search">
        <view class="search-logo">
          <img
            class="image"
            src="@/static/images/logo.png"
            alt=""
            mode="widthFix"
          >
        </view>

        <view
          class="y-search"
          @click="$yrouter.navigateTo({ url: '/pages/search/search' })"
        >
          <view class="y-search-content">
            <uv-search
              placeholder="搜索商品"
              disabled
              bgColor="#fff"
              :showAction="false"
            ></uv-search>
          </view>
        </view>
        <view class="search-action">

        </view>
      </view>
      <blank size="5"></blank>
    </uv-sticky>

    <blank size="10"></blank>
    <scroll-view>
      <container>

        <view class="swiper">
          <swiper
            class="swiper"
            circular
            indicator-dots
            autoplay
          >
            <swiper-item>
              <view class="swiper-item">
                <image
                  class="image"
                  src="@/static/images/banner.png"
                  mode="widthFix"
                />
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item">
                <image
                  class="image"
                  src="@/static/images/banner.png"
                  mode="widthFix"
                />
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item">
                <image
                  class="image"
                  src="@/static/images/banner.png"
                  mode="widthFix"
                />
              </view>
            </swiper-item>
          </swiper>
          <!--       
          <uv-swipe
            class="my-swipe"
            :autoplay="3000"
            indicator-color="white"
            :list="[
              '@/static/images/banner.png',
              '@/static/images/banner.png',
              '@/static/images/banner.png',
            ]"
          > -->
          <!-- </uv-swipe> -->
        </view>
      </container>
      <blank size="
          15"></blank>

      <container>
        <card>
          <view class="menu">
            <view
              class="menu-item"
              @tap="$yrouter.navigateTo({ url: '/pages/goodsList/goodsList' })"
            >
              <view class="menu-item-icon">
                <img
                  class="image"
                  src="@/static/images/sp.png"
                  mode="widthFix"
                />
              </view>
              <view class="menu-item-name">
                全部商品
              </view>
            </view>
            <view
              class="menu-item"
              @tap="$toAuth()"
            >
              <view class="menu-item-icon">
                <img
                  class="image"
                  src="@/static/images/pt.png"
                  mode="widthFix"
                />
              </view>
              <view class="menu-item-name">

                拼团专区
              </view>
            </view>
            <view
              class="menu-item"
              @tap="$toAuth()"
            >
              <view class="menu-item-icon">
                <img
                  class="image"
                  src="@/static/images/ms.png"
                  mode="widthFix"
                />
              </view>
              <view class="menu-item-name">
                秒杀专区

              </view>
            </view>
            <view
              class="menu-item"
              @tap="$toAuth()"
            >
              <view class="menu-item-icon">
                <img
                  class="image"
                  src="@/static/images/kj.png"
                  mode="widthFix"
                />
              </view>
              <view class="menu-item-name">

                砍价专区
              </view>
            </view>
          </view>
        </card>
      </container>
      <blank size="15"></blank>

      <activity
        title="新品首发"
        subtitle="超多人想要"
        more="更多新品"
        @moreClick="$yrouter.navigateTo({ url: '/pages/newGoods/newGoods' })"
      >
        <card class="goods-row">
          <uv-grid
            :border="false"
            :col="3"
            :gutter="0"
            v-if="homeData.firstList"
          >
            <uv-grid-item
              v-for="(item, index) in homeData.firstList"
              :key="index"
            >
              <first-goods
                :data="item"
                card
                surplus="200"
              />
            </uv-grid-item>
          </uv-grid>
        </card>

      </activity>
      <blank size="15"></blank>

      <!-- <activity
      title="超值拼团"
      subtitle="拼着买更划算"
      more="查看更多"
    >
      <scroll-view
        @scroll="scroll"
        scroll-x="true"
        scroll-y="false"
      >
        <view class="scroll-view-H">
          <space>

            <card width="290">
              <goods
                card
                interval="true"
                desc="3"
                showAction="true"
              >
                <template #action>
                  <uv-button
                round
                block
                type="primary"
              >
                立即拼团
              </uv-button>
                </template>
              </goods>
            </card>

            <card width="290">

              <goods
                card
                interval="true"
                desc="3"
                showAction="true"
              >
                <template #action>
                 <uv-button
                round
                block
                type="primary"
              >
                立即拼团
              </uv-button>
                </template>
              </goods>
            </card>
            <card width="290">

              <goods
                card
                interval="true"
                desc="3"
                showAction="true"
              >
                <template #action>
                 <uv-button
                round
                block
                type="primary"
              >
                立即拼团
              </uv-button>
                </template>
              </goods>
            </card>
          </space>
        </view>
      </scroll-view>
    </activity>
    <blank size="15"></blank>

    <activity
      title="限时秒杀"
      subtitle="13点场"
      more="查看更多"
    >
      <card class="goods-row">
        <uv-grid
          :border="false"
          :column-num="3"
          :gutter="0"
        >
          <uv-grid-item>
            <goods
              card
              surplus="200"
              priceMode="primary"
            />
          </uv-grid-item>
          <uv-grid-item>
            <goods
              card
              surplus="200"
              groupNum="200"
              priceMode="primary"
            />
          </uv-grid-item>
          <uv-grid-item>
            <goods
              card
              surplus="200"
              priceMode="primary"
            />
          </uv-grid-item>
        </uv-grid>
      </card>
    </activity>
    <blank size="15"></blank>

    <activity
      title="砍价专区"
      more="查看更多"
    >
      <space
        direction="vertical"
        fill
      >
        <card>
          <goods
            interval="true"
            desc="3"
            showAction="true"
            list
          >
            <template #action>
              <uv-button
                round
                block
                type="primary"
              >
                立即拼团
              </uv-button>
            </template>
          </goods>
        </card>
        <card>
          <goods
            card
            interval="true"
            desc="3"
            showAction="true"
            list
          >
            <template #action>
              <uv-button
                round
                block
                type="primary"
              >
                立即拼团
              </uv-button>
            </template>
          </goods>
        </card>
      </space>
    </activity>
    <blank size="15"></blank> -->

      <!-- <activity
        title="热门直播"
        more="查看更多"
      >

      </activity> -->
    </scroll-view>
  </layout>
</template>

<script setup>
import {
  ref
} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
  getBanner,
  getHomeData
} from '@/api/market'
import { useMainStore } from '@/store/store'
const main = useMainStore()

const homeData = ref({})
console.log("--> % homeData:\n", homeData.value)

const handleGetBanner = async () => {

  const banner = await getBanner()
  if (banner) {
    bannerData.value = banner
  }

}
const handleGetHomeData = async () => {
  const home = await getHomeData()
  console.log("--> % handleGetHomeData % home:\n", home)
  if (home) {
    homeData.value = home
    console.log("--> % handleGetHomeData % homeData.value:\n", homeData.value.firstList)
  }
}


handleGetBanner()
handleGetHomeData()

const navigatorToSearch = () => {
  uni.navigateTo({
    url: '/pages/search/search'
  })
}

onLoad(() => {
  main.init()
})

</script>

<style lang="less">
.search {
  margin-top: 5rpx;
  padding: 0 17px;
  display: flex;
  align-items: center;
  padding-bottom: 10rpx;

  .y-search {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .y-search-content {
    width: 320rpx;
    height: 60rpx;
    background: #FFFFFF;
    border-radius: 35rpx;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }


  &-logo {
    display: flex;
    align-items: center;
    width: 126rpx;

    .image {
      width: 126rpx;
      height: 50rpx;
    }
  }

  &-action {
    width: 126rpx;

  }
}

.logo {
  width: 63px;
  height: 25px;

  .image {
    width: 63px;
    height: 25px;
    display: block;
  }
}


.menu {
  display: flex;
  align-items: center;
  height: 144rpx;

  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .image {
      width: 50rpx;
      height: 50rpx;
      display: block;
    }

    &-name {
      margin-top: 18rpx;
      line-height: 32rpx;
      font-size: 24rpx;
      color: #333333;
    }
  }
}

.goods-row {
  padding: 0 8rpx;
}
</style>
