<template>
  <view class="page-wrapper">
    <!-- 自定义导航栏 -->
    <nav-bar :title="$t('order.orderDetails')"></nav-bar>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="order-status">{{ sysStore.orderStatusMap[order.orderStatus] }}</view>
      <!-- 三种订单类型商品信息 -->
      <ProductInfo v-if="order.orderType === 'order'" size="large" :data="productList[0]" :type="order.orderType" />
      <ProductInfo v-if="order.orderType === 'vip'" size="large" :data="order.vipBuyConfigEntity" :type="order.orderType" />
      <ProductInfo v-if="order.orderType === 'abroadVip'" size="large" :data="order.ebookvipBuyConfig" :type="order.orderType" />
      <!-- 三种订单类型商品信息 end -->
      
      <wd-divider class="p-0!" />

      <!-- 付款信息 -->
      <wd-cell-group>
        <wd-cell title="商品总价" :value="`${order.orderMoney} ${$t('global.coin')}`" />
        <wd-cell v-if="order.districtMoney > 0" title="活动优惠" :value="`- ${order.districtMoney} ${$t('global.coin')}`" />  
        <wd-cell v-if="order.vipDiscountAmount > 0" title="VIP专享立减" :value="`- ${order.vipDiscountAmount} ${$t('global.coin')}`" />
        <wd-cell v-if="order.jfDeduction > 0" title="积分抵扣">
          <text class="text-red-500 text-lg font-bold">{{ `- ${order.jfDeduction}` }}</text>
        </wd-cell>
        <wd-cell title="实付金额">
          <text class="text-red-500 text-lg font-bold">{{ `${order.realMoney}` }}</text> {{ $t('global.coin') }}
        </wd-cell>
      </wd-cell-group>

      <wd-divider class="p-0!" />

      <!-- 下单信息 -->
      <wd-cell-group>
        <wd-cell title="订单编号" title-width="4em">
          <text class="text-xs">{{ order.orderSn }}</text>
          <wd-icon name="file-copy" size="14px" color="#65A1FA" class="ml-1!" @click="copyToClipboard(order.orderSn)"></wd-icon>
        </wd-cell>
        <wd-cell title="创建时间" :value="order.createTime" />
        <wd-cell title="付款时间" :value="order.paymentDate" />
      </wd-cell-group>
    </view>

    <view class="text-center">
      <text @click="toWorkOrder" class="text-[cadetblue] text-sm">订单有问题？去申诉</text>
    </view>
    
    <view class="contact-customer" @click="makePhoneCall(sysStore.customerServicePhone)">
      <wd-icon name="service" size="30px"></wd-icon>
      <view class="text-sm">联系客服</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useSysStore } from '@/stores/sys'
import { orderApi } from '@/api/modules/order'
import type { IOrderDetail, IOrderGoods } from '@/types/order'
import ProductInfo from '@/components/order/ProductInfo.vue'
import { copyToClipboard, makePhoneCall } from '@/utils/index'

const sysStore = useSysStore()
// 订单详情
const order = ref<IOrderDetail>({
  orderMoney: 0,
  districtMoney: 0,
  vipDiscountAmount: 0,
  jfDeduction: 0,
  realMoney: 0,
})
const productList = ref<IOrderGoods[]>([])

onLoad(async (options: { orderId: string }) => {
  const orderId = options.orderId
  if (orderId) {
    const res = await orderApi.getOrderDetail(orderId)
    const orderDetails = res.data.buyOrder
    order.value = orderDetails
    switch (orderDetails.orderType) {
      case 'order':
        productList.value = res.data.productInfo
        break
      case 'vip':
        productList.value = orderDetails.vipBuyConfigEntity
        break
      case 'abroadVip':
        productList.value = orderDetails
        break
      default:
        break
    }
  }
})

const toWorkOrder = () => {
  uni.navigateTo({
    url: '/pages/user/feedback/index?orderSn=' + order.value.orderSn
  })
}
</script>

<style lang="scss" scoped>
body {
  background-color: #F8F9FA;
}
.page-wrapper {
  padding: 20rpx;
}

.order-info {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .order-status {
    margin-bottom: 20rpx;
    padding: 10rpx 0;
    width: 6em;
    background-color: #34D19D;
    color: #fff;
    border-radius: 0 10px 10px 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
}


:deep(.wd-cell-group) {
  padding: 0 !important;

  .wd-cell__wrapper {
    padding: 0 !important;
  }
}

.contact-customer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: 40rpx auto 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  line-height: 1;
}
</style>