<script setup lang="ts">
import {
  appMerchantOrderDetailPost,
  type MerchantOrderVo,
  appUserCardSelectDefaultPost,
  appMerchantOrderPayOrderPost,
  appMerchantOrderCancelOrderPost,
  appMerchantOrderZipPayVoucherPost,
} from "@/service";
import ChooseImage from '@/components/choose-image/choose-image.vue'
const { t } = useI18n();
import OrderProgress from './components/order-progress.vue'
import OrderDetailSkeleton from './components/order-detail-skeleton.vue'
import PriceDetail from "@/pages-store/pages/order/components/price-detail.vue";
import CancelOrder from "@/pages-store/pages/order/components/cancel-order.vue";
import {useConfigStore} from "@/store";
import {OrderStatus, EventEnum, OrderCancelStatus} from "@/constant/enums";
import {formatTimestampWithMonthName, formatTimestampShort, navGoogleMap, callPhone} from "@/utils/utils";
import dayjs from 'dayjs'
import useEventEmit from "@/hooks/useEventEmit";
const configStore = useConfigStore();

// 价格明细
const priceDetailRef = ref<InstanceType<typeof PriceDetail>>();
// 打开价格明细
const openPriceDetail = () => {
  priceDetailRef.value?.onOpen({
    tip: orderDetail.value.tip,
    tax: orderDetail.value.tax,
    deliveryFee: orderDetail.value.deliveryFee,
  }, 0);
};

// 取消订单
const cancelOrderRef = ref<InstanceType<typeof CancelOrder>>();
// 打开取消订单
const openCancelOrder = () => {
  cancelOrderRef.value?.onOpen();
};
function confirmCancel(reason: string) {
  console.log('取消订单', reason)
  appMerchantOrderCancelOrderPost({
    body: {
      orderId: orderDetail.value.id,
      cancelReason: reason,
    }
  }).then(res=> {
    uni.showToast({
      title: '取消订单成功',
      icon: 'none',
    })
    setTimeout(() => {
      appMerchantOrderDetail()
    }, 500)
  })
}

// 订单步骤数据(配送订单)
const orderSteps = ref([
  { label: t('pages-store.order.orderStatus.ordered'), value: OrderStatus.PENDING_PAYMENT }, // 代付款
  { label: t('pages-store.order.orderStatus.paid'), value: OrderStatus.HAS_PENDING_PAYMENT }, // 已付款
  { label: t('pages-store.order.orderStatus.received'), value: OrderStatus.MERCHANT_ACCEPTED },// 商家已接单
  { label: t('pages-store.order.orderStatus.delivering'), value: OrderStatus.DELIVERING }, // 配送中
  { label: t('pages-store.order.orderStatus.delivered'), value: OrderStatus.COMPLETED }// 已送达
])

// 订单步骤数据(自取订单)
const orderStepsCancel = ref([
  { label: t('pages-store.order.orderStatus.ordered'), value: OrderStatus.PENDING_PAYMENT }, // 代付款
  { label: t('pages-store.order.orderStatus.ready'), value: OrderStatus.MERCHANT_ACCEPTED }, // 商家接单
  { label: t('pages-store.order.orderStatus.completed'), value: OrderStatus.COMPLETED },// 已核销
])

// 页面加载状态
const loading = ref(true);
const orderId = ref('')
onLoad((options: any)=> {
  if(options.id) {
    orderId.value = options.id;
    // appMerchantOrderDetail()
    // 查询用户默认信用卡
    appUserCardSelectDefault()
  }
})

onShow(()=> {
  nextTick(()=> {
    appMerchantOrderDetail()
  })
})

const orderDetail = ref<MerchantOrderVo>()
function appMerchantOrderDetail() {
  loading.value = true;
  appMerchantOrderDetailPost({
    params: {
      orderId: orderId.value,
    }
  }).then((res: any)=> {
    console.log('订单详情', res)
    orderDetail.value = res.data
    // 是自取订单还是配送订单 1-派送 2-自取
    if(orderDetail.value) {
      if(+orderDetail.value.receiveMethod === 2) {
        orderSteps.value = orderStepsCancel.value
      }
    }
  }).finally(() => {
    loading.value = false;
  })
}
// 订单状态
const orderStatus = computed(() => {
  if(orderDetail.value) {
    return orderDetail.value.orderStatus
  }
  return ''
})

// ====== 为设计稿准备的数据结构（商品缩略卡/总件数/总价等）======
const orderDishList = computed(() => {
  const list = orderDetail.value?.merchantOrderDishVoList as unknown as Array<any> | null | undefined
  if (!Array.isArray(list)) return []
  return list
})

const orderTotalItemCount = computed(() => {
  return orderDishList.value.reduce((sum, item) => sum + (Number(item?.count) || 0), 0)
})

const orderTotalItemCountText = computed(() => {
  return t('pages.order.totalItemCount', {
    count: orderTotalItemCount.value,
  })
})

const orderTotalPrice = computed(() => {
  const n = orderDetail.value?.paidAmount ?? orderDetail.value?.actualPrice ?? 0
  return Number(n).toFixed(2)
})

function dishCover(dishItem: any) {
  const img = dishItem?.merchantDishVo?.dishImage
  if (!img || typeof img !== 'string') return ''
  return img.split(',')[0] || ''
}

function dishTitle(dishItem: any) {
  return dishItem?.merchantDishVo?.dishName ?? ''
}

const payMethodText = computed(() => {
  // 1-信用卡 2-余额（wallet）
  return orderDetail.value?.payMethod === 1
      ? t('pages-user.choosePaymethod.creditCard')
      : t('pages-user.choosePaymethod.wallet')
})

// 复制订单号
const copyOrderNumber = (text: string) => {
  if(!text) return
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: t('toast.orderNumberCopied'),
        icon: 'none'
      })
    }
  })
}
// 拨打电话
const callPhoneFn = (phone: string) => {
  callPhone(phone)
}

// 支付参数
const payMethodOptions = ref({
  orderId: '',
  cardId: '',
  cardNumber: '',
  payMethod: 1, // 支付方式 1信用卡 2余额
  payPassword: '',
})
// 支付密码输入框 ref
const passwordInputRef = ref()
useEventEmit(EventEnum.CHOOSE_PAYMENT_METHOD, (data) => {
  if(data) {
    if(data.payMethod === 1) {
      payMethodOptions.value.cardId = data.cardId
      payMethodOptions.value.cardNumber = data.cardNumber
      payMethodOptions.value.payMethod = 1
    } else {
      payMethodOptions.value.payMethod = 2
    }
  }
})
function appUserCardSelectDefault() {
  appUserCardSelectDefaultPost({}).then(res=> {
    console.log('查询用户默认信用卡', res)
    payMethodOptions.value.cardId = res.data?.cardId || ''
    payMethodOptions.value.cardNumber = res.data?.cardNumber || ''
  })
}
// 立即支付订单
function goPay() {
  // 如果是余额支付,弹出支付密码弹窗
  if(payMethodOptions.value.payMethod === 2) {
    passwordInputRef.value?.showPasswordInput()
    return
  }
  // 信用卡支付：必须已绑定卡（与 appMerchantOrderPayOrder 入参一致，避免 cardId/cardNumber 为空仍请求）
  if (payMethodOptions.value.payMethod === 1) {
    const cardId = String(payMethodOptions.value.cardId || '').trim()
    if (!cardId) {
      uni.showToast({
        title: t('pages-store.order.pleaseBindCreditCard'),
        icon: 'none',
      })
      return
    }
  }
  appMerchantOrderPayOrder()
}
function payPawSuccess(password: string) {
  payMethodOptions.value.payPassword = password
  appMerchantOrderPayOrder()
}
function appMerchantOrderPayOrder() {
  appMerchantOrderPayOrderPost({
    body: {
      ...payMethodOptions.value,
      orderId: orderDetail.value.id,
    }
  }).then(res=> {
    console.log('支付结果', res)
    uni.showToast({
      title: '支付成功',
      icon: 'none'
    })

    setTimeout(()=> {
      appMerchantOrderDetail()
    }, 500)
  })
}

function navGoogleMapFn() {
  navGoogleMap(orderDetail.value?.merchantVo?.latitude + ',' + orderDetail.value?.merchantVo?.longitude)
}

const useCodeRef = ref()
function openQrCode() {
  useCodeRef.value?.init(orderDetail.value?.orderNo || '')
}

function navigateTo(url: string) {
  uni.navigateTo({ url })
}

/** 订单详情顶栏：与设计稿一致的 MM/DD HH:mm */
function formatOrderNavScheduleTime(timestamp?: number | string | null) {
  if (timestamp == null || timestamp === '') return ''
  const n = Number(timestamp)
  if (!Number.isFinite(n)) return ''
  return dayjs(n).format('MM/DD HH:mm')
}

function handleOrderDetailBack() {
  const pages = getCurrentPages?.() || []
  if (pages.length <= 1) {
    uni.switchTab({ url: '/pages/home/index' })
    return
  }
  uni.navigateBack()
}

/** 顶栏居中展示「预计送达 / 下单时间」：非取消、非退款申请中、非商家拒绝 */
const showOrderNavTimeBlock = computed(() => {
  if (!orderDetail.value) return false
  if (orderStatus.value === OrderStatus.CANCELLED) return false
  if (orderDetail.value.refundStatus === OrderCancelStatus.APPLIED) return false
  if (orderStatus.value === OrderStatus.MERCHANT_REJECTED) return false
  return true
})

const orderNavPrimaryLine = computed(() => {
  const d = orderDetail.value
  if (!d) return ''
  const isDelivery = +(d.receiveMethod ?? 0) === 1
  const label = isDelivery
      ? t('pages-store.order.estimatedDeliveryTime')
      : t('pages-store.order.upTime')
  const timePart = formatOrderNavScheduleTime(d.endScheduledTime) || '--'
  const suffix = isDelivery ? t('pages-store.order.beforeDeadline') : ''
  return `${label} : ${timePart}${suffix}`
})

const orderNavSecondaryLine = computed(() => {
  const d = orderDetail.value
  if (!d) return ''
  const ct = d.createTime
  const timeStr =
      formatOrderNavScheduleTime(ct) ||
      (ct != null && ct !== '' ? formatTimestampShort(Number(ct)) : '')
  return `${t('pages-store.order.orderTime')}: ${timeStr || '--'}`
})

// 已支付上传凭证（Zip 等线下支付）
const voucherChooseRef = ref<InstanceType<typeof ChooseImage>>()
const voucherSubmitting = ref(false)

function openUploadVoucher() {
  voucherChooseRef.value?.init()
}

function normalizeVoucherUrl(payload: unknown): string {
  if (Array.isArray(payload)) {
    const first = payload[0]
    return typeof first === 'string' ? first : ''
  }
  return typeof payload === 'string' ? payload : ''
}

async function onVoucherImageUploaded(urls: unknown) {
  const zipPayVoucher = normalizeVoucherUrl(urls)
  if (!zipPayVoucher) {
    uni.showToast({ title: t('pages-store.order.voucherUploadFailed'), icon: 'none' })
    return
  }
  const id = orderDetail.value?.id
  if (id == null || String(id).trim() === '') {
    uni.showToast({ title: t('pages-store.order.voucherUploadFailed'), icon: 'none' })
    return
  }
  if (voucherSubmitting.value) return
  voucherSubmitting.value = true
  try {
    await appMerchantOrderZipPayVoucherPost({
      body: {
        orderId: id,
        zipPayVoucher,
      },
      options: { hideErrorToast: true },
    })
    uni.showToast({ title: t('pages-store.order.voucherSubmitSuccess'), icon: 'none' })
    setTimeout(() => {
      appMerchantOrderDetail()
    }, 500)
  }
  catch {
    uni.showToast({ title: t('pages-store.order.voucherSubmitFailed'), icon: 'none' })
  }
  finally {
    voucherSubmitting.value = false
  }
}
</script>

<template>
  <view class="order-detail-page">
    <wd-navbar
        safeAreaInsetTop
        fixed
        placeholder
        :bordered="false"
        custom-class="order-detail-navbar !bg-white"
        @click-left="handleOrderDetailBack"
    >
      <template #left>
        <view class="shrink-0">
          <view class="order-detail-navbar-circle center">
            <view class="i-carbon:chevron-left text-44rpx text-#111"></view>
          </view>
        </view>
      </template>
      <template #title>
        <view v-if="!loading && orderDetail && showOrderNavTimeBlock" class="order-detail-nav-times">
          <text class="order-detail-nav-primary">{{ orderNavPrimaryLine }}</text>
          <text class="order-detail-nav-secondary">{{ orderNavSecondaryLine }}</text>
        </view>
      </template>
    </wd-navbar>
    <view
        class="animate-in fade-in animate-ease-out animate-duration-300"
        v-show="loading"
    >
      <!-- 骨架屏 -->
      <OrderDetailSkeleton />
    </view>
    <view
        class="animate-in fade-in animate-ease-in animate-duration-300 bg-white"
        v-if="!loading"
    >
    <!-- 已取消-成功取消 -->
    <template v-if="orderStatus === OrderStatus.CANCELLED">
      <view class="px-30rpx pt-20rpx pb-50rpx">
        <view class="text-40rpx lh-36rpx text-#333 font-500">{{ t('pages-store.order.cancelled') }}</view>
        <view class="text-28rpx lh-28rpx text-#7D7D7D mt-26rpx">
          {{ t('pages-store.order.cancellationTime') }}: {{ formatTimestampShort(orderDetail?.cancelTime) }}
        </view>
      </view>
    </template>
    <!-- 已取消-等待商家同意 -->
    <template v-else-if="orderDetail?.refundStatus === OrderCancelStatus.APPLIED">
      <view class="px-30rpx pt-20rpx pb-50rpx">
        <view class="text-40rpx lh-36rpx text-#333 font-500">{{ t('pages-store.order.cancellationTitle') }}</view>
        <view class="text-28rpx lh-28rpx text-#7D7D7D mt-26rpx">
          {{ t('pages-store.order.cancellationReasonDesc') }}
        </view>
        <view class="text-28rpx lh-28rpx text-#7D7D7D mt-26rpx">{{ t('pages-store.order.cancellationReason') }}：{{ orderDetail?.cancelReason }}</view>
      </view>
    </template>
    <!-- 商家拒绝订单 -->
    <template v-else-if="orderStatus === OrderStatus.MERCHANT_REJECTED">
      <view class="px-30rpx pt-8rpx pb-40rpx">
        <view class="text-40rpx lh-36rpx text-#333 font-500">{{ t('pages-store.order.orderStatus.merchantRejected') }}</view>
        <view class="text-28rpx lh-28rpx text-#7D7D7D mt-26rpx">{{ t('pages-store.order.orderStatus.merchantRejectedDesc') }}</view>
      </view>
    </template>
    <template v-else>
      <!-- 顶栏已展示预计送达/下单时间；此处仅保留提示类副文案 -->
      <view class="px-30rpx pt-8rpx pb-24rpx" v-if="orderStatus === OrderStatus.PENDING_PAYMENT || orderDetail?.refundStatus === OrderCancelStatus.REJECTED">
        <view class="text-28rpx lh-36rpx text-#7D7D7D" v-if="orderStatus === OrderStatus.PENDING_PAYMENT">
          {{ t('pages-store.order.autoCancellation') }}
        </view>
        <view class="text-28rpx lh-36rpx text-#7D7D7D mt-16rpx" v-if="orderDetail?.refundStatus === OrderCancelStatus.REJECTED">
          {{ t('pages-store.order.rejectReason') }}：{{ orderDetail?.rejectReason }}
        </view>
      </view>
      <!-- 订单进度（紧接顶栏时间信息） -->
      <view
          v-if="orderDetail?.refundStatus !== OrderCancelStatus.APPLIED && orderDetail?.refundStatus !== OrderCancelStatus.APPROVED"
          class="order-detail-progress-wrap mb-52rpx px-30rpx"
      >
        <OrderProgress
            :steps="orderSteps"
            :current-status="orderStatus"
        />
      </view>

<!--      自取订单展示核销码按钮-->
      <view class="px-30rpx pb-52rpx" v-if="orderDetail?.receiveMethod === 2 && orderStatus === OrderStatus.MERCHANT_ACCEPTED">
        <wd-button block
                   custom-class="w-full !h-98rpx !text-30rpx !lh-42rpx !font-bold !rounded-20rpx !bg-#14181B"
                   @click="openQrCode">
          {{ t('pages-store.order.writeOff') }}
        </wd-button>
      </view>
<!--      自取订单展示核销码按钮-->

<!--      <OrderProgress-->
<!--          :steps="orderSteps"-->
<!--          :current-status="1"-->
<!--      />-->
    </template>
    <!-- 分隔线 -->
    <view class="w-full h-16rpx bg-#F6F6F6"></view>

    <!-- 配送员信息 -->
    <view v-if="
    orderDetail?.receiveMethod === 1 && (
          orderStatus === OrderStatus.DELIVERING ||
           orderStatus === OrderStatus.COMPLETED)
      " class="pt-36rpx">
      <view class="text-36rpx lh-36rpx text-#333 font-500 pl-30rpx">{{ t('pages-store.view-reviews.deliveryDriver') }}</view>
      <view @click="callPhoneFn(orderDetail?.deliveryPhone)" class="flex-center-sb py-36rpx px-30rpx">
        <view class="flex items-center">
          <image
              :src="orderDetail?.deliveryAvatar"
              mode="aspectFill"
              class="w-80rpx h-80rpx rounded-full shrink-0"
          />
          <view class="ml-24rpx">
            <text class="text-30rpx lh-30rpx font-500 text-#333 block mb-6rpx">
              {{ orderDetail?.deliveryFirstName }} {{ orderDetail?.deliverySurname }}
            </text>
            <text class="text-24rpx lh-24rpx text-#7D7D7D">{{ t('pages-store.order.acceptanceTime') }}: {{ formatTimestampWithMonthName(orderDetail?.startDeliveryTime) }}
            </text>
          </view>
        </view>
        <image
            src="@img/chef/153.png"
            mode="aspectFill"
            class="w-66rpx h-66rpx shrink-0"
        />
      </view>
      <!-- 送达信息-已送达 -->
      <view v-if="orderStatus === OrderStatus.COMPLETED" class="px-30rpx pb-36rpx">
        <view class="text-30rpx lh-30rpx text-#333">
          <text class="mr-30rpx">{{ t('pages-store.order.deliveryTime') }}</text>
          <text>{{ formatTimestampWithMonthName(orderDetail?.deliveryTime) }}</text>
        </view>
        <view class="text-30rpx lh-30rpx text-#333 mb-24rpx mt-36rpx">{{ t('pages-store.order.deliveryPhotos') }}</view>
        <view class="flex items-center gap-20rpx">
          <view
              v-for="(item, idx) in orderDetail?.deliveryPhotos?.split(',')"
              :key="`${idx}-${item}`"
          >
            <wd-img width="158rpx" height="158rpx" radius="16rpx" mode="aspectFill" :src="item" :enable-preview="true" />
          </view>
        </view>
      </view>
      <view class="w-full h-16rpx bg-#F6F6F6"></view>
    </view>

    <!-- 商品列表 -->
    <view class="goods-section px-30rpx py-24rpx">
      <view class="goods-layout">
        <view class="goods-left">
          <!-- 门店行：图标 + 店铺名 + 右箭头 -->
          <view
              @click="navigateTo('/pages-store/pages/store/index?id=' + orderDetail?.merchantVo?.id)"
              class="store-row-detail flex-center-sb mb-20rpx"
          >
            <view class="flex items-center min-w-0">
              <image
                  src="@img/chef/126.png"
                  class="w-40rpx h-40rpx shrink-0 mr-16rpx"
                  mode="aspectFit"
              />
              <text class="text-30rpx lh-36rpx text-#333 font-500 line-clamp-1">
                {{ orderDetail?.merchantVo?.merchantName }}
              </text>
            </view>
            <image
                src="@img/chef/142.png"
                class="w-28rpx h-28rpx shrink-0"
                mode="aspectFit"
            />
          </view>

          <!-- 商品缩略卡横向滚动 -->
          <scroll-view
              scroll-x
              class="goods-scroll"
              :show-scrollbar="false"
              :enable-flex="true"
          >
            <view class="goods-track">
              <view
                  v-for="(item, di) in orderDishList"
                  :key="item.id ?? di"
                  class="goods-cell"
              >
                <view class="goods-img-wrap">
                  <image
                      :src="dishCover(item)"
                      mode="aspectFill"
                      class="goods-img"
                  />
                  <view v-if="Number(item?.count) > 1" class="goods-qty">
                    x{{ item?.count }}
                  </view>
                </view>
                <text class="goods-caption line-clamp-2">{{ dishTitle(item) }}</text>
              </view>
            </view>
          </scroll-view>
        </view>

        <view class="goods-price-right">
          <text class="goods-price">${{ orderTotalPrice }}</text>
          <text class="goods-count">
            {{ orderTotalItemCountText }}
          </text>
        </view>
      </view>
    </view>

    <!-- 分隔线 -->
    <view class="w-full h-16rpx bg-#F6F6F6"></view>

    <view v-if="orderDetail?.receiveMethod === 1" class="pt-36rpx bg-white">
      <view class="text-36rpx lh-36rpx text-#333 font-500 pl-30rpx mb-4rpx">{{ t('pages-store.order.deliveryAddress') }}</view>

      <!-- 收货地址 -->
      <view class="flex items-center border-bottom py-36rpx px-30rpx">
        <image
            src="@img/chef/145.png"
            mode="aspectFill"
            class="w-44rpx h-44rpx relative z-1 shrink-0"
        />
        <!-- 地址信息 -->
        <view class="ml-28rpx">
          <text
              class="text-32rpx lh-32rpx text-#333 block mb-8rpx line-clamp-1"
          >{{ orderDetail?.merchantOrderUserAddressVo?.formattedAddress }}</text
          >
          <text class="text-28rpx lh-28rpx text-#6D6D6D">{{ orderDetail?.merchantOrderUserAddressVo?.displayName }}</text>
        </view>
      </view>
      <!-- 配送偏好 -->
      <view
          class="flex items-center border-bottom py-36rpx px-30rpx"
      >
        <image
            src="@img/chef/1333.png"
            mode="aspectFill"
            class="w-44rpx h-44rpx relative z-1"
        />
        <view class="ml-28rpx text-32rpx lh-32rpx text-#333">
          {{ orderDetail?.deliveryMethod }}
        </view>
      </view>
      <view
          class="flex items-center py-36rpx px-30rpx"
      >
        <image
            src="@img/chef/1334.png"
            mode="aspectFill"
            class="w-44rpx h-44rpx relative z-1"
        />
        <view class="ml-28rpx text-32rpx lh-32rpx text-#333">
          {{ orderDetail?.areaCode }} {{ orderDetail?.phone }}
        </view>
      </view>
    </view>
    <!-- 分隔线 -->

    <view v-else class="px-30rpx pt-36rpx bg-white">
      <view class="text-36rpx lh-36rpx text-#333 font-bold">{{ t('pickupAddress') }}</view>
      <view class="flex-center-sb py-40rpx">
        <view class="flex items-center">
          <image
              src="@img/chef/145.png"
              mode="aspectFill"
              class="w-44rpx h-44rpx shrink-0 mr-28rpx"
          />
          <view>
            <view class="text-30rpx lh-30rpx text-#333 mb-18rpx line-clamp-1">{{ orderDetail?.merchantVo?.merchantAddress }}</view>
            <view class="text-28rpx lh-28rpx text-#6D6D6D">{{ orderDetail?.merchantVo?.merchantName }}</view>
          </view>
        </view>

        <view @click="navGoogleMapFn" class="w-66rpx h-66rpx ml-20rpx center shrink-0 rounded-50% border-#333 border-solid border-1px">
          <image
              src="@img/chef/127.png"
              mode="aspectFill"
              class="w-62rpx h-62rpx"
          />
        </view>
      </view>
    </view>



    <view class="w-full h-16rpx bg-#F6F6F6"></view>

    <view class="bg-white border-bottom px-30rpx py-36rpx text-36rpx lh-36rpx text-#333 ">
      <view class="font-500 text-36rpx lh-36rpx mb-40rpx">{{ t('pages-store.order.orderInfo') }}</view>
      <!-- 订单编号 -->
      <view @click="copyOrderNumber(orderDetail?.orderNo)" class="flex-center-sb text-30rpx lh-30rpx mb-40rpx">
        <text>{{ t('pages-store.order.orderNumber') }}</text>
        <view class="flex items-center">
          {{ orderDetail?.orderNo }}
          <image
              src="@img/chef/1340.png"
              mode="aspectFill"
              class="w-20rpx h-20rpx shrink-0 ml-10rpx"
          />
        </view>
      </view>
      <!-- 下单时间 mb-40rpx根据支付状态显示 -->
      <view class="flex-center-sb text-30rpx lh-30rpx mb-40rpx">
        <text>{{ t('pages-store.order.orderTime') }}</text>
        <text>{{ formatTimestampWithMonthName(orderDetail?.createTime) }}</text>
      </view>
      <template v-if="orderStatus !== OrderStatus.PENDING_PAYMENT">
        <!-- 支付方式 -->
        <view class="flex-center-sb text-30rpx lh-30rpx mb-40rpx">
          <text>{{ t('pages-user.member.paymentMethod') }}</text>
          <view class="flex items-center">
            <image
                src="@img/chef/138.png"
                mode="aspectFill"
                class="w-44rpx h-44rpx shrink-0 mr-10rpx"
            />
            <text>{{ payMethodText }}</text>
          </view>
        </view>
      </template>
    </view>

    <!-- 费用明细 -->
    <view
        :class="[ orderStatus === OrderStatus.PENDING_PAYMENT ? '' : 'pb-68rpx' ]"
        class="px-30rpx pt-32rpx text-32rpx lh-32rpx text-#333">
      <view class="flex-center-sb mb-40rpx">
        <text>{{ t('pages-store.order.subtotal') }}</text>
        <text>${{ orderDetail?.actualPrice }}</text>
      </view>
      <view class="flex-center-sb mb-40rpx">
        <view @click="openPriceDetail" class="flex items-center">
          <text>{{ t('pages-store.order.taxesAndOtherFees') }}</text>
          <image
              src="@img/chef/1336.png"
              class="w-28rpx h-28rpx shrink-0 ml-10rpx mt-4rpx"
              mode="aspectFit"
          />
        </view>
        <view>
          <text>${{ (Number(orderDetail?.tax) + Number(orderDetail?.tip) + Number(orderDetail?.deliveryFee)).toFixed(2) }}</text>
        </view>
      </view>
      <view class="flex-center-sb">
        <text>{{ t('pages-store.order.total') }}</text>
        <text>${{ orderDetail.paidAmount }}</text>
      </view>
    </view>

    <!-- 订单支付 -->
    <view
        v-if="orderStatus === OrderStatus.PENDING_PAYMENT"
        @click="navigateTo('/pages-user/pages/choose-paymethod/index')"
        class="flex-center-sb text-32rpx lh-32rpx font-500 text-#333 py-36rpx px-30rpx pb-68rpx"
    >
      <view class="flex items-center">
        <image
            src="@img/chef/138.png"
            class="w-44rpx h-44rpx mr-28rpx shrink-0"
            mode="aspectFit"
        />
        <text class="">
          <template v-if="payMethodOptions.payMethod === 1">{{ t('pages-user.choosePaymethod.creditCard') }}</template>
          <template v-else>{{ t('pages-user.choosePaymethod.wallet') }}</template>
        </text>
      </view>
      <view class="flex items-center">
        <view class="mr-12px">
          <template v-if="payMethodOptions.payMethod === 1">
            <!--判断用户是否有信用卡-->
            <text v-if="!payMethodOptions.cardId">{{ t("pages-user.member.creditCard") }}</text>
            <text v-else>{{ payMethodOptions.cardNumber }}</text>
          </template>
          <template v-else-if="payMethodOptions.payMethod === 2">
            <text>{{ t('pages-user.choosePaymethod.wallet') }}</text>
          </template>
        </view>
        <image
            src="@img/chef/142.png"
            class="w-32rpx h-32rpx shrink-0"
            mode="aspectFit"
        />
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="px-30rpx pb-30rpx">
    <!--申请取消订单中.已同意取消订单-->
      <template v-if="+orderDetail.refundStatus === OrderCancelStatus.APPLIED || +orderDetail.refundStatus === OrderCancelStatus.APPROVED">
        <template v-if="+orderDetail.refundStatus === OrderCancelStatus.APPLIED">
          <wd-button custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
            {{ t('pages-store.order.orderStatus.pending') }}
          </wd-button>
        </template>
        <template v-if="+orderDetail.refundStatus === OrderCancelStatus.APPROVED">
          <wd-button custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
            {{ t('pages-store.order.orderStatus.agree') }}
          </wd-button>
        </template>
      </template>
      <template v-else>
        <template v-if="orderStatus === OrderStatus.PENDING_PAYMENT">
          <!-- 上传支付凭证 -->
          <wd-button
              :loading="voucherSubmitting"
              :disabled="voucherSubmitting"
              @click="openUploadVoucher"
              custom-class="!h-108rpx !bg-transparent !text-32rpx !font-500 !lh-108rpx !text-#333 !rounded-46rpx !border-#666666 !border-solid !border-1rpx"
              block
            >
              {{ t('pages-store.order.uploadPaidVoucher') }}
            </wd-button>
          <wd-button @click="goPay" custom-class="!h-108rpx !bg-14181B !text-32rpx !lh-108rpx !text-#fff !rounded-46rpx !mt-22rpx" block>
            {{ t('common.goPay') }}
          </wd-button>
          <view @click="openCancelOrder" class="text-center  mt-22rpx text-28rpx lh-28rpx text-#333 font-500">
            {{ t('common.cancel') }}
          </view>
        </template>


        <!--   配送订单     -->
        <template v-if="orderDetail?.receiveMethod === 1">
          <!-- 待接单/已接单/配送中 -->
          <template v-if="
          orderStatus === OrderStatus.HAS_PENDING_PAYMENT ||
           orderStatus === OrderStatus.MERCHANT_ACCEPTED ||
           orderStatus === OrderStatus.DELIVERING
      ">
            <!-- 已经被拒绝过不能在申请了 -->
            <wd-button v-if="orderDetail?.refundStatus !== OrderCancelStatus.REJECTED" @click="openCancelOrder" custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
              {{ t('common.cancel') }}
            </wd-button>
          </template>

          <!--已完成，评价-->
          <template v-else-if="orderStatus === OrderStatus.COMPLETED">
            <template v-if="orderDetail?.dishReviewVoList.length > 0">
              <wd-button @click="navigateTo('/pages-store/pages/order/view-reviews?id=' + orderDetail.id)" custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
                {{ t('pages-store.view-reviews.viewTitle') }}
              </wd-button>
            </template>
            <template v-else>
              <wd-button @click="navigateTo('/pages-store/pages/order/evaluate?id=' + orderDetail.id)" custom-class="!h-108rpx !bg-14181B !text-36rpx !lh-108rpx !text-#fff !rounded-16rpx" block>
                {{ t('common.evaluate') }}
              </wd-button>
            </template>
          </template>
        </template>
        <template v-else>
          <template v-if="
          orderStatus === OrderStatus.HAS_PENDING_PAYMENT || orderStatus === OrderStatus.MERCHANT_ACCEPTED
      ">
            <!-- 已经被拒绝过不能在申请了 -->
            <wd-button v-if="orderDetail?.refundStatus !== OrderCancelStatus.REJECTED" @click="openCancelOrder" custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
              {{ t('common.cancel') }}
            </wd-button>
          </template>
          <template v-if="orderStatus === OrderStatus.COMPLETED">
            <template v-if="orderDetail?.dishReviewVoList.length > 0">
              <wd-button @click="navigateTo('/pages-store/pages/order/view-reviews?id=' + orderDetail.id)" custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
                {{ t('pages-store.view-reviews.viewTitle') }}
              </wd-button>
            </template>
            <template v-else>
              <wd-button @click="navigateTo('/pages-store/pages/order/evaluate?id=' + orderDetail.id)" custom-class="!h-108rpx !bg-14181B !text-36rpx !lh-108rpx !text-#fff !rounded-16rpx" block>
                {{ t('common.evaluate') }}
              </wd-button>
            </template>
          </template>
        </template>
      </template>
    <!--申请取消订单中-->
      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </view>
    <!-- 价格明细 -->
    <price-detail ref="priceDetailRef" />
    <!-- 取消订单 -->
    <cancel-order @confirm="confirmCancel" ref="cancelOrderRef" />
    <!-- 支付订单 -->
    <password-container @success="payPawSuccess" ref="passwordInputRef" />
    <!-- 核销订单 -->
      <use-code ref="useCodeRef" />
    <!-- 支付凭证：相册/拍照，上传后回调真实 URL -->
    <choose-image ref="voucherChooseRef" :count="1" @change="onVoucherImageUploaded" />
    </view>
  </view>
</template>
<style>
page {
  background-color: #F6F6F6;
}
</style>
<style scoped>
/* 订单详情：商品缩略卡横向滚动（对齐设计稿） */
.goods-section {
  background: #fff;
}

.goods-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.goods-left {
  flex: 1;
  min-width: 0;
}

.store-row-detail {
  align-items: center;
}

.goods-price-right {
  flex-shrink: 0;
  text-align: right;
  padding-left: 24rpx;
  padding-bottom: 10rpx;
}

.goods-price {
  display: block;
  font-size: 32rpx;
  line-height: 40rpx;
  font-weight: 700;
  color: #14181B;
}

.goods-count {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  line-height: 30rpx;
  color: #7D7D7D;
  font-weight: 500;
}

.goods-scroll {
  width: 100%;
}

.goods-track {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  padding-right: 8rpx;
}

.goods-cell {
  width: 128rpx;
  flex-shrink: 0;
}

.goods-img-wrap {
  position: relative;
  width: 128rpx;
  height: 128rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background: #F2F2F2;
}

.goods-img {
  width: 100%;
  height: 100%;
}

.goods-qty {
  position: absolute;
  right: 6rpx;
  bottom: 6rpx;
  min-width: 36rpx;
  padding: 4rpx 10rpx;
  background: rgba(20, 24, 27, 0.85);
  color: #fff;
  font-size: 20rpx;
  line-height: 24rpx;
  border-radius: 8rpx;
  text-align: center;
}

.goods-caption {
  display: block;
  margin-top: 10rpx;
  font-size: 22rpx;
  line-height: 28rpx;
  color: #333;
}

.order-detail-navbar-circle {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}

.order-detail-nav-times {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
  max-width: 480rpx;
}

.order-detail-nav-primary {
  font-size: 28rpx;
  line-height: 36rpx;
  font-weight: 600;
  color: #14181b;
  text-align: center;
}

.order-detail-nav-secondary {
  margin-top: 6rpx;
  font-size: 24rpx;
  line-height: 30rpx;
  color: #7d7d7d;
  text-align: center;
}

.order-detail-progress-wrap {
  padding-top: 8rpx;
}

:deep(.order-detail-navbar.wd-navbar .wd-navbar__title) {
  max-width: 520rpx;
  overflow: visible;
  white-space: normal;
}
</style>