<script setup lang="tsx">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// import { NFlex } from 'naive-ui';
import { NDataTable } from 'naive-ui';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import {
  fetchDeliveryNode,
  fetchDeliveryOrder,
  fetchExpressDeliveryList,
  fetchGetNomalOrderInfo
} from '@/service/api/order-manage/normal-order';
import { useModalFrom } from '@/components/zt/ModalForm/hooks/useModalForm';
// import { useAppStore } from '@/store/modules/app';
// import { copyTextToClipboard } from '@/utils/zt';
import {
  businessType,
  cancelState,
  chargeMethod,
  dvyStatus,
  orderColumns,
  orderDJKColumns,
  orderDJKLogColumns,
  orderShipColumns,
  orderStatus,
  orderStatusEnum,
  payType,
  yppStatus,
  yppStatusEnum
} from '../normal-order/normal-order';
const orderInfo = ref<Api.delivery.deliveryOrder>();
// const appStore = useAppStore();
const TimeDown = ref<number>(0);
dayjs.extend(duration);
const route = useRoute();
const router = useRouter();
const deliveryNode = ref<any[]>([]);
const [
  registerModalForm,
  {
    openModal: openModalForm,
    setFieldsValue: setModalFormValue,
    getFieldsValue: getModalFormValue,
    closeModal: closeModalForm,
    setSubLoading
  }
] = useModalFrom({
  modalConfig: {
    title: '订单发货',
    isShowHeaderText: false,
    width: 1000,
    height: 700
  },
  formConfig: {
    schemas: [
      {
        field: 'orderNumber',
        label: '',
        component: 'NInput',
        render: () => {
          return (
            <div>
              <div class="py-20px font-semibold">商品信息</div>
              <NDataTable columns={orderShipColumns} data={orderInfo.value?.orderItemList} bordered={false} />

              <div class="py-20px font-semibold">订单信息</div>
              <div>配送方式：{dvyStatus[orderInfo.value?.dvyType as keyof typeof dvyStatus]}</div>
              <div>收货人姓名：{orderInfo.value?.consigneeName}</div>
              <div>收货人手机号：{orderInfo.value?.consigneeMobile}</div>
              <div>收货地址：{orderInfo.value?.consigneeAddress}</div>
            </div>
          );
        }
      },
      {
        field: 'orderNumber',
        label: '单号',
        component: 'NInput',
        show: false
      },

      {
        field: 'deliveryType',
        component: 'NRadioGroup',
        label: '发货方式',
        required: true,
        defaultValue: 1,
        componentProps: {
          options: [
            {
              label: '快递',
              value: 0
            },
            {
              label: '其他',
              value: 1
            }
          ]
        }
      },
      {
        label: '快递公司',
        field: 'dvyId',
        required: true,
        component: 'ApiSelect',
        componentProps: {
          api: fetchExpressDeliveryList,
          labelFeild: 'name',
          valueFeild: 'id'
        },

        ifShow({ model }) {
          return model.deliveryType === 0;
        }
      },
      {
        field: 'dvyFlowId',
        label: '快递单号',
        required: true,
        component: 'NInput',

        ifShow({ model }) {
          return model.deliveryType === 0;
        }
      },
      {
        field: 'remark',
        label: '备注',
        required: true,
        component: 'NInput',
        ifShow({ model }) {
          return model.deliveryType === 1;
        }
      }
    ],
    labelWidth: 80,
    layout: 'horizontal',
    gridProps: {
      cols: '1',
      itemResponsive: true
    }
  }
});

async function open(orderNumber: string) {
  const { data, error } = await fetchGetNomalOrderInfo(orderNumber);
  if (!error) {
    orderInfo.value = data;
    if (orderInfo.value.hbOrderStatus == orderStatusEnum.WAIT_PAY) {
      const createTime = dayjs(orderInfo.value.createTime);
      const currentTime = dayjs();
      const elapsed = currentTime.diff(createTime);
      const fifteenMinutesInMillis = 15 * 60 * 1000;
      TimeDown.value = fifteenMinutesInMillis - elapsed;
    } else if (
      orderInfo.value.hbOrderStatus !== orderStatusEnum.ORDER_DELIVERY &&
      orderInfo.value.businessType == 'XSB'
    ) {
      getDeliveryNode();
    }
  }
}
console.log(route.query.orderNumber);
async function getDeliveryNode() {
  const { data, error } = await fetchDeliveryNode({ orderNumber: String(route.query.orderNumber) });

  if (!error) {
    deliveryNode.value = data;
    console.log(data, '节点信息');
  }
}

defineExpose({ open });

// const isRefund = computed(() => {
//   const goodsData = orderInfo.value?.orderItems?.find(it => it.refundIngCount == 1);
//   return Boolean(goodsData);
// });

// const currentSteps = computed(() => {
//   switch (orderInfo.value?.hbOrderStatus) {
//     case orderStatusEnum.WAIT_PAY:
//       return 1;
//     case orderStatusEnum.ORDER_ACCEPT:
//       return 2;
//     case orderStatusEnum.ORDER_WAIT_DELIVE RY:
//       return 2;
//     case orderStatusEnum.WAIT_DELIVERY:
//       return 2;
//     case orderStatusEnum.ORDER_DELIVERY:
//       return 3;
//     case orderStatusEnum.ORDER_ARRIVE:
//       return 3;
//     case orderStatusEnum.ORDER_COMPLETE:
//       return 4;
//     default:
//       return 1;
//   }
// });
// function handleCopy(value: string | number | undefined) {
//   copyTextToClipboard(String(value));
//   // copyTextToClipboard(String(orderInfo.value?.orderNumber));
// }
function secondsToTime(seconds: number) {
  // 创建 duration 对象
  const time = dayjs.duration(seconds, 'seconds');

  // 获取时分秒
  const hours = Math.floor(seconds / 3600);
  const minutes = time.minutes();
  const secs = time.seconds();

  // 格式化为两位数字符串
  const formatTime = (num: number) => num.toString().padStart(2, '0');

  if (hours > 0) {
    return `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(secs)}`;
  }
  return `00:${formatTime(minutes)}:${formatTime(secs)}`;
}

function handleShip() {
  openModalForm();
  setModalFormValue({
    orderNumber: orderInfo.value?.orderNumber,
    dvyId: orderInfo.value?.dvyId,
    dvyFlowId: orderInfo.value?.dvyFlowId,
    deliveryType: orderInfo.value?.deliveryType || 0,
    remark: orderInfo.value?.dvyName
  });
}

async function handleSubmit() {
  const form = await getModalFormValue();
  if (form.deliveryType == 0) {
    delete form.remark;
  } else {
    delete form.dvyId;
    delete form.dvyFlowId;
  }
  console.log(form, '表单');
  const { error } = await fetchDeliveryOrder(form);
  if (!error) {
    window.$message?.success('保存成功');
  }
  setSubLoading(false);
  closeModalForm();
  open(String(route.query.orderNumber));
}

function handleFinish() {
  open(String(orderInfo.value?.orderNumber));
}

function filterStatus(val: number) {
  if (val == 0) {
    return '待支付';
  } else if (val == 70 || val == 80 || val == 61) {
    return '已完成';
  } else if (val == 60 || val == 62) {
    return '已取消';
  }
  return '进行中';
}
// 证件类型，0 身份证 1 学生证 2 军官证 3 护照 4 户口本(儿童请选择此项) 5 港澳通行证 6 台湾居民来往大陆通行证 7 台湾通行证 8 入台证 9 香港居民往来内地通行证 10 警官证 11 驾驶证 12 海员证 13 外国人在中国永久居留证 14澳门居民往来内地通行证 15港澳居民来往内地通行证 16港澳台居民来往内地通行证 17港澳台居民居住证 18中华人民共和国旅行证 19回乡证 20台胞证 21香港身份证
function filterType(val: number) {
  const typeObj = {
    0: '身份证',
    1: '学生证',
    2: '军官证',
    3: '护照',
    4: '户口本',
    5: '港澳通行证',
    6: '台湾居民来往大陆通行证',
    7: '台湾通行证',
    8: '入台证',
    9: '港澳居民往来内地通行证',
    10: '警官证',
    11: '驾驶证',
    12: '海员证',
    13: '外国人在中国永久居留证',
    14: '澳门居民往来内地通行证',
    15: '港澳居民来往内地通行证',
    16: '港澳台居民来往内地通行证',
    17: '港澳台居民居住证',
    18: '中华人民共和国旅行证',
    19: '回乡证',
    20: '台胞证',
    21: '香港身份证'
  };
  return typeObj[val as keyof typeof typeObj];
}

function handleSaleOrder(row: Api.delivery.deliveryOrder) {
  if (!row.orderNumber) {
    window.$message?.error('订单异常');
  }
  router.push({
    path: '/order-manage/after-sales-order',
    query: {
      orderNumber: row.orderNumber
    }
  });
}
onMounted(async () => {
  await open(String(route.query.orderNumber));
  if (route.query.type == 'ship') {
    handleShip();
  }
});
function getRefundRecordCount() {
  const info = orderInfo.value as any;
  if (!info) return 0;
  return (
    Number(info.backendOrderRefundLogCount) ||
    (Array.isArray(info.refundOrderList) ? info.refundOrderList.length : 0) ||
    0
  );
}

function getRefundRecordText() {
  const count = getRefundRecordCount();
  return count > 0 ? `${count}条` : '暂无';
}
</script>

<template>
  <div>
    <div v-if="orderInfo" class="flex">
      <div class="mr-20px w-300px">
        <div class="mb-10px text-16px font-semibold">
          统一状态：
          <template v-if="orderInfo.businessType != 'DYY'">
            {{ filterStatus(orderInfo.hbOrderStatus) }}
          </template>
          <template v-else>
            {{ yppStatus[orderInfo.yppDetail?.orderState as keyof typeof yppStatus] }}
          </template>
        </div>
        <NCard size="small" title="订单概览" :bordered="false">
          <div>订单编号：{{ orderInfo.orderNumber }}</div>
          <div>
            业务类型：{{ businessType[orderInfo.businessType as keyof typeof businessType] || orderInfo.businessType }}
          </div>
          <div>
            订单状态：
            <template v-if="orderInfo.businessType != 'DYY'">
              {{
              orderInfo.hbOrderStatus == 20 ||
              orderInfo.hbOrderStatus == 30 ||
              orderInfo.hbOrderStatus == 40 ||
              orderInfo.hbOrderStatus == 1
              ? '进行中'
              : orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus]
              }}
            </template>
            <template v-else>
              {{ yppStatus[orderInfo.yppDetail?.orderState as keyof typeof yppStatus] }}
            </template>
          </div>
          <div>订单金额：{{ orderInfo.orderMoney }}</div>

          <div>订单创建：{{ orderInfo?.createTime || '暂无' }}</div>
          <div>创建人：用户自助下单</div>
          <div>备注：{{ orderInfo?.remarks || '暂无' }}</div>
        </NCard>
        <NCard size="small" class="mt-20px" title="客户信息" :bordered="false">
          <div>客户姓名：{{ orderInfo?.consigneeName || '---' }}</div>
          <div>客户手机号：{{ orderInfo?.consigneeMobile || '---' }}</div>
          <div>客户地址：{{ orderInfo?.dvyType == 2 ? '自提' : orderInfo?.consigneeAddress || '---' }}</div>
          <div>用户昵称：{{ orderInfo.userName || '---' }}</div>
          <div>用户电话：{{ orderInfo.consigneeMobile }}</div>
          <div>企业身份：{{ orderInfo.channelName || '---' }}</div>
          <div>会员等级：{{ orderInfo.level || '---' }}</div>
          <div>分销等级：{{ orderInfo.level || '---' }}</div>
        </NCard>
        <NCard size="small" class="mt-20px" title="支付信息" :bordered="false">
          <div>支付状态：{{ orderInfo.isPayed ? '已支付' : '未支付' }}</div>
          <div v-if="orderInfo.businessType == 'JY'">支付金额：{{ orderInfo.omsOrderOilVO?.realMoney || '---' }}元</div>

          <div v-else>支付金额：{{ orderInfo.actualTotal }}元</div>
          <div>
            付款方式：{{
              orderInfo.hbOrderStatus == orderStatusEnum.WAIT_PAY ||
              orderInfo.hbOrderStatus == orderStatusEnum.ORDER_CANCEL
                ? '暂无'
                : '微信'
            }}
          </div>
          <div>支付时间：{{ orderInfo.payTime || '暂无' }}</div>
          <div>交易号：{{ orderInfo.outTradeNo || '---' }}</div>
          <!--
 <div>
            退款记录：{{ orderInfo.refundOrderList ? orderInfo.refundOrderList.length : '暂无' }}
            <NButton
              v-if="orderInfo.refundOrderList && orderInfo.refundOrderList.length > 0"
              size="small"
              quaternary
              type="primary"
              @click="handleSaleOrder(orderInfo)"
            >
              查看
            </NButton>
          </div>
-->
          <div class="flex items-center">
            <span>退款记录：{{ getRefundRecordText() }}</span>
            <!-- v-if="getRefundRecordCount() > 0" -->
            <NButton
              v-if="
                Number(orderInfo.backendOrderRefundLogCount) ||
                (orderInfo.refundOrderList && orderInfo.refundOrderList.length > 0)
              "
              size="small"
              quaternary
              type="primary"
              @click="handleSaleOrder(orderInfo)"
            >
              查看详情
            </NButton>
          </div>
        </NCard>
      </div>
      <div class="flex-1">
        <div class="flex justify-between">
          <div class="flex">
            <div class="mb-10px text-16px font-semibold">
              业务状态：
              <template v-if="orderInfo.businessType != 'DYY'">
                {{ orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus] }}
                {{ orderInfo.deliveryType && orderInfo.deliveryType == 1 ? '(已发货 其他方式)' : '' }}
              </template>
              <template v-else>
                {{ yppStatus[orderInfo.yppDetail?.orderState as keyof typeof yppStatus] }}
              </template>
            </div>
            <div v-if="orderInfo.hbOrderStatus == orderStatusEnum.WAIT_PAY" class="text-gray">
              如买家未在
              <NTag :type="TimeDown > 300094 ? 'success' : 'error'">
                <NCountdown :duration="TimeDown" @finish="handleFinish" />
              </NTag>
              内付款，订单将 自动关闭。
            </div>
            <div v-else class="mb-10px ml-20px text-16px font-semibold">
              第三方订单编号：{{ orderInfo.thirdOrderId }}
            </div>
          </div>

          <!--
 <NButton v-if="orderInfo.dvyType === 10 && orderInfo.hbOrderStatus === 40" size="small" type="primary"
            @click="handleShip">
            {{ orderInfo.dvyNo ? '修改发货信息' : '发货' }}
          </NButton>
-->

          <NButton
            v-if="orderInfo.dvyType === 10 && orderInfo.hbOrderStatus === 40 && !orderInfo.dvyNo"
            class="mt-10px"
            size="small"
            type="primary"
            ghost
            @click="handleShip"
          >
            发货
          </NButton>
          <NButton
            v-if="
              orderInfo.dvyType === 10 &&
              (orderInfo.hbOrderStatus === 40 || orderInfo.hbOrderStatus === 70) &&
              orderInfo.dvyNo
            "
            class="mt-10px"
            size="small"
            type="primary"
            ghost
            @click="handleShip"
          >
            修改发货信息
          </NButton>
        </div>
        <NCard size="small" title="业务信息" :bordered="false">
          <template v-if="orderInfo.businessType == 'XSB'">
            <div class="pb-20px font-semibold">01 商家信息</div>
            <div>门店名称：{{ orderInfo.shopName || '暂无' }}</div>
            <div>门店地址：{{ orderInfo.shopAddress || '暂无' }}</div>
            <div>联系电话：{{ orderInfo.tel || '暂无' }}</div>
            <div class="py-20px font-semibold">02 商品&费用</div>
            <NDataTable :columns="orderColumns" :data="orderInfo.orderItemList" :bordered="false" />

            <NTable class="mt-20px" :single-line="false">
              <NThead>
                <NTr>
                  <NTh>费用类型</NTh>
                  <NTh>金额/元</NTh>
                  <NTh>备注</NTh>
                </NTr>
              </NThead>
              <NTbody>
                <NTr>
                  <NTd>商品总额</NTd>
                  <NTd>{{ orderInfo.total }}</NTd>
                  <NTd></NTd>
                </NTr>
                <NTr v-if="orderInfo.dvyType !== 2">
                  <NTd>配送费（快递）</NTd>
                  <NTd>{{ orderInfo.freightAmount }}</NTd>
                  <NTd></NTd>
                </NTr>
                <NTr v-if="orderInfo.memberDiscountAmount">
                  <NTd>{{ orderInfo.memberDiscountDesc }}</NTd>
                  <NTd>-{{ orderInfo.memberDiscountAmount }}</NTd>
                </NTr>
                <NTr v-if="orderInfo.couponBaseInfoDTO">
                  <NTd>优惠券</NTd>
                  <NTd>-{{ orderInfo.couponBaseInfoDTO?.discountMoney || 0 }}</NTd>
                  <NTd>{{ orderInfo.couponBaseInfoDTO?.allowanceId }}</NTd>
                </NTr>
                <NTr>
                  <NTd>积分</NTd>
                  <NTd>-{{ (Number(orderInfo.offsetPoints) / 100).toFixed(2) || 0 }}</NTd>
                  <NTd></NTd>
                </NTr>
                <NTr>
                  <NTd v-if="orderInfo.hbOrderStatus == orderStatusEnum.WAIT_PAY">需付款</NTd>
                  <NTd
                    v-if="
                      orderInfo.hbOrderStatus != orderStatusEnum.WAIT_PAY &&
                      orderInfo.hbOrderStatus != orderStatusEnum.ORDER_CANCEL
                    "
                  >
                    实际付款
                  </NTd>
                  <NTd v-if="orderInfo.hbOrderStatus == orderStatusEnum.ORDER_CANCEL">应付款</NTd>
                  <NTd>{{ orderInfo.actualTotal }}</NTd>
                </NTr>
              </NTbody>
            </NTable>

            <template v-if="orderInfo.dvyType == 3 && orderInfo.hbOrderStatus != orderStatusEnum.WAIT_PAY">
              <div class="py-20px font-semibold">03 订单追踪</div>
              <div v-if="orderInfo.deliveryType == 1">信息记录：{{ orderInfo.dvyName || '暂无' }}</div>
              <NTimeline v-else>
                <NTimelineItem
                  v-for="(item, index) in deliveryNode"
                  :key="item.id"
                  :type="index == 0 ? 'success' : undefined"
                  :content="item.content"
                  :time="item.updateTime"
                />
              </NTimeline>
            </template>
            <template v-else-if="orderInfo.dvyType == 2">
              <div class="py-20px font-semibold">03 自提信息</div>
              <div>预留电话：{{ orderInfo.consigneeMobile || '---' }}</div>
              <div>自提点：{{ orderInfo.consigneeAddress || '---' }}</div>
              <template
                v-if="
                  orderInfo.hbOrderStatus == orderStatusEnum.ORDER_WAIT_DELIVERY ||
                  orderInfo.hbOrderStatus == orderStatusEnum.ORDER_COMPLETE
                "
              >
                <div>自提核验码：{{ orderInfo.selfPickCode || '---' }}</div>
                <div>核验状态：{{ orderInfo.isWriteOff == 1 ? '待核销' : '已核销' }}</div>
                <div>核验时间：{{ orderInfo.completeTime || '---' }}</div>
              </template>
            </template>
          </template>
          <template v-else-if="orderInfo.businessType == 'DYY'">
            <div class="pb-20px font-semibold">01 影片与场次信息</div>
            <div>影片名称：{{ orderInfo.yppDetail?.movieName || '暂无' }}</div>
            <div class="flex items-center justify-between">
              <div>影院名称：{{ orderInfo.yppDetail?.cinemaName || '--' }}</div>
              <div>影厅：{{ orderInfo.yppDetail?.hallName || '--' }}</div>
            </div>
            <div class="flex items-center justify-between">
              <div>放映时间：{{ orderInfo.yppDetail?.sessionBeginTime || '--' }}</div>
              <div>结束时间：{{ orderInfo.yppDetail?.sessionEndTime || '--' }}</div>
            </div>
            <div class="flex items-center justify-between">
              <div>版本类型：{{ orderInfo.yppDetail?.movieVersion || '--' }}</div>
              <div>语言：{{ orderInfo.yppDetail?.movieVersion || '--' }}</div>
            </div>
            <div class="flex items-center justify-between">
              <div>座位信息: {{ orderInfo.yppDetail?.seatNames || '--' }}</div>
              <div>快速票：{{ orderInfo.yppDetail?.buyModel ? '是' : '否' }}</div>
            </div>
            <div class="pb-20px font-semibold">02 价格与结算信息</div>
            <div v-if="yppStatusEnum.WAIT_PAY == orderInfo.yppDetail?.orderState" class="font-semibold">
              【客户需支付信息】
            </div>
            <div
              :class="[
                yppStatusEnum.WAIT_PAY != orderInfo.yppDetail?.orderState ? 'flex items-center justify-between' : ''
              ]"
            >
              <div v-if="yppStatusEnum.WAIT_PAY != orderInfo.yppDetail?.orderState">
                <div class="font-semibold">【客户已支付信息】</div>
                <div>市场原价（单价）：￥{{ orderInfo.yppDetail?.originPrice || '--' }}</div>
                <div>原票价总价：￥{{ orderInfo.yppDetail?.totalUserPrice || '--' }}</div>
                <div>积分抵扣: ￥{{ (Number(orderInfo.offsetPoints) / 100).toFixed(2) || 0 }}</div>
                <div>客户实际支付：￥{{ orderInfo.actualTotal }}</div>
              </div>
              <template v-if="yppStatusEnum.WAIT_PAY != orderInfo.yppDetail?.orderState">
                <div>
                  <div class="font-semibold">【预存款结算信息】</div>
                  <div>企业扣款价：￥--</div>
                  <div>结算价已退金额：￥--</div>
                  <div>订单成本价：￥--</div>
                </div>
              </template>
            </div>
            <template
              v-if="
                [yppStatusEnum.SUCCESS, yppStatusEnum.REFUND_FAIL].includes(orderInfo.yppDetail?.orderState as number)
              "
            >
              <div class="pb-20px font-semibold">03 取票与退款信息</div>
              <div v-if="yppStatusEnum.SUCCESS == orderInfo.yppDetail?.orderState" class="flex flex-wrap items-center">
                <div>
                  <div>座位：{{ orderInfo.yppDetail?.seatNames }}</div>
                  <div>取票码：{{ orderInfo.yppDetail?.ticketCode || '--' }}</div>
                </div>
              </div>
              <template v-if="yppStatusEnum.REFUND_FAIL == orderInfo.yppDetail?.orderState">
                <div class="flex">
                  <div>退款金额：</div>
                  <div>
                    <div>{{ orderInfo.yppDetail?.epRefundAmount }}</div>
                    <div class="text-gray">
                      退还金额：{{ orderInfo.yppDetail?.epRefundAmount }}元 退还积分：{{ orderInfo.offsetPoints }}
                    </div>
                  </div>
                </div>
              </template>
            </template>
          </template>
          <template v-else-if="orderInfo.businessType == 'CD'">
            <div class="flex flex-wrap items-center">
              <div class="mr10px flex-shrink-0">
                <div>车牌号：{{ orderInfo.chargeOrder.plateNum || '--' }}</div>
                <div>终端编号：{{ orderInfo.chargeOrder.connectorId || '--' }}</div>
                <div>充电电站：{{ orderInfo.chargeOrder.powerStationName || '--' }}</div>
                <div>充电开始时间：{{ orderInfo.chargeOrder.startTime || '--' }}</div>
                <div>充电结束时间：{{ orderInfo.chargeOrder.endTime || '--' }}</div>
                <div>充电时长：{{ secondsToTime(Number(orderInfo.chargeOrder.chargeTime)) || '--' }}</div>
                <div>充电度数：{{ orderInfo.chargeOrder.totalPower || '--' }}</div>
                <div>
                  终止方式：{{ chargeMethod[orderInfo.chargeOrder.stopMethod as keyof typeof chargeMethod] || '--' }}
                </div>
                <div>详细地址：{{ orderInfo.chargeOrder.powerStationName?.split('-')[0] || '--' }}</div>
              </div>
              <NTable v-if="orderInfo.hbOrderStatus == orderStatusEnum.ORDER_COMPLETE" :single-line="false">
                <NThead>
                  <NTr>
                    <NTh>费用类型</NTh>
                    <NTh>金额/元</NTh>
                  </NTr>
                </NThead>
                <NTbody>
                  <NTr>
                    <NTd>电费</NTd>
                    <NTd>{{ orderInfo.chargeOrder.totalElecMoney || 0 }}</NTd>
                  </NTr>
                  <NTr>
                    <NTd>结算服务费</NTd>
                    <NTd>{{ orderInfo.chargeOrder.totalSeviceMoney || 0 }}</NTd>
                  </NTr>
                  <NTr>
                    <NTd>运营服务费</NTd>
                    <NTd>{{ orderInfo.chargeOrder.realServiceCost }}</NTd>
                  </NTr>
                  <NTr>
                    <NTd>订单金额</NTd>
                    <NTd>{{ orderInfo.orderMoney }}</NTd>
                  </NTr>
                  <NTr v-if="orderInfo.chargeOrder.memberDiscountAmount">
                    <NTd>会员权益(每度电立减{{ orderInfo.chargeOrder.memberPerKwhDiscount }}元)</NTd>
                    <NTd>-{{ orderInfo.chargeOrder.memberDiscountAmount }}</NTd>
                  </NTr>
                  <NTr>
                    <NTd>积分抵扣</NTd>
                    <!-- <NTd>{{ orderInfo.actualTotal }}</NTd> -->
                    <NTd>
                      -{{
                        (
                          Number(orderInfo?.actualTotal || 0) - Number(orderInfo?.chargeOrder?.platformVolume || 0)
                        ).toFixed(2)
                      }}
                    </NTd>
                  </NTr>
                  <NTr>
                    <NTd>平台券</NTd>
                    <NTd>-{{ Number(orderInfo?.chargeOrder?.platformVolume || 0) }}</NTd>
                  </NTr>
                </NTbody>
              </NTable>
            </div>
          </template>
          <template v-else-if="orderInfo.businessType == 'XNSP'">
            <div>商品名称：{{ orderInfo.virtualOrderItem?.productName }}</div>
            <div>充值账号：{{ orderInfo.virtualOrderItem?.rechargeAccount }}</div>
            <NTable class="mt-10px" :single-line="true">
              <NThead>
                <NTr>
                  <NTh>商品</NTh>
                  <NTh>单价/元</NTh>
                  <NTh>数量</NTh>
                  <NTh>小计/元</NTh>
                </NTr>
              </NThead>
              <NTbody>
                <NTr>
                  <NTd>{{ orderInfo.virtualOrderItem?.productName }}</NTd>
                  <NTd>{{ orderInfo.virtualOrderItem?.sellPrice }}</NTd>
                  <NTd>1</NTd>
                  <NTd>{{ orderInfo.virtualOrderItem?.sellPrice }}</NTd>
                </NTr>
                <NTr v-if="orderInfo.offsetPoints">
                  <NTd></NTd>
                  <NTd></NTd>
                  <NTd>积分抵扣</NTd>
                  <NTd>-{{ Number(orderInfo.offsetPoints) || 0 }}</NTd>
                </NTr>
              </NTbody>
            </NTable>
          </template>
          <template v-else-if="orderInfo.businessType == 'DJK'">
            <div>下单时间：{{ orderInfo.createTime || '---' }}</div>
            <div>支付方式：{{ payType[orderInfo.payType as keyof typeof payType] || '---' }}</div>
            <div>有效期：{{ orderInfo.djkOrderAttachInfo.expiredTime || '---' }}</div>
            <div class="py-20px font-semibold">订单信息</div>
            <NDataTable :columns="orderDJKColumns" :data="[orderInfo.djkOrderAttachInfo]" :bordered="false" />
            <div class="py-20px font-semibold">商品&费用</div>

            <NTable class="mt-20px" :single-line="false">
              <NThead>
                <NTr>
                  <NTh>费用类型</NTh>
                  <NTh>金额/元</NTh>
                </NTr>
              </NThead>
              <NTbody>
                <NTr>
                  <NTd>商品总额</NTd>
                  <NTd>{{ orderInfo.total }}</NTd>
                </NTr>
                <NTr>
                  <NTd>配送费（快递）</NTd>
                  <NTd>{{ orderInfo.freightAmount }}</NTd>
                </NTr>
                <NTr>
                  <NTd>积分</NTd>
                  <NTd>-{{ (Number(orderInfo.offsetPoints) / 100).toFixed(2) || 0 }}</NTd>
                </NTr>
                <NTr>
                  <NTd v-if="orderInfo.hbOrderStatus == orderStatusEnum.WAIT_PAY">需付款</NTd>
                  <NTd
                    v-if="
                      orderInfo.hbOrderStatus != orderStatusEnum.WAIT_PAY &&
                      orderInfo.hbOrderStatus != orderStatusEnum.ORDER_CANCEL
                    "
                  >
                    实际付款
                  </NTd>
                  <NTd v-if="orderInfo.hbOrderStatus == orderStatusEnum.ORDER_CANCEL">应付款</NTd>
                  <NTd>{{ orderInfo.actualTotal }}</NTd>
                </NTr>
              </NTbody>
            </NTable>

            <div class="py-20px font-semibold">操作记录</div>
            <NDataTable :columns="orderDJKLogColumns" :data="orderInfo.djkOrderLogList" :bordered="false" />
          </template>
          <template v-else-if="orderInfo.businessType == 'JY'">
            <div class="mt-20px pb-20px font-semibold">01 订单编号</div>
            <div>我方订单编号：{{ orderInfo.orderNumber || '---' }}</div>
            <div>小桔订单编号：{{ orderInfo.omsOrderOilVO?.xjOrderId || '---' }}</div>

            <div class="mt-20px pb-20px font-semibold">02 油站信息</div>
            <div>油站名称：{{ orderInfo.omsOrderOilVO?.storeName || '---' }}</div>
            <div>油站地址：{{ orderInfo.omsOrderOilVO?.address || '---' }}</div>
            <div>所在城市：{{ orderInfo.omsOrderOilVO?.cityName || '---' }}</div>

            <div class="mt-20px pb-20px font-semibold">03 加油明细</div>
            <div>油品名称：{{ orderInfo.omsOrderOilVO?.itemName || '---' }}</div>
            <div>枪号：{{ orderInfo.omsOrderOilVO?.gunNo || '---' }}</div>
            <div>加油量：{{ orderInfo.omsOrderOilVO?.quantity + 'L' || '---' }}</div>

            <div class="mt-20px pb-20px font-semibold">04 加油明细</div>
            <div>门店价：￥{{ orderInfo.omsOrderOilVO?.storePrice || '---' }}/L</div>
            <div>平台价：￥{{ orderInfo.omsOrderOilVO?.vipPrice || '---' }}/L</div>
            <div>订单金额：￥{{ orderInfo.omsOrderOilVO?.totalMoney || '---' }}</div>
            <div>抵扣金额：-￥{{ orderInfo.omsOrderOilVO?.promotionAmount || '---' }}</div>
            <div>服务费：+￥{{ orderInfo.omsOrderOilVO?.serviceFee || '---' }}</div>
            <div>实付金额：￥{{ orderInfo.omsOrderOilVO?.realMoney || '---' }}</div>

            <div class="mt-20px pb-20px font-semibold">05 抵扣信息</div>
            <div>抵扣券ID：{{ orderInfo.omsOrderOilVO?.allowanceId || '---' }}</div>
            <div>优惠描述：{{ orderInfo.omsOrderOilVO?.activityName || '---' }}</div>
          </template>
          <template v-else-if="orderInfo.businessType == 'JDMP'">
            <div>产品编号：{{ orderInfo.backendOrderScenic.productNo || '---' }}</div>
            <div>产品名称：{{ orderInfo.backendOrderScenic.productName || '---' }}</div>
            <div>景区名称：{{ orderInfo.backendOrderScenic.viewName || '---' }}</div>
            <div>
              游玩日期：{{ orderInfo.backendOrderScenic.travelDate || '---' }}
              {{ orderInfo.backendOrderScenic.endTravelDate ? '-' + orderInfo.backendOrderScenic.endTravelDate : '' }}
            </div>
            <div>备注：{{ orderInfo.backendOrderScenic.orderMemo || '---' }}</div>

            <div>联系人：{{ orderInfo.backendOrderScenic.linkMan || '---' }}</div>
            <div>联系电话：{{ orderInfo.backendOrderScenic.linkPhone || '---' }}</div>

            <div
              v-for="(item, index) in orderInfo.backendOrderScenic.omsOrderScenicPeopleList"
              :key="index"
              class="mt-10px border rounded-4px p-8px"
            >
              <div>游客姓名{{ (index as number) + 1 }}：{{ item.linkMan || '---' }}</div>
              <div>证据类型：{{ filterType(item.linkCreditType) || '---' }}</div>
              <div>证件号码：{{ item.linkCreditNo || '---' }}</div>
            </div>

            <NTable class="mt-20px" :single-line="false">
              <NThead>
                <NTr>
                  <NTh>产品</NTh>
                  <NTh>数量</NTh>
                  <NTh>金额/元</NTh>
                </NTr>
              </NThead>
              <NTbody>
                <NTr>
                  <NTd>{{ orderInfo.backendOrderScenic.productName || '---' }}</NTd>
                  <NTd>x{{ orderInfo.backendOrderScenic.num }}</NTd>
                  <NTd>{{ orderInfo.total }}</NTd>
                </NTr>
              </NTbody>
            </NTable>

            <NTable class="mt-20px" :single-line="false">
              <NThead>
                <NTr>
                  <NTh>订单金额</NTh>
                  <NTh>{{ orderInfo.backendOrderScenic.orderMoney }}</NTh>
                </NTr>
              </NThead>
              <NTbody>
                <NTr>
                  <NTd>积分抵扣</NTd>
                  <NTd>-{{ (Number(orderInfo.backendOrderScenic.offsetPoints) / 100).toFixed(2) || 0 }}</NTd>
                </NTr>
                <NTr>
                  <NTd>微信支付</NTd>
                  <NTd>{{ orderInfo.backendOrderScenic.actualTotal || 0 }}</NTd>
                </NTr>
              </NTbody>
            </NTable>

            <NTable v-if="orderInfo.backendOrderScenic.refundCreateTime" class="mt-20px" :single-line="false">
              <NThead>
                <NTr>
                  <NTh>退款信息</NTh>
                  <NTh></NTh>
                </NTr>
              </NThead>
              <NTbody>
                <NTr>
                  <NTd>申请时间</NTd>
                  <NTd>{{ orderInfo.backendOrderScenic.refundCreateTime || '---' }}</NTd>
                </NTr>
                <NTr>
                  <NTd>申请说明</NTd>
                  <NTd>{{ orderInfo.backendOrderScenic.cancelMemo || '---' }}</NTd>
                </NTr>
                <NTr>
                  <NTd>处理状态</NTd>
                  <NTd>
                    {{ cancelState[orderInfo.backendOrderScenic.cancelState as keyof typeof cancelState] || '---' }}
                  </NTd>
                </NTr>
              </NTbody>
            </NTable>
          </template>
        </NCard>
      </div>
    </div>

    <BasicModelForm @register-modal-form="registerModalForm" @submit-form="handleSubmit"></BasicModelForm>
  </div>
</template>

<style scoped></style>
