<template>
  <view class="container">
    <view class="top">
      <Search
        background="rgba(255, 255, 255, 0.8)"
        backIcon="black"
        iconSrc="/static/assets/left.png"
        placeholderText="输入商品名称"
      ></Search>
    </view>
    <view class="nav">
      <wd-swiper
        class="main-img"
        :list="swiperList"
        autoplay
        v-model:current="current"
        @click="handleClick"
        @change="onChange"
        height="188"
      ></wd-swiper>
    </view>
    <view class="sort">
      <view style="display: flex; flex-direction: row">
        <view class="borderClass" @tap="toPresale" v-for="(item, index) in sortList" :key="index">
          <img :src="item.img" style="width: 48rpx; height: 48rpx" />
          <view class="sort-text">{{ item.text }}</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.text }}
          </text>
        </scroll-view>
      </view>
      <view class="tab-list" v-for="(item, index) in buyList" :key="index">
        <img class="buy-list" :src="item.img" style="width: 670rpx; height: 670rpx" />
        <view>
          <text class="retail-price">零售价：￥{{ item.price }}/盒</text>
          <text class="presale-price">预售价：￥{{ item.price }}/盒</text>
        </view>
        <view>
          <img
            class="buy-img"
            src="/static/presale/img6.png"
            style="
              position: sticky;
              width: 284rpx;
              height: 128rpx;
              float: right;
              margin-top: -98rpx;
              margin-right: 30rpx;
            "
          />
        </view>
      </view>
    </view>
    <view class="waterfall">
      <view class="wt-left wt-list">
        <view
          class="wt-item"
          v-for="(good, index) in LeftList"
          :key="index"
          @click="ToDetail(good.id)"
        >
          <view class="item-img">
            <image :src="good.image" mode="widthFix"></image>
            <image
              class="presale-img"
              src="/static/presale/presale.png"
              style="
                width: 132rpx;
                height: 64rpx;
                z-index: 10;
                margin-left: 18rpx;
                top: -70rpx;
                left: -14rpx;
              "
            />
            <image
              class="preview-img"
              src="/static/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.name }}</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>
            </view>
          </view>
        </view>
      </view>

      <view class="vt-right wt-list">
        <view
          class="wt-item"
          v-for="(good, index) in RightList"
          :key="index"
          @click="ToDetail(good.id)"
        >
          <view class="item-img">
            <image :src="good.image" mode="widthFix"></image>
            <image
              class="presale-img"
              src="/static/presale/presale.png"
              style="width: 132rpx; height: 64rpx; z-index: 10; top: -70rpx"
            />
            <image
              class="preview-img"
              src="/static/presale/preview.png"
              style="width: 264rpx; height: 40rpx; z-index: 9; top: -66rpx"
            />
            <text class="pre-text">预计9月15日发货</text>
          </view>
          <!-- 介绍部分 -->
          <view class="introduce-section">
            <text class="title">{{ good.name }}</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>
            </view>
          </view>
        </view>
      </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>
</template>

<script setup>
import Search from '../../components/index/Search.vue';
import { ref } from 'vue';
const current = ref(0);
const light = ref(0);
const sortList = ref([
  { img: '/static/presale/bacImg.png', price: '25', text: '应季好物' },
  { img: '/static/presale/img2.png', price: '25', text: '猪肉蛋禽' },
  { img: '/static/presale/img3.png', price: '25', text: '米面粮油' },
  { img: '/static/presale/img4.png', price: '25', text: '预选蔬菜' },
  { img: '/static/presale/img5.png', price: '25', text: '心选水果' },
]);
const swiperList = ref([
  '../../static/presale/img.png',
  '../../static/presale/img.png',
  '../../static/presale/img.png',
]);
const tabsData = ref([
  { img: '/static/assets/mainPicture.png', text: '全部' },
  { img: '/static/assets/presale.png', text: '分类1' },
  { img: '/static/assets/presale.png', text: '分类2' },
  { img: '/static/assets/presale.png', text: '分类3' },
  { img: '/static/assets/presale.png', text: '分类4' },
  { img: '/static/assets/presale.png', text: '分类5' },
  { img: '/static/assets/presale.png', text: '分类6' },
  { img: '/static/assets/presale.png', text: '分类7' },
  { img: '/static/assets/presale.png', text: '分类8' },
]);
const buyList = ref([
  { img: '/static/presale/buy.png', price: '29.9', text: '应季好物' },
  { img: '/static/presale/buy.png', price: '29.9', text: '猪肉蛋禽' },
  { img: '/static/presale/buy.png', price: '29.9', text: '米面粮油' },
]);
const shopList = ref([
  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
  { img: '/static/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/presale/buy.png',
    introduction: '商品简介商品简介',
    price: 69.9,
  },
  {
    id: 2,
    name: '商品二',
    image: '/static/presale/img7.png',
    introduction: '商品简介商品简介',
    price: 69.9,
  },
  {
    id: 3,
    name: '商品三',
    image: '/static/assets/fruit.png',
    introduction: '商品简介商品简介',
    price: 69.9,
  },
  {
    id: 4,
    name: '商品四',
    image: '/static/presale/buy.png',
    introduction: '商品简介商品简介',
    price: 69.9,
  },
  {
    id: 5,
    name: '商品五',
    image: '/static/presale/buy.png',
    introduction: '商品简介商品简介',
    price: 69.9,
  },
]);
// 左侧数据列表
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);
}
const choice = (index) => {
  light.value = index;
};
function toCart() {
  // TODO: 跳转到筑农严选
  xma.navigateTo({
    url: '/pages/cart/cart',
  });
}
function toDetail() {
  // TODO: 跳转到筑农严选
  xma.navigateTo({
    url: '/pages/detail/detail',
  });
}
</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 {
  left: 20rpx;
  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;
  justify-content: center;
  overflow: hidden;
  margin-top: 10rpx;
  margin-left: 30rpx;
}

.wt-list {
  width: 360rpx;
  display: flex;
  flex-direction: column;
  margin-right: 10rpx;
}

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

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

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

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

.introduce-section .tags-box {
  display: flex;
  align-items: center;
  height: 30rpx;
  font-size: 24rpx;
  color: #909399;
}
.good-price {
  position: relative;
  margin-top: 70rpx;
  margin-left: -200rpx;
  color: #fa5151;
  font-size: 28rpx;
}
.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;
}
</style>
