<template>
  <view class="container">
    <!--    顶部搜索框-->
    <view class="top">
      <Search
        background="rgba(255, 255, 255, 0.8)"
        backIcon="black"
        iconSrc="/static/assistingAgriculture/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/assistingAgriculture/assets/culture.png"
          style="width: 366rpx; height: 362rpx"
        />
        <view class="right-img">
          <img
            class="delicacy"
            src="/static/assistingAgriculture/assets/delicacy.png"
            style="height: 176rpx; margin-left: 8rpx"
          />
          <img
            @tap="toPresale"
            class="fresh"
            src="/static/assistingAgriculture/assets/fresh.png"
            style="height: 176rpx; margin-left: 8rpx"
          />
        </view>
        <!--        <view>-->
        <!--          <view v-for="(item, index) in rightList" :key="index" @click="toPresale(item.categoryId)">-->
        <!--            <img-->
        <!--              class="right-sort"-->
        <!--              :src="item.icon"-->
        <!--              style="width: 336rpx; height: 176rpx; margin-left: 8rpx"-->
        <!--            />-->
        <!--          </view>-->
        <!--        </view>-->
      </view>
    </view>
    <!--    好货热卖-->
    <view class="hot-sale">
      <view class="top-title">
        <text class="left-title">好货热卖</text>
        <text class="right-title" @tap="toPresale">更多</text>
      </view>
      <wd-icon
        name="arrow-right"
        size="25rpx"
        color="#ABAAAA"
        style="position: relative; float: right; top: -42rpx"
      ></wd-icon>
      <view class="hot-img" v-for="(item, index) in hotImgList" :key="index">
        <img class="rice" @tap="toDetail" :src="item.img" style="width: 670rpx; height: 236rpx" />
      </view>
    </view>
    <!--    tabs-->
    <scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true">
      <text
        @tap="choice(index, item)"
        v-for="(item, index) in detailList"
        :key="index"
        class="text"
        :class="light === index ? 'light' : ''"
      >
        {{ item.categoryName }}
      </text>
    </scroll-view>
    <!--    列表-->
    <view class="tabs-list">
      <img
        class="fruit-img"
        src="/static/assistingAgriculture/assets/fruit4.png"
        style="width: 670rpx; height: 236rpx"
      />
      <view class="whh" style="display: flex">
        <view
          class="sort-img"
          v-for="(item, index) in testData"
          :key="index"
          style="margin-left: 20rpx"
        >
          <img @tap="toDetail" :src="item.imgUrl" style="width: 330rpx; height: 330rpx" />
          <view class="detail-title">{{ whh }}</view>
          <view class="price-page">
            <text class="price">￥{{ item.price }}</text>
          </view>
          <img
            class="presale"
            src="/static/assistingAgriculture/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/assistingAgriculture/presale/cart.png"
          style="width: 40rpx; height: 40rpx"
        />
      </wd-badge>
    </view>
  </view>
</template>

<script setup>
import Search from '../../../components/assistingAgriculture/index/Search.vue';
import {
  getGoodSaleProdList,
  getPlatformProdList,
} from '../../../api/assistingAgriculture/building';
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';

const current = ref(0);
const rightList = ref([]);
const light = ref(0);
const hotImgList = ref([]);
const testData = ref([]);
let sortData;
// 轮播图
const swiperList = ref([
  '../../../static/assistingAgriculture/assets/village.png',
  '../../../static/assistingAgriculture/assets/village.png',
  '../../../static/assistingAgriculture/assets/village.png',
]);
// 分类列表数据
const detailList = ref([]);
const whh = ref({});
const params = {
  current: 1,
  size: 10,
};
const router = useRoute();
const params1 = {
  current: 1,
  size: 10,
  categoryId: router.query.categoryId,
};
const filteredProdList = ref([]);

onMounted(async () => {
  getGoodSaleProd();
  platformProdList();
});

// 好货热卖
const getGoodSaleProd = () => {
  getGoodSaleProdList(params).then((res) => {
    res.data.records.forEach((item) => {
      item.img = import.meta.env.VITE_APP_IMG_URL + item.pic;
    });
    hotImgList.value = res.data.records.slice(0, 2);
  });
};
// 筑农严选首页-分类查询商品列表
const platformProdList = () => {
  getPlatformProdList({ categoryId: router.query.categoryId }).then((res) => {
    detailList.value = res.data;
    choice(0, '3272');
  });
};
const choice = (index, item) => {
  testData.value = detailList.value[index].prodList;
  testData.value.forEach((item) => {
    item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.pic;
    whh.value = getSlashValue(item.content);
    console.log(whh.value, 333);
  });
  light.value = index;
};
// 跳转预售
const toPresale = () => {
  xma.navigateTo({
    url: `/pages/assistingAgriculture/index/presale?categoryId=3273`,
  });
};
// 处理content
function getSlashValue(url) {
  const a = url.substr(url.indexOf('>', url.indexOf('>') - 1) + 1);
  return a.substr(0, a.indexOf('<'));
}
function handleClick(e) {
  console.log(e);
}
function onChange(e) {
  console.log(e);
}
function toDetail() {
  // TODO: 跳转到详情页
  xma.navigateTo({
    url: '/pages/assistingAgriculture/detail/detail',
  });
}
function toCart() {
  // TODO: 跳转到购物车
  xma.navigateTo({
    url: '/pages/assistingAgriculture/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/assistingAgriculture/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;
  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: -36rpx;
  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;
}
.container1 {
  display: flex;
}

.left-box {
  width: 33.33%;
  background-color: lightblue;
}

.right-box {
  width: 66.66%;
  display: flex;
  flex-direction: column;
}

.right-top-box {
  height: 100%;
  background-color: lightgreen;
}
img.rice {
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin-left: 20rpx;
  margin-top: -40rpx;
  padding-bottom: 40rpx;
}
</style>
