<template>
  <!-- 商品详情 -->
  <view>
    <u-navbar bgColor="transparent" :autoBack="true">
      <template #left>
        <view class="u-nav-slot">
          <image src="/static/indexIc/back.png" mode=""></image>
        </view>
      </template>
    </u-navbar>
    <!-- 轮播图 -->
    <view class="swiperBox">
      <u-swiper height="375" :list="swiperList" @change="e => (currentNum = e.current)" :autoplay="false" indicatorStyle="right: 20px">
        <template #indicator>
          <view class="indicator-num" v-if="shopType != 3">
            <text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
          </view>
        </template>
      </u-swiper>
    </view>
    <!-- 商品信息 -->
    <view class="info">
      <shopInfo :info="detaileList"></shopInfo>
    </view>
    <view class="line"></view>
    <view class="mainBox">
      <!-- 1=普通商品,2=特价商品,3=积分商品 -->
      <view v-if="shopType == 1">
        <view class="commentNmu flexJ">
          <text>评论({{ commentList.length }})</text>
          <view class="see flexA" v-if="commentList.length > 0" @click="seeAll">
            查看全部
            <image src="/static/indexIc/orangeRight.png" mode=""></image>
          </view>
        </view>
        <view v-if="commentList.length">
          <comment :commentList="commentList"></comment>
        </view>
        <!-- 暂无评论 -->
        <view class="commentNull flexV" v-else>
          <image src="/static/indexIc/cpmmentNull.png" mode=""></image>
          暂无评论
        </view>
      </view>
      <view v-if="shopType !== 3">
        <view class="line"></view>
        <view class="titles">商品详情</view>
        <u-parse :content="detaileList.content"></u-parse>
        <!-- <rich-text :nodes="detaileList.content"></rich-text> -->
      </view>
    </view>
    <view class="lineBox flexC" v-if="shopType == 3">
      <view class="lines"></view>
      <text>商品详情</text>
      <view class="lines"></view>
    </view>
    <view class="" style="height: 300rpx"></view>
    <!-- 底部按钮 -->
    <view class="btnBox iosAuto flexJ">
      <view class="left flexA">
        <view class="leftIc flexV" v-for="(item, index) in icList" :key="item.id" @click="btns(index)">
          <view class="images">
            <image :src="item.icon" mode=""></image>
            <u-badge :absolute="true" v-if="index == 2" :offset="[-6, -6]" color="#fff" bgColor="#F63D3A" max="99" :value="value"></u-badge>
          </view>
          <text>{{ item.name }}</text>
          <button open-type="contact" v-if="index === 1"></button>
        </view>
      </view>
      <view class="flexA" v-if="shopType != 3">
        <view class="add flexC" @click="toOrder(0)">加入购物车</view>
        <view class="buy flexC" @click="toOrder(1)">立即购买</view>
      </view>
      <view v-else class="exchange flexC" @click="toOrder(3)">我要兑换</view>
    </view>
    <popPay :moreSpec="moreSpec" :shopDetail="detaileList" @close="payPopShow = false" :shopType="shopType" :btnType="btnType" :payPopShow="payPopShow"></popPay>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad, onHide } from '@dcloudio/uni-app'
import shopInfo from '@/componets/shopInfo.vue'
import comment from '@/componets/comment.vue'
import popPay from '@/componets/popPay.vue'
import { getShopDetaile } from '@/api/'
onLoad(e => {
  console.log('商品id', e.id)
  getShopDetailes(e.id)
})
onHide(() => {
  payPopShow.value = false
})
const currentNum = ref(0)
const list6 = reactive(['https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png'])
const icList = reactive([
  { id: 1, name: '店铺', icon: '/static/indexIc/shopIc.png' },
  { id: 2, name: '客服', icon: '/static/indexIc/service.png' },
  { id: 3, name: '购物车', icon: '/static/tabbarsIc/shopCar.png' }
])
const value = ref('1') // 购物车徽章数
//查看全部评论
const seeAll = () => {
  uni.navigateTo({ url: `/pages/index/allComment?allCommentList=${allCommentList.value}` })
}
let btnType = ref(0) //按钮状态 0加入购物车 1立即购买
let payPopShow = ref(false) //按钮状态 0加入购物车 1立即购买
// 立即购买
const toOrder = type => {
  // if( type==3 ) return uni.navigateTo({url:`/pages/shopCar/confirmOrder?shopType=${shopType.value}`})
  btnType.value = type
  payPopShow.value = true
}
// 底部按钮
const btns = index => {
  switch (index) {
    case 0:
      console.log('店铺')
      uni.switchTab({ url: '/pages/index/index' })
      break
    case 2:
      console.log('购物车')
      uni.switchTab({ url: '/pages/shopCar/shopCar' })
      break
    default:
      break
  }
}
let detaileList = ref({}) //商品详情
let specList = ref({}) //默认规格第一项
let swiperList = ref([]) //轮播图
let commentList = ref([]) //评论
let moreSpec = ref({}) //多规格
let shopType = ref(1) //商品类型
const allCommentList = ref('')
// 获取详情
const getShopDetailes = async id => {
  try {
    const res = await getShopDetaile(id)
    detaileList.value = res.detail //详情
    specList.value = res.detail.spec[0] //默认规格第一项
    swiperList.value = res.detail.images //轮播图
    allCommentList.value = JSON.stringify(res.pinglun) // 跳转显示全部评论
    commentList.value = res.pinglun.splice(0, 1) //评论
    moreSpec.value = res.specData //多规格
    shopType.value = res.detail.goodstatus //商品类型
    value.value = res.cartNum
    // console.log('评论数据', commentList.value)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('', err)
  }
}
</script>

<style lang="scss">
.u-nav-slot {
  image {
    width: 48rpx;
    height: 48rpx;
  }
}
.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #ffffff;
    font-size: 12px;
  }
}

.swiperBox {
  margin-bottom: 32rpx;
}
.info {
  width: 702rpx;
  margin: 0 auto;
}
.line {
  width: 100%;
  height: 6rpx;
  opacity: 1;
  background: #f7f8faff;
  margin: 32rpx 0;
}
.mainBox {
  padding: 0 24rpx;

  .commentNmu {
    margin-bottom: 40rpx;
    text {
      color: #1a1a1aff;
      font-size: 28rpx;
      font-weight: 700;
    }

    .see {
      color: #ff7534ff;
      font-size: 24rpx;

      image {
        margin-left: 2rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .commentNull {
    color: #00000066;
    font-size: 26rpx;
    margin-bottom: 212rpx;

    image {
      width: 348rpx;
      height: 240rpx;
      margin-bottom: 16rpx;
    }
  }
}
.titles {
  color: #1a1a1aff;
  font-size: 28rpx;
  font-weight: 700;
}

.lineBox {
  margin: 24rpx 0 30rpx;

  .lines {
    width: 149rpx;
    height: 1rpx;
    opacity: 1;
    border: 0 solid #979797ff;
    background: #dcdee0ff;
  }

  text {
    margin: 0 24rpx;
    color: #969799ff;
    font-size: 24rpx;
  }
}

.btnBox {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120rpx;
  background: #ffffffff;

  .left {
    margin-left: 32rpx;

    .leftIc {
      margin-right: 34rpx;
      position: relative;

      .images {
        position: relative;
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 8rpx;

        image {
          width: 48rpx;
          height: 48rpx;
        }
      }

      text {
        color: #323233ff;
        font-size: 20rpx;
      }

      button {
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        background: transparent;
        /* width: 48rpx;
        height: 48rpx; */
        font-size: 20rpx;
        border: none !important;
        padding: 0 !important;
        line-height: 28rpx;

        &::after {
          border: none;
        }
      }
    }
  }

  .buy {
    margin-right: 32rpx;
    width: 200rpx;
    height: 80rpx;
    border-radius: 80rpx;
    color: #ffffffff;
    font-size: 24rpx;
    font-weight: 700;
    background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
  }
  .add {
    margin-right: 14rpx;
    width: 200rpx;
    height: 80rpx;
    border-radius: 80rpx;
    color: #ffffffff;
    font-size: 24rpx;
    font-weight: 700;
    background: linear-gradient(139deg, #ffac0bff 0%, #ffc24aff 100%);
  }

  .exchange {
    margin-right: 32rpx;
    width: 358rpx;
    height: 80rpx;
    border-radius: 80rpx;
    color: #ffffffff;
    font-size: 30rpx;
    font-weight: 700;
    background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
  }
}
// image {
//   width: 100% !important;
//   height: 100% !important;
// }
</style>