<template>
  <view>
    <view class="container">
      <Search
        background="rgba(255, 255, 255, 0.8)"
        backIcon="black"
        iconSrc="/static/assets/return.png"
        placeholderText="请输入要搜索的内容"
      ></Search>
      <view>
        <img class="img1" src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" />
        <img class="img2" src="/static/assets/bottom.png" style="width: 750rpx; height: 32rpx" />
        <img class="img3" src="/static/assets/right.png" style="width: 288rpx; height: 124rpx" />
      </view>
      <view class="sort">
        <view style="display: flex; flex-direction: row">
          <view class="borderClass" @tap="toBuilding">
            <img src="/static/assets/buildingAgriculture.png" style="width: 96rpx; height: 96rpx" />
            <view class="sort-text">筑农严选</view>
          </view>
          <view class="borderClass">
            <img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
            <view class="sort-text">认养农业</view>
          </view>
          <view class="borderClass" @tap="toRuralTravel">
            <img src="/static/assets/rural.png" style="width: 96rpx; height: 96rpx" />
            <view class="sort-text">乡村旅居</view>
          </view>
          <view class="borderClass">
            <img src="/static/assets/buildingAgriculture.png" style="width: 96rpx; height: 96rpx" />
            <view class="sort-text">特色农庄</view>
          </view>
        </view>
        <!--        <view style="display: flex; flex-direction: row">-->
        <!--          <view-->
        <!--            class="borderClass"-->
        <!--            @tap="toBuilding"-->
        <!--            v-for="(item, index) in sortList"-->
        <!--            :key="index"-->
        <!--          >-->
        <!--            <img :src="item.img" style="width: 96rpx; height: 96rpx" />-->
        <!--            <view class="sort-text">{{ item.text }}</view>-->
        <!--          </view>-->
        <!--        </view>-->
      </view>
      <view class="product-page">
        <view>
          <view class="page-title">特色美食</view>
          <img src="/static/assets/mainPicture.png" class="main-img" />
          <view style="display: flex; flex-direction: row">
            <view class="detail-border">
              <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
              <view class="detail-title">干辣椒炒肉</view>
              <view class="jiage-page">
                <text class="jiage">￥25</text>
                /份
              </view>
              <view class="yushou">预售</view>
            </view>
            <view class="detail-border">
              <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
              <view class="detail-title">贵阳辣子鸡</view>
              <view class="jiage-page">
                <text class="jiage">￥25</text>
                /份
              </view>
              <view class="yushou">预售</view>
            </view>
            <view class="detail-border">
              <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
              <view class="detail-title">麻辣鱼豆腐</view>
              <view class="jiage-page">
                <text class="jiage">￥25</text>
                /份
              </view>
              <view class="yushou">预售</view>
            </view>
          </view>
        </view>
      </view>
      <view class="product-page" @tap="toDetail">
        <view>
          <view class="page-title">农货预售</view>
          <img src="/static/assets/img4.png" class="main-img" />
          <view style="display: flex; flex-direction: row">
            <view class="detail-border">
              <img src="/static/assets/img1.png" style="width: 216rpx; height: 176rpx" />
              <view class="detail-title">这是农村种的土豆</view>
              <view class="jiage-page">
                <text class="jiage">￥25</text>
                /份
              </view>
              <view class="yushou">预售</view>
            </view>
            <view class="detail-border">
              <img src="/static/assets/img2.png" style="width: 216rpx; height: 176rpx" />
              <view class="detail-title">这是农村玉米</view>
              <view class="jiage-page">
                <text class="jiage">￥25</text>
                /份
              </view>
              <view class="yushou">预售</view>
            </view>
            <view class="detail-border">
              <img src="/static/assets/img3.png" style="width: 216rpx; height: 176rpx" />
              <view class="detail-title">这是农村中的猕猴桃</view>
              <view class="jiage-page">
                <text class="jiage">￥25</text>
                /份
              </view>
              <view class="yushou">预售</view>
            </view>
          </view>
        </view>
      </view>
      <view class="product-page" v-for="(item, index) in list" :key="index">
        <view>
          <view class="page-title">{{ item.text }}</view>
          <img :src="item.img" class="main-img" />
          <view style="display: flex; flex-direction: row">
            <view class="detail-border" v-for="(item, index) in detailList" :key="index">
              <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
              <view class="detail-title">{{ item.text }}</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/index/Search.vue';

const list = 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: '特色农庄' },
]);
const detailList = ref([
  { img: '/static/assets/detailedMapOne.png', price: '25', text: '干辣椒炒肉干辣椒炒肉' },
  { img: '/static/assets/detailedMapTwo.png', price: '25', text: '贵阳辣子鸡' },
  { img: '/static/assets/detailedMapThree.png', price: '25', text: '麻辣鱼豆腐' },
]);
const sortList = ref([
  { img: '/static/assets/buildingAgriculture.png', price: '25', text: '筑农严选' },
  { img: '/static/assets/adoption.png', price: '25', text: '认养农业' },
  { img: '/static/assets/rural.png', price: '25', text: '乡村旅居' },
  { img: '/static/assets/buildingAgriculture.png', price: '25', text: '特色农庄' },
]);
function toBuilding() {
  // TODO: 跳转到筑农严选
  xma.navigateTo({
    url: '/pages/index/building',
  });
}
function toRuralTravel() {
  // TODO: 跳转到乡村旅居
  xma.navigateTo({
    url: '/pages/RuralTravel/RuralTravel',
  });
}
// 跳转详情页
function toDetail() {
  // TODO: 跳转到详情页
  xma.navigateTo({
    url: '/pages/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;
}
.img2 {
  display: flex;
  margin-top: -31rpx;
}
.img3 {
  display: flex;
  margin-top: -120rpx;
  margin-left: 462rpx;
}
.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 {
  width: 96rpx;
  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>
