<template>
  <view class="container">
    <!--    顶部搜索框-->
    <view class="top">
      <view class="top">
        <Search
          background="rgba(255, 255, 255, 0.8)"
          backIcon="black"
          iconSrc="/static/assistingAgriculture/assets/blackLeft.png"
          placeholderText="请输入要搜索的内容"
        ></Search>
      </view>
    </view>
    <!--    图片-->
    <view class="nav">
      <wd-swiper
        :list="dataDetails.prod.imgs"
        autoplay
        :indicator="{ type: 'fraction' }"
        indicatorPosition="bottom-right"
        @click="handleClick"
        @change="onChange"
        height="512rpx"
      ></wd-swiper>
    </view>
    <!--详情-->
    <view class="detail">
      <view class="detail-title">{{ dataDetails.prod.prodName }}</view>
      <view class="detail-int">
        {{ dataDetails.prodPresale.memo }}
      </view>
      <!-- <view>
        <img class="share-img" src="/static/assistingAgriculture/detail/share.png" />
        <text class="share-text" @click="share">分享</text>
      </view> -->
    </view>
    <view class="evaluate">
      <view class="evaluate-num">
        <text class="env">评价（{{ commentData.count }}）</text>
        <text class="num">好评率（{{ commentData.high }} %）</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/assistingAgriculture/detail/detail-img.png" />
      <img class="info-img" src="/static/assistingAgriculture/detail/detail-img.png" /> -->
      <view class="content">
        <rich-text class="desc" :nodes="dataDetails.prod.content"></rich-text>
      </view>
    </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/assistingAgriculture/detail/img7.png"
              style="width: 40rpx; height: 40rpx"
            />
            <view class="sort-text">店铺</view>
          </view>
          <!-- <view class="borderClass">
            <img
              src="/static/assistingAgriculture/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/assistingAgriculture/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 @tap="addOrderFn" type="warning" size="small" style="margin-right: 10rpx">
            加入购物车
          </wd-button>
          <wd-button type="error" size="small" @tap="toSettle">立即购买</wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import Search from '../../../components/assistingAgriculture/index/Search.vue';
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import {
  getProdDetail,
  getEvalNumber,
  addOrder,
  getCollect,
  getCouponShopList,
  receiveCoupon,
} from '@/api/packageDetail';
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
// 图片
const swiperList = ref([
  '../../static/assistingAgriculture/detail/img2.png',
  '../../static/assistingAgriculture/detail/img2.png',
  '../../static/assistingAgriculture/detail/img2.png',
]);
const swiperList2 = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
]);
// 底部
const storeList = ref([
  { img: '/static/assistingAgriculture/detail/img7.png', text: '店铺' },
  { img: '/static/assistingAgriculture/detail/img8.png', text: '客服' },
  { img: '/static/assistingAgriculture/detail/img6.png', text: '购物车' },
]);
let prodId;
const dataDetails = ref({});
const commentData = ref({});
onLoad((options) => {
  prodId = '43834';
  getProdDetailFn();
  getEvalNumberFn();
});
function handleClick(e) {
  console.log(e);
}
function onChange(e) {
  console.log(e);
}
// 获取商品详情
const getProdDetailFn = () => {
  getProdDetail(prodId).then((res) => {
    res.data.data.prod.imgs = res.data.data.prod.imgs
      .split(',')
      .map((item) => {
        if (item !== '') {
          item = imgUrl + item;
        }
        return item;
      })
      .filter((item) => {
        return item !== '';
      });
    dataDetails.value = res.data.data;
    console.log('打印', dataDetails.value);
  });
};
// 获取商品评价数量
const getEvalNumberFn = () => {
  getEvalNumber({ prodId }).then((res) => {
    console.log('评价数量', res);
    commentData.value = res.data;
  });
};
// 加入购物车
const addOrderFn = () => {
  const orderParams = {
    shopId: dataDetails.value.prod.prodId,
    prodId: dataDetails.value.prodParameters.prodId,
    skuId: dataDetails.value.skus[0].skuId,
    shopType: 3,
    basketCount: 1,
  };
  addOrder(orderParams).then((res) => {
    console.log('加入购物车', res);
  });
};
// 进入页面回到顶部
onShow(() => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300,
  });
});
const share = () => {
  alert('分享功能已触发！');
};
function toStore() {
  // TODO: 跳转到筑农严选
  xma.navigateTo({
    url: '/pages/assistingAgriculture/shop/index',
  });
}
function toCart() {
  // TODO: 跳转到购物车
  xma.navigateTo({
    url: '/pages/assistingAgriculture/cart/cart',
  });
}
function toSettle() {
  // TODO: 跳转到结算页面
  xma.navigateTo({
    url: '/pages/assistingAgriculture/cart/ConfirmOrder',
  });
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f3f3f3;
}
.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;
  border-radius: 16rpx;
  background: #ffffff;
  margin-top: 20rpx;
  position: relative;
  z-index: 9;
  top: -8rpx;
  padding-bottom: 120rpx;
  .content {
    .desc {
      img {
        width: 100%;
      }
    }
  }
}
.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;
  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>
