<template>
  <view class="container">
    <!--    顶部搜索框-->
    <view class="top">
      <Search
        background="rgba(255, 255, 255, 0.8)"
        backIcon="black"
        iconSrc="/static/assets/blackLeft.png"
        placeholderText="请输入要搜索的内容"
      ></Search>
    </view>
    <!--    轮播图-->
    <view class="nav">
      <wd-swiper
        customImageClass="main-img"
        :list="swiperList"
        autoplay
        v-model:current="current"
        @click="handleClick"
        @change="onChange"
        height="188"
        mode="aspectFit"
      ></wd-swiper>
      <view class="nav-img">
        <img
          class="culture"
          src="/static/assets/culture.png"
          style="width: 366rpx; height: 362rpx"
        />
        <view class="right-img">
          <img
            class="delicacy"
            src="/static/assets/delicacy.png"
            style="height: 176rpx; margin-left: 8rpx"
          />
          <img
            @tap="toPresale"
            class="fresh"
            src="/static/assets/fresh.png"
            style="height: 176rpx; margin-left: 8rpx"
          />
        </view>
      </view>
    </view>
    <!--    好货热卖-->
    <view class="hot-sale">
      <view class="top-title">
        <text class="left-title">好货热卖</text>
        <text class="right-title">更多</text>
      </view>
      <wd-icon
        name="arrow-right"
        size="25rpx"
        color="#ABAAAA"
        style="position: relative; float: right; top: -42rpx"
      ></wd-icon>
      <img
        @tap="toDetail"
        class="rice"
        src="/static/assets/rice.png"
        style="width: 670rpx; height: 236rpx"
      />
      <img
        @tap="toDetail"
        class="potato"
        src="/static/assets/potato.png"
        style="width: 650rpx; height: 236rpx; margin-left: 20rpx; margin-top: -20rpx"
      />
    </view>
    <!--    tabs-->
    <scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true">
      <text
        @tap="choice(index, item.categoryId)"
        v-for="(item, index) in tabsData"
        :key="index"
        class="text"
        :class="light === index ? 'light' : ''"
      >
        {{ item.text }}
      </text>
    </scroll-view>
    <!--    列表-->
    <view class="tabs-list">
      <img
        class="fruit-img"
        src="/static/assets/fruit4.png"
        style="width: 670rpx; height: 236rpx"
      />
      <view class="sort-list">
        <view class="sort-img" v-for="(item, index) in detailList" :key="index">
          <img @tap="toDetail" :src="item.img" style="width: 330rpx; height: 330rpx" />
          <view class="detail-title">{{ item.text }}</view>
          <view class="price-page">
            <text class="price">￥{{ item.price }}</text>
          </view>
          <img class="presale" src="/static/assets/car.png" style="width: 40rpx; height: 40rpx" />
        </view>
      </view>
    </view>
    <!-- 购物车悬浮按钮 -->
    <view class="cart-floating" @tap="toCart">
      <wd-badge modelValue="4">
        <img class="shop-car" src="/static/presale/cart.png" style="width: 40rpx; height: 40rpx" />
      </wd-badge>
    </view>
  </view>
</template>

<script setup>
import Search from '../../components/index/Search.vue';
const current = ref(0);
const light = ref(0);
// 轮播图
const swiperList = ref([
  '../../static/assets/village.png',
  '../../static/assets/village.png',
  '../../static/assets/village.png',
]);
// 分类列表数据
const tabsData = ref([
  { img: '/static/assets/mainPicture.png', text: '水果生鲜' },
  { img: '/static/assets/presale.png', text: '米面粮油' },
  { img: '/static/assets/mainPicture.png', text: '农家干货' },
  { img: '/static/assets/mainPicture.png', text: '鲜货预售' },
  { img: '/static/assets/mainPicture.png', text: '水果生鲜' },
  { img: '/static/assets/mainPicture.png', text: '米面粮油' },
  { img: '/static/assets/mainPicture.png', text: '农家干货' },
  { img: '/static/assets/mainPicture.png', text: '鲜货预售' },
]);
const detailList = ref([
  { img: '/static/assets/fruit.png', price: '2555', text: '这是草莓这是草莓' },
  { img: '/static/assets/fruit1.png', price: '2555', text: '这是草莓这是草莓' },
  { img: '/static/assets/fruit2.png', price: '2555', text: '麻辣鱼豆腐' },
  { img: '/static/assets/fruit3.png', price: '2555', text: '麻辣鱼豆腐' },
]);
const choice = (index) => {
  light.value = index;
};
function handleClick(e) {
  console.log(e);
}
function onChange(e) {
  console.log(e);
}
function toPresale() {
  // TODO: 跳转到预售
  xma.navigateTo({
    url: '/pages/index/presale',
  });
}
function toDetail() {
  // TODO: 跳转到详情页
  xma.navigateTo({
    url: '/pages/detail/detail',
  });
}
function toCart() {
  // TODO: 跳转到购物车
  xma.navigateTo({
    url: '/pages/cart/cart',
  });
}
</script>

<style lang="scss" scoped>
page {
  background: #f3f3f3;
}
.container {
  position: relative;
  left: 0rpx;
  top: -45rpx;
  opacity: 1;
}
.top {
  width: 750rpx;
  height: 128rpx;
  margin-top: 40rpx;
  background: #ffffff;
}
.nav {
  width: 710rpx;
  margin-left: 18rpx;
  margin-top: 15rpx;
}
.nav-img {
  width: 710rpx;
  display: flex;
  position: relative;
  top: 12rpx;
}
.hot-sale {
  width: 710rpx;
  height: 532rpx;
  border-radius: 16rpx;
  background: #ffffff;
  margin: 20rpx;
}
.top-title {
  top: 5px;
  position: relative;
  margin: 25rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left-title {
  font-family: Source Han Sans;
  font-size: 15px;
  font-weight: bold;
  line-height: 15px;
  letter-spacing: 0em;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
}
.right-title {
  font-family: Source Han Sans;
  font-size: 9px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #abaaaa;
}
.tabs {
  white-space: nowrap;
  height: 60rpx;
  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
  background-color: transparent;
  .text {
    font-size: 24rpx;
    color: #d8d8d8;
    margin: 0 20rpx;
    font-weight: bold;
    display: inline-block;
  }
  .text:nth-child(1) {
    margin-left: 40rpx;
  }
  .light {
    background: #2fb641;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    position: relative;
    &::after {
      content: '';
      width: 40rpx;
      height: 12rpx;
      background: url('../../static/assets/selected.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      bottom: -16rpx;
      left: 50%;
      transform: translate(-50%);
    }
  }
}
.tabs-list {
  margin-left: 10px;
  width: 712rpx;
  height: 1172rpx;
  border-radius: 8px;
  background: #ffffff;
}
.fruit-img {
  margin-left: 10px;
  margin-top: 10px;
}
.son-img {
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}
.row {
  display: flex;
  flex-basis: 100%;
  justify-content: space-between;
}
.sort-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.sort-img {
  width: 330rpx;
  height: 330rpx;
  margin-bottom: 80rpx;
}
.detail-title {
  font-family: Source Han Sans;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 28rpx;
  letter-spacing: 0em;
  margin-left: 48rpx;
  margin-top: -20rpx;
  color: #3d3d3d;
  width: 190rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price-page {
  width: 96rpx;
  height: 28rpx;
  margin-top: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #abaaaa;
  margin-left: 40rpx;
}
.price {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 28rpx;
  color: #fa5151;
}
.presale {
  border-radius: 2px;
  font-size: 16rpx;
  line-height: 16rpx;
  text-align: center;
  line-height: 24rpx;
  margin-left: 240rpx;
  margin-top: -15px;
  display: block;
}
.cart-floating {
  position: fixed;
  right: 20rpx;
  bottom: 100rpx;
  width: 80rpx;
  height: 80rpx;
  z-index: 99;
  background-color: #ffffff;
  border-radius: 50%;
}
.cart {
  position: relative;
  top: 20rpx;
  left: 16rpx;
  width: 48rpx;
  height: 46rpx;
}
.shop-car {
  margin-left: 20rpx;
  margin-top: 20rpx;
}
::v-deep .wd-badge__content.is-fixed {
  margin-top: 20rpx;
}
::v-deep.icon {
  width: 56rpx;
  height: 56rpx;
}
</style>
