<template>
  <view class="container">
    <view class="top">
      <Search
        background="rgba(255, 255, 255, 0.8)"
        backIcon="black"
        iconSrc="/static/assistingAgriculture/assets/left.png"
        placeholderText="输入商品名称"
      ></Search>
    </view>
    <view class="nav">
      <wd-swiper
        :list="swiperList"
        autoplay
        v-model:current="current"
        @click="handleClick"
        @change="onChange"
        customClass="guiyang"
        height="220"
        imageMode="aspectFill"
      ></wd-swiper>
    </view>
    <view class="sort">
      <view style="display: flex; flex-direction: row">
        <view
          class="borderClass"
          @tap="chooseTab(item.categoryId)"
          v-for="(item, index) in sortList"
          :key="index"
        >
          <img :src="item.imgUrl" style="width: 48rpx; height: 48rpx" />
          <view class="sort-text">{{ item.categoryName }}</view>
        </view>
      </view>
    </view>
    <view>
      <view>
        <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.categoryName }}
          </text>
        </scroll-view>
      </view>
      <view class="tab-list" v-for="(item, index) in buyList" :key="index" @tap="toDetail">
        <img class="buy-list" :src="item.img" style="width: 670rpx; height: 670rpx" />
        <view>
          <text class="retail-price">零售价：￥{{ item.oriPrice }}/盒</text>
          <text class="presale-price">预售价：￥{{ item.price }}/盒</text>
        </view>
        <view>
          <img
            class="buy-img"
            src="/static/assistingAgriculture/presale/img6.png"
            style="
              position: sticky;
              width: 284rpx;
              height: 128rpx;
              float: right;
              margin-top: -80rpx;
              margin-right: 16rpx;
            "
          />
        </view>
      </view>
    </view>
    <view class="waterfall">
      <view class="wt-left wt-list">
        <view class="wt-item" v-for="(good, index) in buyList" :key="index" @tap="toDetail">
          <view class="item-img">
            <image :src="good.img" mode="widthFix" style="border-radius: 16rpx"></image>
            <image
              class="presale-img"
              src="/static/assistingAgriculture/presale/presale.png"
              style="
                width: 132rpx;
                height: 64rpx;
                z-index: 10;
                margin-left: 18rpx;
                top: -70rpx;
                left: -14rpx;
              "
            />
            <image
              class="preview-img"
              src="/static/assistingAgriculture/presale/preview.png"
              style="width: 264rpx; height: 40rpx; z-index: 9; top: -70rpx"
            />
            <text class="pre-text">预计9月15日发货</text>
          </view>
          <!-- 介绍部分 -->
          <view class="introduce-section">
            <text class="title">{{ good.prodName }}</text>
            <view class="tags-box">
              <text class="good-detail">{{ good.detail }}</text>
              <text class="introduction">{{ good.introduction }}</text>
              <text class="good-price">￥{{ good.price }}</text>
              <img class="add" src="/static/assistingAgriculture/presale/add.png" />
            </view>
          </view>
        </view>
      </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>
</template>

<script setup>
import Search from '../../../components/assistingAgriculture/index/Search.vue';
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import {
  categoryPresaleList,
  getPresaleList,
  getPresaleProdList,
  getStrictSelection,
} from '../../../api/assistingAgriculture/building';
const swiperList = ref([]);
const current = ref(0);
// 轮播图数据
let lunboData;
let sortData;
const light = ref(0);
const sortList = ref([]);
const tabsData = ref([]);
const buyList = ref([]);
const sortDataList = ref([]);
const shopList = ref([
  { img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
  { img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
  { img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
  { img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
  { img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
  { img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
]);
// 声明需要的数据
const data = reactive({
  leftList: [], // 左边列图片
  rightList: [], // 右边列图片
  leftHeight: 0, // 左边列高度
  rightHeight: 0, // 右边列高度
  columnWidth: 0, // 列宽度
});

// 总商品数据列表
const goodList = ref([
  {
    id: 1,
    name: '这是一个商品',
    image: '/static/assistingAgriculture/presale/buy.png',
    introduction: '商品简介商品简介',
    price: 69.9,
  },
  {
    id: 2,
    name: '商品二',
    image: '/static/assistingAgriculture/presale/img7.png',
    introduction: '商品简介商品简介',
    price: 69.9,
  },
  {
    id: 3,
    name: '商品三',
    image: '/static/assistingAgriculture/assets/fruit.png',
    introduction: '商品简介商品简介',
    price: 69.9,
  },
  {
    id: 4,
    name: '商品四',
    image: '/static/assistingAgriculture/presale/buy.png',
    introduction: '商品简介商品简介',
    price: 69.9,
  },
  {
    id: 5,
    name: '商品五',
    image: '/static/assistingAgriculture/presale/buy.png',
    introduction: '商品简介商品简介',
    price: 69.9,
  },
]);
const router = useRoute();
const params = {
  current: 1,
  size: 10,
  categoryId: router.query.categoryId,
};
const tabsList = ref([]);
onMounted(async () => {
  getPresale();
  getPresaleProd();
  presaleSortList();
  chooseTab('3287');
});
// 预售板块轮播图
const getPresale = () => {
  getPresaleList({ place: 'presale' }).then((res) => {
    console.log(res, 111);
    res.data.forEach((item) => {
      item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.imgUrl;
    });
    lunboData = res.data;
    swiperList.value = res.data.map((item) => {
      return item.imgUrl;
    });
  });
};
// 筑农预售分类
const presaleSortList = () => {
  categoryPresaleList().then((res) => {
    res.data.forEach((item) => {
      item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.pic;
    });
    sortData = res.data;
    sortList.value = res.data.map((item) => {
      return item.imgUrl;
    });
    console.log(res.data, 111);
    sortList.value = res.data;
  });
};
const chooseTab = (index) => {
  getStrictSelection({ parentId: index }).then((res) => {
    res.data.forEach((item, index) => {
      item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.pic;
    });
    tabsData.value = res.data;
  });
};

// 筑农首页-分类查询商品列表
const getPresaleProd = () => {
  getPresaleProdList(params).then((res) => {
    res.data.records.forEach((item) => {
      item.img = import.meta.env.VITE_APP_IMG_URL + item.pic;
    });
    buyList.value = res.data.records;
  });
};
// 二级分类点击事件
const choice = (index, categoryId) => {
  getPresaleProdList({ current: 1, size: 10, categoryId }).then((res) => {
    res.data.records.forEach((item) => {
      item.img = import.meta.env.VITE_APP_IMG_URL + item.pic;
    });
    buyList.value = res.data.records;
    if (index === 0) {
      chooseTab('3287');
      choice(0, '3273');
    }
  });
  light.value = index;
};
// 左侧数据列表
const LeftList = ref([]);
// 右侧数据列表
const RightList = ref([]);

// 将商品信息列表分为左侧右侧两个部分
for (let i = 0; i < goodList.value.length; i++) {
  if (i % 2 === 0) {
    LeftList.value.push(goodList.value[i]);
  } else {
    RightList.value.push(goodList.value[i]);
  }
}

// 点击商品 跳转详情
function ToDetail(id) {
  console.log('点击了商品', id);
}
function handleClick(e) {
  console.log(e);
}
function onChange(e) {
  console.log(e);
}
function toCart() {
  // TODO: 跳转到筑农严选
  xma.navigateTo({
    url: '/pages/assistingAgriculture/cart/cart',
  });
}
function toDetail() {
  // TODO: 跳转到筑农严选
  xma.navigateTo({
    url: '/pages/assistingAgriculture/detail/detail',
  });
}
function toTab(item) {
  console.log(item, 222);
}
</script>

<style lang="scss" scoped>
page {
  background: #f3f3f3;
}
.container {
  .top {
    width: 100%;
    height: 440rpx;
    background: linear-gradient(180deg, #71c456 0%, rgba(243, 243, 243, 0) 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    overflow: hidden;
  }
}
.nav {
  width: 710rpx;
  margin-left: 18rpx;
  margin-top: -300rpx;
}
.nav-img {
  width: 710rpx;
  display: flex;
  position: relative;
  top: 12rpx;
}
.sort {
  width: 750rpx;
  height: 186rpx;
}
.borderClass {
  width: 96rpx;
  height: 96rpx;
  margin-left: 50rpx;
  margin-top: 22rpx;
}
.sort-text {
  font-size: 22rpx;
  font-weight: 500;
  line-height: 24rpx;
  text-align: center;
  letter-spacing: 0em;
  color: #3d3d3d;
  width: 176rpx;
  margin-left: -60rpx;
}
.tabs {
  width: 750rpx;
  height: 76rpx;
  margin-top: -64rpx;
  margin-left: 20rpx;
  border-radius: 8px 8px 0px 0px;
  background: #ffffff;
  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
  background-color: transparent;
}
.tabs {
  white-space: nowrap;
  height: 60rpx;
  .text {
    font-size: 24rpx;
    color: #d8d8d8;
    margin: 0 20rpx;
    font-weight: bold;
    display: inline-block;
  }
  .text:nth-child(1) {
    margin-left: 40rpx;
  }
  .light {
    background: #50d071;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    position: relative;
    //&::after {
    //  content: '';
    //  width: 20rpx;
    //  height: 12rpx;
    //  background: #e6ffe3;
    //  background-size: 100% 100%;
    //  position: absolute;
    //  bottom: -16rpx;
    //  left: 50%;
    //  transform: translate(-50%);
    //}
  }
}
.tab-list {
  width: 710rpx;
  height: 730rpx;
  margin-top: -64rpx;
  margin-left: 20rpx;
  border-radius: 0px 0px 8px 8px;
  background: #ffffff;
  margin-top: 6rpx;
}
.buy-list {
  margin-top: 30rpx;
  margin-left: 20rpx;
}
.retail-price {
  height: 28rpx;
  display: block;
  margin-top: -120rpx;
  margin-left: 60rpx;
  font-family: Source Han Sans;
  font-size: 24rpx;
  font-weight: normal;
  line-height: 28rpx;
  letter-spacing: 0em;
  text-decoration: line-through;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #b3b3b3;
}
.presale-price {
  display: block;
  margin-left: 60rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #ffffff;
  position: relative;
  z-index: 9;
}
.waterfall {
  display: flex;
  flex-direction: row;
  width: 710rpx;
  margin-top: 10rpx;
}

.wt-list {
  width: 360rpx;
  display: flex;
  flex-direction: row;
}

.wt-item {
  border-radius: 8px 8px 8px 8px;
  margin-bottom: 15rpx;
  background-color: #ffffff;
  margin-left: 10rpx;
}

.item-img image {
  width: 100%;
}

/* 商品介绍 */
.introduce-section {
  background: #ffffff;
  padding: 20rpx 30rpx;
  border-radius: 0 0 08px 8px;
  margin-top: -80rpx;
  height: 110rpx;
}

.introduce-section .title {
  font-size: 32rpx;
  color: #303133;
  height: 50rpx;
  line-height: 50rpx;
  margin-left: -20rpx;
}

.introduce-section .tags-box {
  display: flex;
  align-items: center;
  height: 30rpx;
  font-size: 24rpx;
  margin-left: -20rpx;
  color: #909399;
}
.good-price {
  position: relative;
  margin-top: 70rpx;
  color: #fa5151;
  font-size: 28rpx;
  margin-left: -20rpx;
}
.preview-img {
  margin-left: 100rpx;
  display: block;
  margin-top: -48rpx;
  position: relative;
  z-index: 10;
}
.pre-text {
  float: right;
  margin-top: -36rpx;
  font-size: 11px;
  font-weight: normal;
  line-height: 14px;
  color: #ffffff;
  position: relative;
  left: -60rpx;
  z-index: 999;
  top: -60rpx;
}
.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;
}
img.add {
  position: relative;
  left: 200rpx;
  top: 30rpx;
}
</style>
