<script lang="ts" setup>
import {useConfigStore, useUserStore} from "@/store";
import {
  appMerchantOrderAgreeRefundPost,
  appMerchantOrderDetailPost,
  appMerchantOrderReceiveOrderPost,
  type MerchantOrderVo,
} from "@/service";
import RefusePopup from "./components/refuse-popup/refuse-popup.vue";
import {OrderCancelStatus, OrderStatus} from "@/constant/enums";
import {callPhone, formatDateTimeRange, formatTimestampWithMonthName, navGoogleMap} from "@/utils/utils";
import PriceDetail from "./components/price-detail/price-detail.vue";
import startDelivery from "./components/start-delivery/start-delivery.vue";
import OrderSkeleton from "./components/order-skeleton.vue";
import {useMessage} from "wot-design-uni";
import {rejectUserOrderApi} from "@/pages-user/service";

const message = useMessage();
const {t} = useI18n();
const configStore = useConfigStore()
const userStore = useUserStore()

const refusePopup = ref()
const collapseValue = ref(false)

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

// 导航到地址
const navigateToAddress = () => {
  if (!orderDetail.value.merchantOrderUserAddressVo.latitude || !orderDetail.value.merchantOrderUserAddressVo.longitude) return
  navGoogleMap(orderDetail.value.merchantOrderUserAddressVo.latitude + ',' + orderDetail.value.merchantOrderUserAddressVo.longitude)
}

// 拒绝取消订单
const refuseOrder = () => {
  refusePopup.value.onOpen(orderId.value)
}
// 同意取消订单
const agreeOrder = () => {
  appMerchantOrderAgreeRefundPost({
    params: {
      orderId: orderId.value,
    }
  }).then(res => {
    uni.showToast({
      title: t('toast.agreeSuccess'),
      icon: 'none'
    })
    setTimeout(() => {
      // 获取订单详情
      appMerchantOrderDetail()
    }, 500)
  })
}

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

const orderId = ref('')
onLoad((options) => {
  if (options.id) {
    orderId.value = options.id
  }
})

onShow(() => {
  if (orderId.value) {
    // 获取订单详情
    appMerchantOrderDetail()
  }
})

const orderDetail = ref<MerchantOrderVo>()
const loading = ref(false)

function appMerchantOrderDetail() {
  loading.value = true;
  appMerchantOrderDetailPost({
    params: {
      orderId: orderId.value,
    }
  }).then((res: any) => {
    console.log('订单详情', res)
    orderDetail.value = res.data
  }).finally(() => {
    loading.value = false;
  })
}

// 订单状态
const orderStatus = computed(() => {
  if (orderDetail.value) {
    return orderDetail.value.orderStatus
  }
  return ''
})

// 是否展开显示所有商品
const isExpanded = ref(false)

// 展示的商品列表
const showDishList = computed(() => {
  if (orderDetail.value?.merchantOrderDishVoList) {
    // 如果展开或商品数量小于等于3，显示所有商品；否则只显示前3个
    if (isExpanded.value || orderDetail.value.merchantOrderDishVoList.length <= 3) {
      return orderDetail.value.merchantOrderDishVoList
    }
    return orderDetail.value.merchantOrderDishVoList.slice(0, 3)
  }
  return []
})

// 切换展开/收起状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

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

// 接单
function startReceiving() {
  appMerchantOrderReceiveOrderPost({
    params: {
      orderId: orderId.value,
    }
  }).then((res) => {
    console.log('接单', res)
    uni.showToast({
      title: t('pages-user.order.toast.receiveSuccess'),
      icon: 'none'
    })
    // 获取订单详情
    setTimeout(() => {
      appMerchantOrderDetail()
    }, 500)
  })
}

// 开始配送
const startDeliveryRef = ref(null)

function startDeliveryFun() {
  startDeliveryRef.value?.onOpen(orderDetail.value.id)
}

// 点击已送达
function deliveredOrder() {
  navigateTo('/pages-user/pages/order/delivered-order?id=' + orderDetail.value.id)
}

// 核销订单
function writeOff() {
  if (!userStore.currentMerchantToken) {
    uni.showToast({
      title: t('toast.pleaseSelectStore'),
      icon: 'none',
    })
    return
  }
  navigateTo('/pages-user/pages/scan-code/index')
}

function submitDelivery() {
  appMerchantOrderDetail()
}


// 拒绝开始订单， 直接拒绝用户的订单
function rejectStartOrder() {
  message
      .confirm({
        title: t("common.prompt.system-prompt"),
        msg: `${t("common.prompt.system-prompt-reject")}`,
        confirmButtonText: t("common.yes"),
        cancelButtonText: t("common.no"),
        cancelButtonProps: {
          customClass:
              "!h-88rpx !w-258rpx !min-w-auto !text-30rpx  !lh-42rpx !font-bold !border-#666666   !rounded-20rpx",
        },
        confirmButtonProps: {
          customClass:
              "!h-88rpx !w-258rpx !min-w-auto !text-30rpx !lh-42rpx !font-bold  !bg-primary  !rounded-20rpx",
        },
      })
      .then(async () => {
        rejectUserOrderApi({
          orderId: orderId.value,
        }).then(res => {
          uni.showToast({
            title: t('toast.rejectSuccess'),
            icon: 'none'
          })
          setTimeout(() => {
            // 获取订单详情
            appMerchantOrderDetail()
          }, 500)
        })
      })
      .catch(() => {
      });
}
</script>

<template>
  <view class="">
    <!-- 顶部状态栏和导航 -->
    <navbar :title="t('pages-user.order.details')"></navbar>

    <!-- 骨架屏 -->
    <OrderSkeleton v-if="loading"/>

    <!-- 主要内容区域 -->
    <view v-else class="w-full px-30rpx py-32rpx">

      <!-- 订单状态 -->
      <view class="mb-20rpx">
        <template
            v-if="+orderDetail?.refundStatus === OrderCancelStatus.APPLIED || +orderDetail?.refundStatus === OrderCancelStatus.APPROVED || +orderDetail?.refundStatus === OrderCancelStatus.REJECTED">
          <template v-if="+orderDetail?.refundStatus === OrderCancelStatus.APPLIED">
            <view class="flex items-center mb-18rpx">
              <image class="w-42rpx h-42rpx shrink-0 mr-12rpx" src="@img/chef/201.png"></image>
              <view class="!text-36rpx !text-#333 font-500">
                {{ t('pages-user.order.pending') }}
              </view>
            </view>


            <view class="bg-white px-24rpx py-34rpx rounded-10rpx">
              <view class="text-32rpx text-#F8311D">{{ t('pages-user.order.cancelOrder') }}</view>
              <view class="text-28rpx text-#333">{{
                  t('pages-user.order.refundReason')
                }}：{{ orderDetail?.cancelReason || '' }}
              </view>
            </view>
          </template>
          <template v-if="+orderDetail?.refundStatus === OrderCancelStatus.APPROVED">
            <view class="flex items-center mb-18rpx">
              <image class="w-42rpx h-42rpx shrink-0 mr-12rpx" src="@img/chef/203.png"></image>
              <view class="!text-36rpx !text-#333 font-500">
                {{ t('pages-user.order.agree') }}
              </view>
            </view>


            <view class="bg-white px-24rpx py-34rpx rounded-10rpx">
              <view class="text-32rpx text-#00A76D">{{ t('pages-user.order.agreeRefund') }}!</view>
              <view class="text-28rpx text-#333">{{
                  t('pages-user.order.refundReason')
                }}：{{ orderDetail?.cancelReason || '' }}
              </view>
            </view>
          </template>
          <template v-if="+orderDetail?.refundStatus === OrderCancelStatus.REJECTED">
            <view class="flex items-center mb-18rpx">
              <image class="w-42rpx h-42rpx shrink-0 mr-12rpx" src="@img/chef/203.png"></image>
              <view class="!text-36rpx !text-#333 font-500">
                {{ t('pages-user.order.reject') }}
              </view>
            </view>


            <view class="bg-white px-24rpx py-34rpx rounded-10rpx">
              <view class="text-32rpx text-#F8311D">{{ t('pages-user.order.refuseRefund') }}!</view>
              <view class="text-28rpx text-#333">{{
                  t('pages-user.order.refundReason')
                }}：{{ orderDetail?.cancelReason || '' }}
              </view>
            </view>
          </template>
        </template>
        <template v-else>
          <view class="flex items-center mb-18rpx">
            <image v-if="orderStatus === OrderStatus.HAS_PENDING_PAYMENT" class="w-42rpx h-42rpx shrink-0 mr-12rpx"
                   src="@img/chef/202.png"></image>
            <image v-else class="w-42rpx h-42rpx shrink-0 mr-12rpx" src="@img/chef/201.png"></image>
            <view class="!text-36rpx !text-#333 font-500">
              <template v-if="orderStatus === OrderStatus.HAS_PENDING_PAYMENT">
                {{ t('pages-user.order.status.pendingPayment') }}
              </template>
              <template v-if="orderStatus === OrderStatus.MERCHANT_ACCEPTED">
                {{ t('pages-user.order.status.merchantAccepted') }}
              </template>
              <template v-if="orderStatus === OrderStatus.DELIVERING">{{
                  t('pages-user.order.status.delivering')
                }}
              </template>
              <template v-if="orderStatus === OrderStatus.COMPLETED">{{
                  t('pages-user.order.status.completed')
                }}
              </template>
              <template v-if="orderStatus === OrderStatus.MERCHANT_REJECTED">
                <view class="text-28rpx text-#333 font-bold">{{ t('pages-user.order.status.merchantRejected') }}</view>
                <view class="text-24rpx text-#666">{{ t('pages-user.order.status.merchantRejectedDesc') }}</view>
              </template>
            </view>
          </view>
          <view class="!text-24rpx !text-#999">
            <template v-if="orderStatus === OrderStatus.HAS_PENDING_PAYMENT">
              {{ t('pages-user.order.status.waitingForOrder') }}
            </template>
            <template v-if="orderStatus === OrderStatus.MERCHANT_ACCEPTED">
              {{ t('pages-user.order.status.merchantAcceptedDesc') }}
            </template>
            <template v-if="orderStatus === OrderStatus.DELIVERING">{{
                t('pages-user.order.status.deliveringDesc')
              }}
            </template>
            <template v-if="orderStatus === OrderStatus.COMPLETED">{{
                t('pages-user.order.status.completedDesc')
              }}
            </template>
          </view>
        </template>
      </view>


      <!-- 警告提示框 -->
      <view v-if="orderDetail?.orderRemark"
            class="bg-#FFF0E8 border-2rpx border-#FF7112 border-solid text-28rpx lh-28rpx rounded-16rpx px-24rpx py-36rpx flex items-start mt-28rpx mb-20rpx">
        <view class="text-#333 shrink-0">{{ t('pages-user.order.remark') }}</view>
        <view class="text-#FF6106 ml-10rpx">{{
            orderDetail?.orderRemark
          }}
        </view>
      </view>

      <!-- 配送地址卡片 -->
      <!-- 配送订单 -->
      <template v-if="orderDetail?.receiveMethod === 1">
        <view class="bg-white rounded-16rpx pt-34rpx mb-20rpx">
          <view class="px-24rpx border-bottom pb-36rpx">
            <!-- 配送地址标题 -->
            <text class="text-28rpx text-#333333">{{ t('pages-user.order.deliveryAddress') }}</text>

            <!-- 地址信息区域 -->
            <view class="mt-22rpx">
              <!-- 位置图标 -->
              <view class="flex items-center">
                <image class="w-40rpx h-40rpx shrink-0 mr-10rpx" src="@img/chef/200.png"></image>
                <view class="mb-6rpx">
                  <text class="text-28rpx text-#333333 font-normal">
                    {{ orderDetail?.userVo?.firstName }} {{ orderDetail?.userVo?.surname }}
                    {{ orderDetail?.userVo?.areaCode }} {{ orderDetail?.userVo?.phone }}
                  </text>
                </view>
              </view>

              <!-- 地址详情 -->
              <view class="leading-31rpx">
                <text class="text-26rpx text-#666666">
                  {{ orderDetail?.merchantOrderUserAddressVo?.formattedAddress }}
                  {{ orderDetail?.merchantOrderUserAddressVo?.displayName }}
                </text>
              </view>
            </view>
          </view>

          <!-- 操作按钮区域 -->
          <view class="flex justify-between h-90rpx">
            <!-- 电话联系 -->
            <view class="center h-full w-full border-r-1rpx border-r-solid border-r-#DEDEDE" @click="makeCall">
              <image class="w-40rpx h-40rpx shrink-0 mr-16rpx" src="@img/chef/205.png"></image>
              <text class="text-24rpx text-#333333 font-normal">{{ t('pages-user.order.phoneContact') }}</text>
            </view>

            <!-- 导航 -->
            <view class="center w-full w-full" @click="navigateToAddress">
              <image class="w-40rpx h-40rpx shrink-0 mr-16rpx" src="@img/chef/204.png"></image>
              <text class="text-24rpx text-#333333 font-normal">{{ t('pages-user.order.mapNavigation') }}</text>
            </view>
          </view>
        </view>
      </template>

      <!-- 自取已隐藏：自取订单信息卡片 -->
      <template v-if="false">
        <view class="bg-white rounded-16rpx p-24rpx mb-20rpx flex-center-sb">
          <view class="flex items-center text-28rpx text-#333">
            <text>{{ t('pages-user.order.pickUp') }}:</text>
            <image :src="orderDetail?.userVo?.avatar" class="w-68rpx h-68rpx shrink-0 ml-10rpx mr-20rpx"></image>
            <text class="mr-24rpx">{{ orderDetail?.userVo?.firstName }} {{ orderDetail?.userVo?.surname }}</text>
            <text>{{ orderDetail?.phone }}</text>
          </view>
          <image class="w-60rpx h-60rpx shrink-0" src="@img/chef/206.png" @click="makeCall"></image>
        </view>
      </template>

      <!-- 送达时间 -->
      <view
          class="mb-20rpx bg-white px-24rpx h-160rpx rounded-16rpx flex flex-col items-start justify-center text-28rpx text-#333333">
        <text class="mb-32rpx">{{ t('pages-user.order.deliveryTime') }}</text>
        <text class="">{{ formatDateTimeRange(orderDetail?.startScheduledTime, orderDetail?.endScheduledTime) }}</text>
      </view>

      <!-- 商品信息卡片 -->
      <view class="w-690rpx bg-white rounded-16rpx p-24rpx mb-30rpx">
        <!-- 商品信息标题 -->
        <view class="mb-34rpx">
          <text class="text-28rpx text-#333333 font-normal">{{ t('pages-user.order.productInfo') }}</text>
        </view>


        <template v-for="item in showDishList">
          <!-- 商品 -->
          <view class="flex items-center gap-24rpx mb-34rpx last:mb-0">
            <image :src="item.merchantDishVo?.dishImage?.split(',')[0]" class="w-120rpx h-120rpx rounded-16rpx shrink-0"
                   mode="aspectFill">
            </image>

            <view class="flex-1 h-120rpx">
              <text class="text-28rpx text-#333333 font-normal block line-clamp-1">
                {{ item.merchantDishVo?.dishName }}
              </text>
              <text class="text-24rpx text-#7D7D7D font-normal line-clamp-1">
                {{ item.merchantSideDishVo?.sideDishName }} {{ item.merchantSideDishItemVo?.name }}
              </text>
              <view class="flex-center-sb">
                <text class="text-30rpx text-#333333 font-500">${{ item.merchantDishVo?.discountPrice }}</text>
                <text class="text-28rpx text-#333333 font-500">X{{ item.count }}</text>
              </view>
            </view>
          </view>
        </template>
        <!-- 展开收起按钮 -->
        <view v-if="orderDetail?.merchantOrderDishVoList?.length > 3" class="mt-34rpx center" @click="toggleExpand">
          <view class="w-262rpx h-50rpx bg-#F4F4F4 center rounded-4rpx">
            <text class="text-22rpx text-#666 font-normal">
              {{ isExpanded ? t('pages-user.order.collapse') : t('pages-user.order.expand') }}
              ({{ t('pages-user.order.total') }}{{
                orderDetail?.merchantOrderDishVoList.length
              }}{{ t('pages-user.order.items') }})
            </text>
            <image
                :class="{ 'rotate-180': isExpanded }"
                class="w-20rpx h-20rpx shrink-0 ml-4rpx transition-transform duration-300"
                src="@img/chef/210.png"
            ></image>
          </view>
        </view>

        <!-- 订单总计 -->
        <view class="mt-32rpx border-t-1rpx">
          <view class="flex justify-between mb-16rpx text-30rpx text-#333333 font-normal">
            <text class="">{{ t('pages.order.subtotal') }}</text>
            <text class="">${{ orderDetail?.actualPrice }}</text>
          </view>
          <view class="flex justify-between mb-16rpx text-30rpx text-#333333 font-normal">
            <view class="flex items-center">
              <text class="">{{ t('pages.order.taxesAndFees') }}</text>
              <image class="w-28rpx h-28rpx shrink-0 ml-10rpx" src="@img/chef/207.png" @click="openPriceDetail"></image>
            </view>
            <view class="flex items-center gap-16rpx">
              <text class="">${{
                  (Number(orderDetail?.tax) + Number(orderDetail?.tip) + Number(orderDetail?.deliveryFee)).toFixed(2)
                }}
              </text>
            </view>
          </view>
          <view class="flex justify-between  text-30rpx text-#333333 font-normal">
            <text class="">{{ t('pages.order.total') }}</text>
            <text class="">${{ orderDetail?.paidAmount }}</text>
          </view>
        </view>
      </view>

      <!-- 订单信息卡片 -->
      <view class="bg-white rounded-16rpx pt-32rpx mb-30rpx text-28rpx text-#333333 font-normal">
        <!-- 订单信息标题 -->
        <view class="flex items-center mb-30rpx">
          <view class="bg-#FF7112 w-10rpx h-30rpx mr-14rpx"></view>
          <text class="">{{ t('pages-user.order.orderInfo') }}</text>
        </view>

        <!-- 订单详情 -->
        <view class="px-24rpx">
          <view class="flex-center-sb h-88rpx border-top border-bottom">
            <text class="text-28rpx text-#333333 font-normal">{{ t('pages-user.order.orderNumber') }}</text>
            <view class="flex items-center" @click="copyOrderNumber(orderDetail?.orderNo)">
              <text class="text-28rpx text-#333333 font-normal">{{ orderDetail?.orderNo }}</text>
              <image class="w-24rpx h-24rpx shrink-0 ml-16rpx" src="@img/chef/1340.png"></image>
            </view>
          </view>

          <view class="flex-center-sb h-88rpx border-bottom">
            <text class="text-28rpx text-#333333 font-normal">{{ t('pages-user.order.createTime') }}</text>
            <text class="text-28rpx text-#333333 font-normal">{{
                formatTimestampWithMonthName(orderDetail?.createTime)
              }}
            </text>
          </view>

          <view class="flex-center-sb h-88rpx border-bottom">
            <text class="text-28rpx text-#333333 font-normal">{{ t('pages-user.order.payTime') }}</text>
            <text class="text-28rpx text-#333333 font-normal">{{
                formatTimestampWithMonthName(orderDetail?.payTime)
              }}
            </text>
          </view>

          <view class="flex-center-sb h-88rpx">
            <text class="text-28rpx text-#333333 font-normal">{{ t('pages-user.order.payMethod') }}</text>
            <text class="text-28rpx text-#333333 font-normal">
              {{
                orderDetail?.payMethod === 1 ? t('pages-user.order.creditCardPayment') : t('pages-user.order.balancePayment')
              }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <!-- 主要内容区域 -->


    <!-- 订单取消状态 -->
    <template
        v-if="+orderDetail?.refundStatus === OrderCancelStatus.APPLIED || +orderDetail?.refundStatus === OrderCancelStatus.APPROVED">
      <template v-if="+orderDetail?.refundStatus === OrderCancelStatus.APPLIED">
        <view class="">
          <view :style="[configStore.iosSafeBottomPlaceholder]" class="h-118rpx"></view>
          <view :style="[{
                  position: 'fixed',
                  bottom: '0',
                  left: '0',
                  right: '0',
                }]" class="z-1 bg-#fff shadow-[0rpx_-6rpx_24rpx_rgba(0,0,0,0.16)]">
            <view class="h-118rpx p-[10rpx+30rpx] box-border flex-center-sb gap-22rpx">
              <wd-button
                  block
                  custom-class="!border-#666666 !border-solid !border-1rpx w-full  !h-98rpx !text-30rpx !text-#333 !lh-42rpx !font-bold !rounded-20rpx !bg-white"
                  @click="agreeOrder">
                {{ t('common.agree') }}
              </wd-button>
              <wd-button block
                         custom-class="w-full !h-98rpx !text-30rpx !lh-42rpx !font-bold !rounded-20rpx !bg-#14181B"
                         @click="refuseOrder">
                {{ t('common.reject') }}
              </wd-button>
            </view>
            <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
          </view>
        </view>
      </template>
    </template>
    <template v-else>
      <!-- 配送订单 -->
      <template v-if="orderDetail?.receiveMethod === 1">
        <!-- 待接单 -->
        <template v-if="orderStatus === OrderStatus.HAS_PENDING_PAYMENT">
          <view class="">
            <view :style="[configStore.iosSafeBottomPlaceholder]" class="h-118rpx"></view>
            <view :style="[{
                  position: 'fixed',
                  bottom: '0',
                  left: '0',
                  right: '0',
                }]" class="z-1 bg-#fff shadow-[0rpx_-6rpx_24rpx_rgba(0,0,0,0.16)]">
              <view class="h-118rpx p-[10rpx+30rpx] box-border flex-center-sb gap-22rpx">
                <wd-button block
                           custom-class="w-full !h-98rpx !text-30rpx !lh-42rpx !font-bold !rounded-20rpx !bg-#14181B"
                           @click="startReceiving">
                  {{ t('pages-user.order.receiving') }}
                </wd-button>
                <wd-button
                    block
                    custom-class="!border-#666666 !border-solid !border-1rpx w-full  !h-98rpx !text-30rpx !text-#333 !lh-42rpx !font-bold !rounded-20rpx !bg-white"
                    @click="rejectStartOrder">
                  {{ t('common.reject') }}
                </wd-button>
              </view>
              <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
            </view>
          </view>
        </template>
        <!-- 已接单 -->
        <template v-if="orderStatus === OrderStatus.MERCHANT_ACCEPTED">
          <fixed-bottom-large-btn
              :text="t('pages-user.order.startDelivery')"
              class="z-100"
              fixed
              @click="startDeliveryFun"
          />
        </template>
        <!-- 配送中 -->
        <template v-if="orderStatus === OrderStatus.DELIVERING">
          <fixed-bottom-large-btn
              :text="t('pages-user.order.delivered')"
              class="z-100"
              fixed
              @click="deliveredOrder"
          />
        </template>
        <!-- 已评价 -->
        <template v-if="orderStatus === OrderStatus.COMPLETED && orderDetail?.dishReviewVoList.length > 0">
          <view class="w-full">
            <view :style="[configStore.iosSafeBottomPlaceholder]" class="h-118rpx"></view>
            <view :style="[{
      position: 'fixed',
      bottom: '0',
      left: '0',
      right: '0',
    }]" class="z-1 bg-#fff shadow-[0rpx_-6rpx_24rpx_rgba(0,0,0,0.16)] w-screen">
              <view class="w-full h-118rpx p-[10rpx+30rpx] box-border">
                <wd-button
                    block
                    custom-class="!border-#666666 !border-solid !border-1rpx !h-98rpx !text-30rpx !text-#333 !lh-42rpx !rounded-20rpx !bg-white"
                    @click="navigateTo('/pages-user/pages/order/order-reviews?id=' + orderId)">
                  {{ t('pages-user.order.viewReview') }}
                </wd-button>
              </view>
              <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
            </view>
          </view>
        </template>
      </template>
      <!-- 自取已隐藏：自取订单底部操作按钮 -->
      <template v-if="false">
        <template v-if="orderStatus === OrderStatus.HAS_PENDING_PAYMENT">
          <view class="">
            <view :style="[configStore.iosSafeBottomPlaceholder]" class="h-118rpx"></view>
            <view :style="[{
                  position: 'fixed',
                  bottom: '0',
                  left: '0',
                  right: '0',
                }]" class="z-1 bg-#fff shadow-[0rpx_-6rpx_24rpx_rgba(0,0,0,0.16)]">
              <view class="h-118rpx p-[10rpx+30rpx] box-border flex-center-sb gap-22rpx">
                <wd-button block
                           custom-class="w-full !h-98rpx !text-30rpx !lh-42rpx !font-bold !rounded-20rpx !bg-#14181B"
                           @click="startReceiving">
                  {{ t('pages-user.order.receiving') }}
                </wd-button>
                <wd-button
                    block
                    custom-class="!border-#666666 !border-solid !border-1rpx w-full  !h-98rpx !text-30rpx !text-#333 !lh-42rpx !font-bold !rounded-20rpx !bg-white"
                    @click="rejectStartOrder">
                  {{ t('common.reject') }}
                </wd-button>
              </view>
              <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
            </view>
          </view>
        </template>
        <template v-if="orderStatus === OrderStatus.MERCHANT_ACCEPTED">
          <fixed-bottom-large-btn
              :text="t('pages-user.order.writeOff')"
              class="z-100"
              fixed
              @click="writeOff"
          />
        </template>
      </template>
    </template>
    <!-- 拒绝取消订单 -->
    <refuse-popup ref="refusePopup" @close="appMerchantOrderDetail"/>
    <!-- 价格详情 -->
    <price-detail ref="priceDetailRef"/>
    <!-- 配送员信息 -->
    <start-delivery ref="startDeliveryRef" @submit="submitDelivery"/>
  </view>
</template>

<style>
page {
  background-color: #F6F6F6;
}
</style>