<template>
  <div id="commodity-detail" :class="[prefixCls]">
    <header class="h-70 bg-[#aaa]">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img class="h-full w-full" :src="detail.mainImg" alt="" /></van-swipe-item>
        <van-swipe-item v-if="detail.video">
          <video class="h-full w-full" :src="detail.video" autoplay muted loop></video>
        </van-swipe-item>
        <van-swipe-item v-for="img in detail.subImgs" :key="img">
          <img class="h-full w-full" :src="img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </header>
    <main>
      <div class="detail-info wrap">
        <h2 class="text-2xl color-[#000]">{{ detail.title }}</h2>
        <!-- <h4 class="mt-2 text-sm">副标题</h4>
        <ul class="detail-wrap">
          <li><span>配送</span> <em>立即下单，预计最快今天23:00发货</em></li>
          <li><span>服务</span> <button>7天无理由退款</button></li>
        </ul> -->
      </div>
      <div class="review-info wrap">
        <h3 class="wrap-title">
          <b>用户评价({{ reviews.length }}+)</b><span @click="onShowAllReview">全部评价 ></span>
        </h3>
        <div class="mt-5">
          <review-single v-if="reviews.length > 0" :data="reviews[0]" />
        </div>
      </div>
      <div class="wrap">
        <h3 class="wrap-title">
          <b>商品详情</b>
          <!-- <span>查看全部信息</span> -->
        </h3>
        <!-- <info-table class="mt-3" /> -->
        <div class="imgs">
          <div v-html="detail.contentHtml"></div>
        </div>
      </div>
      <div class="wrap">
        <h3 class="wrap-title"><b>质量达标</b></h3>
        <h4 class="mt-2 color-[#666]">客服的满意，是我们最大的信任</h4>
        <instruction-info class="mt3" />
      </div>
    </main>
    <footer class="flex fixed bottom-0 left-0 w-full h-[--app-footer-bg-height] justify-between items-center pr-2 box-border bg-[var(--app-footer-bg-color)]">
      <div class="flex items-center w-[1.4rem] justify-around">
        <p class="icon-wrap">
          <van-icon name="phone-o" size=".14rem" />
          <span>客服</span>
        </p>
        <p class="icon-wrap">
          <van-icon name="like-o" size=".14rem" />
          <span>收藏</span>
        </p>
        <p class="icon-wrap">
          <van-icon name="shopping-cart-o" size=".14rem" />
          <span>购物车</span>
        </p>
      </div>
      <div class="flex-1 button-wrap">
        <button class="bg-orange text-white w-30!" @click="onSubmit('cart')">加入购物车</button>
        <button class="theme-bg-color color-white" @click="onSubmit('order')">立即购买</button>
      </div>
    </footer>
    <shopping-cart v-model="showShopCart" v-model:showAddressList="showAddressList" v-model:curAddressData="curAddressData" :list="skuList" :scene="cartType"></shopping-cart>
    <all-review v-model="showAllReview" :list="reviews"></all-review>
    <address-list
      v-model="showAddressList"
      v-model:isUpDateAddressList="isUpDateAddressList"
      v-model:showAddAddressFormDialog="showAddAddressFormDialog"
      v-model:addressFormType="addressFormType"
      :curAddressData="curAddressData"
      @edit="(val) => (editAddressData = val)"
      @confirm="(val) => (curAddressData = val)"
    ></address-list>
    <address-form v-model="showAddAddressFormDialog" v-model:editData="editAddressData" :isEdit="addressFormType === 'edit'" @confirm="isUpDateAddressList = true"></address-form>
  </div>
</template>

<script lang="ts" setup>
import api from '@/api'
import allReview from './components/all-review.vue'
import reviewSingle from './components/review-single.vue'
// import infoTable from './components/info-table.vue'
import instructionInfo from './components/instruction-info.vue'
import shoppingCart from './components/shopping-cart.vue'
import addressList from './components/address-list.vue'
import addressForm from './components/address-form.vue'
import { useDesign } from '@/hooks/web/useDesign.ts'


const { getPrefixCls  } = useDesign()

const prefixCls = getPrefixCls("commodity-detail")

const detail = reactive({
  mainImg: '',
  video: '',
  subImgs: [],
  contentHtml: '',
  title: '',
})

const showShopCart = ref<boolean>(false) // 展示购物车
const cartType = ref<'order' | 'cart'>('order')
const showAllReview = ref<boolean>(false) // 展示全部评价
const showAddressList = ref<boolean>(false) // 展示收货地址列表
const showAddAddressFormDialog = ref<boolean>(false) // 展示收货地址form
const addressFormType = ref<'add' | 'edit'>('add')
const isUpDateAddressList = ref<boolean>(false) // 是否需要更新收货地址列表
const editAddressData = ref<any>({}) // 编辑的收货地址
const curAddressData = ref<any>({}) // 当前选中的收货地址

const route = useRoute()
const init = () => {
  handleGetCommodityDetail(+route.query.id)
  handleGetReviews(+route.query.id)
  handleGetAddressList()
}

// 查看全部评价
const onShowAllReview = () => {
  showAllReview.value = true
}
// 点击立即购买按钮
const onSubmit = (type: 'order' | 'cart') => {
  console.warn('----- my data is window.wx: ', window.wx)
  cartType.value = type
  showShopCart.value = true
}

// 获取评价
const reviews = ref([])
const handleGetReviews = (productId: number) => {
  api.shop.getReviewList.post<any>({ productId }).then((res) => {
    reviews.value = res.data
  })
}

const skuList = ref([])
// 获取商品详情
const handleGetCommodityDetail = (productId: number) => {
  api.shop.getCommodityDetail.post<any>({ productId }).then((res) => {


    detail.mainImg = res.data.mainImageUrl
    detail.video = res.data.videoUrl
    detail.subImgs = res.data.vvProductDetailList.filter((item) => item.type === 1)?.map((item) => item.detail)
    detail.contentHtml = res.data.vvProductDetailList.find((item) => item.type === 2)?.detail
    detail.title = res.data.title
    skuList.value = res.data.vvSkuList
  })
}

const handleGetAddressList = () => {
  api.user.getAddressList.post<any>({}).then((res) => {
    curAddressData.value = res.data.rows.find((item) => item.status === 'default') || {}
  })
}
init()
</script>

<style scope lang="scss">

$prefix-cls: #{$namespace}-commodity-detail;
.#{$prefix-cls} {
  padding-bottom: calc(var(--app-footer-bg-height) + 10px);
}

#commodity-detail {
  background: #f2f2f2;
  .my-swipe {
    height: 100%;
  }
  .wrap {
    margin: 0.08rem 0.12rem;
    border-radius: 0.12rem;
    padding: 0.16rem;
    background: #fff;
    .wrap-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      b {
        font-size: 0.16rem;
        color: #000;
      }
      span {
        font-size: 0.12rem;
        color: #777;
      }
    }
  }
  .detail-info {
    li {
      margin-top: 0.12rem;
      span {
        margin-right: 0.1rem;
        color: #888;
      }
      em {
        color: #000;
        font-style: normal;
      }
      button {
        border: 1px solid #aaa;
        border-radius: 0.02rem;
        background: #fff;
        padding: 0.02rem 0.04rem;
      }
    }
  }
  footer {
    .icon-wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .van-icon {
        width: 0.14rem;
        height: 0.16rem;
      }
      span {
        font-size: 0.11rem;
      }
    }
    .button-wrap {
      display: flex;
      align-items: center;
      border-radius: 0.04rem;
      overflow: hidden;
      height: 0.32rem;
      button {
        display: block;
        height: 100% !important;
        width: 50%;
        font-size: 0.14rem;
        border: none;
        height: 0.28rem;
      }
    }
  }
}
</style>
