<!--
Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

https://www.mall4j.com/

未经允许，不可做商业用途！

版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-order-detail">
    <view class="order-status">
      <view class="title">
        {{ $t('dingDanZhuangTai') }}
      </view>
      <view class="text">
        {{ ['',$t('dengDaiMaiJiaFuKuan'),$t('dengDaiShangJiaFaHuo'),$t('dengDaiMaiJiaShouHuo'),$t('dengDaiMaiJiaPingJia'),$t('jiaoYiChengGong'),$t('jiaoYiShiBai'),$t('shangPinDaiChengTuan')][orderInfo.status] }}
      </view>
    </view>
    <view
      v-if="orderInfo.orderMold !== 1 && orderInfo.userAddrOrder"
      class="order-logistics"
    >
      <view class="delivery-info">
        <view class="title">
          {{ $t('peiSongFangShi-0') }}
        </view>
        <view class="text">
          {{ [$t('kuaiDiPeiSong-0'),$t('kuaiDiPeiSong-0'),$t('maiJiaZiTi'),$t('wuXuKuaiDi'),$t('tongChengPeiSong')][orderInfo.dvyType] }}
        </view>
      </view>
      <view class="addr-info">
        <view class="user-info">
          <text
            v-if="orderInfo.dvyType === 2"
            class="self-pick-title"
          >
            {{ $t('tiHuoRen') }}
          </text>
          <text>{{ orderInfo.userAddrOrder.receiver }} {{ orderInfo.userAddrOrder.mobile }}</text>
          <image
            v-if="orderInfo.status === 2 && orderInfo.dvyType !== 2 && orderInfo.orderMold !== 1"
            src="/static/images/editor.png"
            class="img-edit"
            @click="addrEditor"
          />
        </view>
        <view
          v-if="orderInfo.dvyType !== 2"
          class="addr"
        >
          {{ `${orderInfo.userAddrOrder.province} ${orderInfo.userAddrOrder.city} ${orderInfo.userAddrOrder.area} ${orderInfo.userAddrOrder.addr}` }}
        </view>
      </view>
    </view>
    <view class="prod">
      <view class="prod-box">
        <view
          v-for="(prodItem, index) in orderInfo.orderItems"
          :key="index"
          class="prod-item"
        >
          <view class="prod-common">
            <view class="prod-img-image">
              <img-show :src="prodItem.pic" />
            </view>
            <view class="prod-info">
              <view class="prod-name-price">
                <view class="name">
                  {{ prodItem.prodName }}
                </view>
                <view class="price">
                  ￥<text class="price-big">
                    {{ parsePrice(prodItem.price)[0] }}
                  </text>{{ '.' + parsePrice(prodItem.price)[1] }}
                </view>
              </view>
              <view class="prod-sku">
                <view
                  v-if="prodItem.skuName"
                  class="sku-name"
                >
                  {{ prodItem.skuName }}
                </view>
                <view class="total">
                  {{ '×' + prodItem.prodCount }}
                </view>
              </view>
              <view class="prod-stutus">
                <view
                  v-if="orderInfo.orderType !== 0"
                  class="prod-type-item"
                >
                  {{ ['',$t('tuanGou'), $t('miaoSha')][orderInfo.orderType] }}
                </view>
                <view
                  v-if="prodItem.platformInterventionStatus && prodItem.platformInterventionStatus!==-1"
                  class="prod-stutus-item"
                >
                  <!-- 平台介入状态 -1.没有介入 1.用户申请介入 2.平台同意介入 3.平台拒绝介入 5.平台同意退款成功 -->
                  {{
                    [
                      '',
                      $t('pingTaiJieRuZhong'),
                      $t('pingTaiJieRuZhong'),
                      $t('tuiKuanGuanBi'),
                      '',
                      $t('tuiKuanChengGong')
                    ][prodItem.platformInterventionStatus]
                  }}
                </view>
                <view
                  v-else-if="prodItem.returnMoneySts && prodItem.returnMoneySts > 0"
                  class="prod-stutus-item"
                >
                  {{ orderStatus[prodItem.returnMoneySts < 5 ? 1 : prodItem.returnMoneySts + ''] }}
                </view>
                <view
                  v-if="orderInfo.orderMold === 1"
                  class="prod-type-item"
                >
                  {{ $t('xuNi') }}
                </view>

                <view
                  v-if="util.isAuthorities('admin:orderRefund:update') && orderInfo.refundType === 2 && prodItem.refundId"
                  class="refund-btn"
                  @tap="toRefund(prodItem.refundId)"
                >
                  {{ $t('tuiKuanXinXi') }}
                </view>
              </view>
            </view>
          </view>
          <!-- 组合 -->
          <view
            v-if="prodItem.comboList && prodItem.comboList.length > 0"
            class="prod-gift"
          >
            <combo-list
              :combo-list="prodItem.comboList"
            />
          </view>
          <!-- 赠品 -->
          <view
            v-if="orderInfo.orderItems.length > 1 && prodItem.giveawayList && prodItem.giveawayList.length > 0"
            class="prod-gift"
          >
            <combo-list
              :combo-list="prodItem.giveawayList"
              :tag-name="`【${$t('zengPin')}】`"
            />
          </view>
        </view>
        <!-- 赠品：单个商品时展示 -->
        <view v-if="orderInfo.orderItems && orderInfo.orderItems.length === 1 && orderInfo.orderItems[0].giveawayList">
          <view
            v-for="item in orderInfo.orderItems[0].giveawayList"
            :key="item.orderItemId"
            class="prod-item"
          >
            <view class="prod-common">
              <img
                class="prod-img-image"
                :src="util.checkFileUrl(item.pic) || '/static/images/def.png'"
              >
              <view class="prod-info">
                <view class="prod-name-price">
                  <view
                    class="name"
                  >
                    {{ item.prodName }}
                  </view>
                </view>
                <view class="prod-sku">
                  <view
                    v-if="item.skuName"
                    class="sku-name"
                  >
                    {{ item.skuName }}
                  </view>
                  <view class="total">
                    {{ '×' + item.prodCount }}
                  </view>
                </view>
                <view class="prod-stutus">
                  <view class="prod-type-item">
                    {{ $t('zengPin') }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="price-detail">
        <text class="title">
          {{ $t('shangPinZongJia') }}
        </text>
        <text class="num">
          ￥{{ orderInfo.total }}
        </text>
      </view>
      <view class="price-detail">
        <text class="title">
          {{ $t('yunFei') }}
        </text>
        <text class="num">
          ￥{{ orderInfo.freightAmount }}
        </text>
      </view>
      <view class="price-detail">
        <text class="title">
          {{ $t('youHui') }}
        </text>
        <text class="num">
          ￥{{ orderInfo.reduceAmount || 0 }}
        </text>
      </view>
      <view class="price-total">
        <text class="text">
          {{ $t('gongProductnumsJianShiShou').replace('[productNums]', orderInfo.productNums) }}
        </text>
        <text
          v-if="orderInfo.actualTotal "
          class="num"
        >
          ￥{{ orderInfo.actualTotal }}
        </text>
        <text
          v-if="orderInfo.actualTotal && orderInfo.score"
          class="num plus"
        >
          +
        </text>
        <text
          v-if="orderInfo.score"
          class="num"
        >
          {{ orderInfo.score }} {{ $t('jiFen-0') }}
        </text>
      </view>
    </view>

    <view
      v-if="orderInfo.orderMold === 3"
      class="order-info"
    >
      <view class="order-info-item instructions-use-item">
        <view class="title">
          {{ $t('shiYongShuoMing') }}
        </view>
        <view class="txt-content">
          {{ orderInfo.directions }}
        </view>
      </view>
    </view>

    <view class="order-info">
      <view class="order-info-item">
        <text class="title">
          {{ $t('dingDanBianHao-0') }}
        </text>
        <text class="text">
          {{ orderNumber }}
        </text>
        <view
          class="copy"
          @tap="copy"
        >
          {{ $t('fuZhi') }}
        </view>
      </view>
      <view class="order-info-item">
        <text class="title">
          {{ $t('xiaDanShiJian') }}
        </text>
        <text class="text">
          {{ orderInfo.createTime }}
        </text>
      </view>
      <view class="order-info-item">
        <text class="title">
          {{ $t('dingDanLeiXing') }}
        </text>
        <text class="text">
          {{ [$t('puTongDingDan'),$t('tuanGouDingDan'),$t('miaoShaDingDan')][orderInfo.orderType] }}
        </text>
      </view>
      <view class="order-info-item">
        <text class="title">
          {{ $t('fuKuanFangShi') }}
        </text>
        <text
          v-if="orderInfo.payType === null || orderInfo.status === 1"
          class="text"
        >
          {{ $t('weiZhiFu') }}
        </text>
        <text
          v-else
          class="text"
        >
          {{
            [
              $t('jiFenZhiFu') ,
              $t('weiXinXiaoChengXuZhiFu') ,
              $t('zhiFuBaoPcDuanZhiFu') ,
              $t('weiXinSaoMaZhiFu') ,
              $t('weiXinH5ZhiFu') ,
              $t('weiXinGongZhongHaoZhiFu') ,
              $t('zhiFuBaoH5ZhiFu') ,
              $t('zhiFuBaoAppZhiFu') ,
              $t('weiXinAppZhiFu') ,
              $t('yongHuYuezhiFu') ,
              $t('paypalZhiFu')
            ][orderInfo.payType] }}
        </text>
      </view>
      <view
        v-if="orderInfo.payTime"
        class="order-info-item"
      >
        <text class="title">
          {{ $t('zhiFuShiJian') }}
        </text>
        <text class="text">
          {{ orderInfo.payTime }}
        </text>
      </view>
      <view class="order-info-item">
        <text class="title">
          {{ $t('maiJiaNiCheng') }}
        </text>
        <text class="text">
          {{ orderInfo.nickName }}
        </text>
      </view>
      <view
        v-if="orderInfo.remarks"
        class="order-info-item"
      >
        <text class="title">
          {{ $t('maiJiaBeiZhu-0') }}
        </text>
        <text class="text">
          {{ orderInfo.remarks }}
        </text>
      </view>
    </view>
    <view
      v-if="virtualRemarkList.length > 0"
      class="detail"
    >
      <view class="module-title">
        {{ $t('quanBuLiuYan') }}
      </view>
      <view
        v-for="(item, index) in virtualRemarkList"
        :key="index"
        class="detail-item"
      >
        <view class="detail-item-title">
          {{ item.name + ':' }}
        </view>
        <view class="detail-item-content">
          {{ item.value }}
        </view>
      </view>
    </view>
    <view
      v-if="(util.isAuthorities('admin:orderRefund:update')&&orderInfo.refundStatus && orderInfo.refundType === 1) || (util.isAuthorities('order:delivery:orderItemsDelivery') &&orderInfo.status === 2 && orderInfo.dvyType !== 2)"
      class="order-detail-footer"
    >
      <view
        v-if="util.isAuthorities('admin:orderRefund:update') && orderInfo.refundStatus && orderInfo.refundType === 1"
        class="btn-primary btn"
        @tap="toRefund(orderInfo.orderItems[0].refundId)"
      >
        {{ $t('tuiKuanXinXi') }}
      </view>
      <view
        v-if="util.isAuthorities('order:delivery:orderItemsDelivery') && orderInfo.status === 2 && orderInfo.dvyType !== 2"
        class="btn-primary btn"
        @tap="toShip"
      >
        {{ $t('quFaHuo') }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'
import util from '@/utils/util'
import ComboList from '@/components/combo-list/combo-list.vue'

const Data = reactive({
  orderNumber: '',
  orderInfo: {},
  showShadow: false,
  virtualRemarkList: [],
  orderStatus: { 1: $t('tuiKuanShenQingZhong'), 5: $t('tuiKuanChengGong-0'), 6: $t('maiJiaCheHuiShenQing'), 7: $t('shangJiaJuJue'), '-1': $t('tuiKuanGuanBi') }
})

const { orderNumber, orderInfo, virtualRemarkList, orderStatus } = toRefs(Data)

let userId = ''
onLoad((options) => {
  Data.orderNumber = options.orderNumber
  userId = options.userId || 0
})

onShow(() => {
  getOrderInfoById()
  uni.setNavigationBarTitle({
    title: $t('dingDanXiangQing')
  })
})

/**
* 获取订单详情
*/
const getOrderInfoById = () => {
  http.request({
    url: `/order/delivery/orderInfo/${Data.orderNumber}${userId ? '?userId=' + userId : ''}`,
    method: 'GET'
  }).then(({ data: res }) => {
    res.orderItems.forEach(x => {
      x.price = util.priceAdd0(x.price)
    })
    res.actualTotal = util.priceAdd0(res.actualTotal)
    res.total = util.priceAdd0(res.total)
    res.freightAmount = util.priceAdd0(res.freightAmount)
    Data.orderInfo = res
    Data.virtualRemarkList = JSON.parse(res.virtualRemark) || []
  })
}

const addrEditor = () => {
  uni.setStorageSync('bbcUserAddrOrder', Data.orderInfo.userAddrOrder)
  uni.navigateTo({
    url: `/package-order/pages/modify-address/modify-address?orderNumber=${Data.orderNumber}&orderId=${Data.orderInfo.orderId}&dvyType=${Data.orderInfo.dvyType}`
  })
}

const toShip = () => {
  uni.removeStorageSync('bbcSelectedDelivery')
  uni.navigateTo({
    url: `/package-order/pages/order-shipping/order-shipping?orderNumber=${Data.orderNumber}`

  })
}

const toRefund = (refundId) => {
  uni.navigateTo({
    url: `/pages/refund-processing/refund-processing?refundId=${refundId}`
  })
}

// 复制文本
const copy = () => {
  util.uniCopy({
    content: Data.orderNumber,
    success: (res) => {
      uni.showToast({
        title: res,
        icon: 'none'
      })
    },
    error: (e) => {
      uni.showToast({
        title: e,
        icon: 'none',
        duration: 3000
      })
    }
  })
}

const parsePrice = (price) => {
  if (price.toString().indexOf('.') > -1) {
    return price.toString().split('.')
  }
  return [price]
}
</script>

<style lang="scss" scoped>
@use "order-detail";
</style>
