<template>
  <view class="container">
    <!--    顶部搜索框-->
    <view class="top">
      <view class="top">
        <Search
          background="rgba(255, 255, 255, 0.8)"
          backIcon="black"
          iconSrc="/static/assets/blackLeft.png"
          placeholderText="请输入要搜索的内容"
        ></Search>
      </view>
    </view>
    <!--    图片-->
    <view class="nav">
      <img class="main-img" src="/static/detail/img2.png" style="width: 750rpx; height: 668rpx" />
      <view class="pre-icon">
        <img
          class="left-icon"
          src="/static/detail/img4.png"
          style="width: 248rpx; height: 100rpx; position: relative"
        />
        <img
          class="right-icon"
          src="/static/detail/img3.png"
          style="width: 546rpx; height: 62rpx"
        />
      </view>
      <view class="pre-text">
        <text class="left-text">预售</text>
        <text class="right-text">预计9月15日发货</text>
      </view>
    </view>
    <!--详情-->
    <view class="detail">
      <view class="detail-title">筑农散养虫子土鸡(未下蛋小母鸡)1.5kg</view>
      <view class="detail-int">
        这是商品简介这是商品简介这是商品简介这是商品简介这是商品 简介这是商品简介这是商品简介
      </view>
      <view>
        <img class="share-img" src="/static/detail/share.png" />
        <text class="share-text" @click="share">分享</text>
      </view>
    </view>
    <view class="evaluate">
      <view class="evaluate-num">
        <text class="env">评价（0）</text>
        <text class="num">好评率（100%）</text>
        <wd-icon name="arrow-right" size="32rpx" style="margin-top: 2rpx"></wd-icon>
      </view>
    </view>
    <!--    详情图-->
    <view class="detail-info">
      <text class="info-title">详情</text>
      <img class="info-img" src="/static/detail/detail-img.png" />
      <img class="info-img" src="/static/detail/detail-img.png" />
    </view>
    <!--    底部-->
    <view class="detail-bottom">
      <view class="sort">
        <view class="bottom" style="display: flex; flex-direction: row">
          <view class="borderClass" @tap="toStore">
            <img src="/static/detail/img7.png" style="width: 40rpx; height: 40rpx" />
            <view class="sort-text">店铺</view>
          </view>
          <view class="borderClass">
            <img src="/static/detail/img8.png" style="width: 40rpx; height: 40rpx" />
            <view class="sort-text">客服</view>
          </view>
          <view class="borderClass" @tap="toCart">
            <wd-badge modelValue="4">
              <img src="/static/detail/car.png" style="width: 40rpx; height: 40rpx" />
            </wd-badge>
            <view class="sort-text">购物车</view>
          </view>
        </view>
        <!--      <view class="sort">-->
        <!--        <view class="bottom" style="display: flex; flex-direction: row">-->
        <!--          <view class="borderClass" v-for="(item, index) in storeList" :key="index">-->
        <!--            <img :src="item.img" style="width: 40rpx; height: 40rpx" />-->
        <!--            <view class="sort-text">{{ item.text }}</view>-->
        <!--          </view>-->
        <!--        </view>-->
        <view class="btn">
          <wd-button type="warning" size="small" style="margin-right: 10rpx">加入购物车</wd-button>
          <wd-button type="error" size="small">立即购买</wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import Search from '../../components/index/Search.vue';
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';

// 图片
const swiperList = ref([
  '../../static/detail/img2.png',
  '../../static/detail/img2.png',
  '../../static/detail/img2.png',
]);
// 底部
const storeList = ref([
  { img: '/static/detail/img7.png', text: '店铺' },
  { img: '/static/detail/img8.png', text: '客服' },
  { img: '/static/detail/img6.png', text: '购物车' },
]);
// 进入页面回到顶部
onShow(() => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300,
  });
});
const share = () => {
  alert('分享功能已触发！');
};
function toStore() {
  // TODO: 跳转到筑农严选
  xma.navigateTo({
    url: '/pages/shop/index',
  });
}
function toCart() {
  // TODO: 跳转到购物车
  xma.navigateTo({
    url: '/pages/cart/cart',
  });
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  left: 0rpx;
  top: -45rpx;
  opacity: 1;
}
.top {
  width: 750rpx;
  height: 128rpx;
  margin-top: 40rpx;
  background: #ffffff;
}
.nav {
  width: 750rpx;
}
.pre-icon {
  display: flex;
  margin-top: -108rpx;
}
.right-icon {
  margin-left: -20px;
  margin-top: 19px;
}
.left-text {
  position: relative;
  width: 80rpx;
  height: 48rpx;
  font-family: Source Han Sans;
  font-size: 40rpx;
  font-weight: 500;
  line-height: 48rpx;
  letter-spacing: 0em;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #ffffff;
  margin-left: 80rpx;
  margin-top: -70rpx;
  display: block;
}
.right-text {
  left: -60rpx;
  position: relative;
  width: 300rpx;
  height: 48rpx;
  font-family: Source Han Sans;
  font-size: 28rpx;
  font-weight: normal;
  line-height: 28rpx;
  letter-spacing: 0em;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #ffffff;
  float: right;
  margin-top: -30rpx;
}
.detail {
  width: 750rpx;
  height: 178rpx;
  border-radius: 16rpx;
  background: #ffffff;
  position: relative;
  top: 10px;
}
.detail-title {
  width: 277 * 2rpx;
  height: 32rpx;
  font-family: Source Han Sans;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 32rpx;
  letter-spacing: 0em;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
  padding-top: 20rpx;
  padding-left: 20rpx;
}
.detail-int {
  width: 336 * 2rpx;
  height: 64rpx;
  font-family: Source Han Sans;
  font-size: 24rpx;
  font-weight: normal;
  line-height: 32rpx;
  letter-spacing: 0em;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #abaaaa;
  padding-top: 10rpx;
  padding-left: 20rpx;
}
.share-img {
  float: right;
  margin-right: 80rpx;
  width: 28rpx;
  height: 28rpx;
}
.share-text {
  float: right;
  width: 44rpx;
  height: 22rpx;
  font-family: Source Han Sans;
  font-size: 22rpx;
  font-weight: bold;
  line-height: 22rpx;
  letter-spacing: 0em;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
  margin-right: -80rpx;
  margin-top: 2rpx;
}
.evaluate {
  width: 750rpx;
  height: 88rpx;
  border-radius: 16rpx;
  background: #ffffff;
  margin-top: 30rpx;
}
.evaluate {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.evaluate-num {
  flex-direction: column;
  align-items: center;
}
.env {
  width: 148rpx;
  height: 32rpx;
  font-family: Source Han Sans;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 32rpx;
  letter-spacing: 0em;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
  margin-left: 20rpx;
}
.num {
  width: 200rpx;
  height: 32rpx;
  font-family: Source Han Sans;
  font-size: 24rpx;
  font-weight: normal;
  line-height: 32rpx;
  letter-spacing: 0em;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
  margin-left: 340rpx;
}
.wd-icon {
  position: relative;
  top: 4rpx;
}
.detail-info {
  width: 750rpx;
  height: 1168px;
  border-radius: 16rpx;
  background: #ffffff;
  margin-top: 20rpx;
  position: relative;
  z-index: 9;
}
.info-title {
  width: 64rpx;
  height: 32rpx;
  font-family: Source Han Sans;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 32rpx;
  letter-spacing: 0em;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
  position: relative;
  top: 20rpx;
  left: 20rpx;
}
.info-img {
  width: 710rpx;
  height: 1168rpx;
  border-radius: 16rpx;
  position: relative;
  margin-top: 40rpx;
  margin-left: 20rpx;
}
.detail-bottom {
  width: 750rpx;
  height: 216rpx;
  border-radius: 16rpx 16px 0rpx 0rpx;
  background: #ffffff;
  box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(0, 0, 0, 0.12);
  z-index: 10;
  position: fixed;
  top: 88%;
}
.sort {
  width: 750rpx;
  height: 186rpx;
}
.borderClass {
  width: 96rpx;
  height: 96rpx;
  margin-top: 40rpx;
  margin-left: 40rpx;
}
.sort-text {
  font-size: 22rpx;
  font-weight: 500;
  line-height: 24rpx;
  text-align: center;
  letter-spacing: 0em;
  color: #3d3d3d;
  width: 176rpx;
  margin-left: -70rpx;
}
.btn {
  margin-top: -90rpx;
  margin-left: 400rpx;
}
::v-deep.icon {
  width: 56rpx;
  height: 56rpx;
}
</style>
