<template>
  <view>
    <view class="container">
      <Search
        background="rgba(255, 255, 255, 0.8)"
        backIcon="black"
        iconSrc="/static/assistingAgriculture/assets/return.png"
        placeholderText="请输入要搜索的内容"
      ></Search>
      <view>
        <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"
            @click="toBuilding(item)"
            v-for="(item, index) in sortList"
            :key="index"
          >
            <img :src="item.icon" style="width: 96rpx; height: 96rpx" />
            <view class="sort-text">{{ item.categoryName }}</view>
          </view>
        </view>
      </view>
      <view class="product-page" v-for="(item, index) in list" :key="index" @click="toDetail">
        <view>
          <view class="page-title">{{ item.categoryName }}</view>
          <img :src="item.img" class="main-img" />
          <view style="display: flex; flex-direction: row">
            <view
              class="detail-border"
              v-for="(item, index) in item.commodityList"
              :key="index"
              @click="toDetail"
            >
              <img :src="item.commodityImg" style="width: 216rpx; height: 176rpx" />
              <view class="detail-title">{{ item.prodName }}</view>
              <view class="jiage-page">
                <text class="jiage">￥{{ item.price }}</text>
                /份
              </view>
              <view class="yushou">预售</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Search from '../../../components/assistingAgriculture/index/Search.vue';
import {
  getPresaleCategory,
  getPresaleList,
  getSortList,
} from '../../../api/assistingAgriculture/building';
import { onMounted, ref } from 'vue';
import { groupImgList } from '@/api';
const list = ref([]);
const sortList = ref([]);
const swiperList = ref([]);
const current = ref(0);
// 轮播图数据
let lunboData;
const detailList = ref([
  {
    img: '/static/assistingAgriculture/assets/detailedMapOne.png',
    price: '25',
    text: '干辣椒炒肉干辣椒炒肉',
  },
  {
    img: '/static/assistingAgriculture/assets/detailedMapTwo.png',
    price: '25',
    text: '贵阳辣子鸡',
  },
  {
    img: '/static/assistingAgriculture/assets/detailedMapThree.png',
    price: '25',
    text: '麻辣鱼豆腐',
  },
]);
onMounted(async () => {
  getList();
  getPresaleCategoryList();
  getPresale();
});
// 获取筑农专区分类;
const getList = () => {
  getSortList().then((res) => {
    res.data.forEach((item) => {
      item.icon = import.meta.env.VITE_APP_IMG_URL + item.pic;
    });
    sortList.value = res.data.splice(0, 4);
  });
};
// 筑农严选首页-分类预售商品列表
const getPresaleCategoryList = () => {
  getPresaleCategory().then((res) => {
    res.data.forEach((item) => {
      item.img = import.meta.env.VITE_APP_IMG_URL + item.pic;
      item.commodityList = item.prodSimples;
      item.commodityList.forEach((item) => {
        item.commodityImg = import.meta.env.VITE_APP_IMG_URL + item.pic;
      });
    });
    list.value = res.data;
  });
};
// 预售板块轮播图
const getPresale = () => {
  getPresaleList({ place: 'index_top' }).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 onChange = (e) => {
  // console.log(e);
};
const toBuilding = (item) => {
  if (item.categoryName === '筑农严选') {
    // 跳转到筑农严选
    xma.navigateTo({
      url: `/pages/assistingAgriculture/index/building?categoryId=${item.categoryId}`,
    });
  } else if (item.categoryName === '乡村旅居') {
    // 跳转到乡村旅居
    xma.navigateTo({
      url: `/pages/assistingAgriculture/RuralTravel/RuralTravel?categoryId=${item.categoryId}`,
    });
  } else {
    console.log(222);
  }
};
// 跳转详情页
function toDetail() {
  // TODO: 跳转到详情页
  xma.navigateTo({
    url: '/pages/assistingAgriculture/detail/detail',
  });
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f3f3f3;
}
.container {
  position: relative;
  left: 0rpx;
  top: 0rpx;
  width: 750rpx;
  height: 440rpx;
  opacity: 1;
}
.img1 {
  display: flex;
}
.bottom-image {
  position: relative;
  top: -40rpx;
  width: 750rpx;
  height: 32rpx;
  opacity: 1;
}
.right-image {
  top: -192rpx;
  float: right;
  position: relative;
}
.sort {
  width: 750rpx;
  height: 186rpx;
  background: linear-gradient(180deg, #82ce8b -39%, #ffffff 36%);
}
.borderClass {
  width: 96rpx;
  height: 96rpx;
  margin-left: 75rpx;
  margin-top: 22rpx;
}
.sort-text {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 24rpx;
  text-align: center;
  letter-spacing: 0em;
  color: #3d3d3d;
}
.product-page {
  width: 710rpx;
  height: 742rpx;
  border-radius: 16rpx;
  margin-left: 20rpx;
  margin-top: 10rpx;
  background-color: #ffffff;
}
.page-title {
  width: 112rpx;
  height: 28rpx;
  font-family: Source Han Sans;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 28rpx;
  text-align: center;
  letter-spacing: 0em;
  position: absolute;
  margin-top: 20rpx;
  margin-left: 20rpx;
  color: #3d3d3d;
}
.main-img {
  width: 670rpx;
  height: 362rpx;
  border-radius: 16rpx;
  margin-top: 68rpx;
  margin-left: 20rpx;
}
.detail-border {
  width: 216rpx;
  height: 262rpx;
  margin-left: 20rpx;
  margin-top: 20rpx;
  border-radius: 16px;
}
.detail-title {
  font-family: Source Han Sans;
  font-size: 24rpx;
  font-weight: 500;
  line-height: 28rpx;
  letter-spacing: 0em;
  margin-left: 30rpx;
  color: #3d3d3d;
  width: 190rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jiage-page {
  height: 28rpx;
  margin-top: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #abaaaa;
}
.jiage {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 28rpx;
  color: #fa5151;
}
.yushou {
  width: 48rpx;
  height: 24rpx;
  border-radius: 2px;
  font-size: 16rpx;
  line-height: 16rpx;
  background: #fcdbdb;
  text-align: center;
  line-height: 24rpx;
  margin-left: 120rpx;
  margin-top: -23rpx;
  color: #fa5151;
}
::v-deep .icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 40rpx;
}
</style>
