<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// import { NFlex } from 'naive-ui';
import { NImage, NSpace } from 'naive-ui';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import { fetchGetAfterSalesOrderDetail } from '@/service/api/order-manage/after-sales-order';
// import { useAppStore } from '@/store/modules/app';
// import { copyTextToClipboard } from '@/utils/zt';
import {
  auditStatus,
  businessType,
  orderStatus,
  orderStatusEnum,
  refundOrderColumns,
  refundOrderStatus,
  returnMoneyStatus
} from '../normal-order/normal-order';
const router = useRouter();
const orderInfo = ref<Api.delivery.deliveryOrder>();
// const appStore = useAppStore();
const TimeDown = ref<number>(0);
dayjs.extend(duration);
const route = useRoute();
async function open(orderNumber: string) {
  const { data, error } = await fetchGetAfterSalesOrderDetail(orderNumber);
  if (!error) {
    orderInfo.value = data;
    if (orderInfo.value.hbLogisticStatus == 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;
    }
  }
}

open(String(route.query.refundNumber));
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 handleDetail(orderNumber: string) {
  router.push({
    name: '/order-manage/order-detail',
    query: {
      orderNumber
    }
  });
}
</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'">
            {{ orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus] }}
          </template>
          <template v-else>
            {{ yppStatus[orderInfo.yppDetail?.orderState as keyof typeof yppStatus] }}
          </template>
-->
        </div>
        <NCard size="small" title="订单概览" :bordered="false">
          <div>售后单号：{{ orderInfo.refundNumber }}</div>
          <div>
            业务类型：
            {{ businessType[orderInfo.businessType as keyof typeof businessType] || orderInfo.businessType }}
          </div>
          <div>
            售后状态：{{
              refundOrderStatus[orderInfo.refundOrderStatus as keyof typeof refundOrderStatus] || '售后已完成'
            }}
          </div>
          <div>申请时间：{{ orderInfo?.createTime || '暂无' }}</div>
          <div>售后渠道：用户自助申请</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>
      </div>
      <div class="flex-1">
        <div class="flex">
          <div class="mb-10px text-16px font-semibold">
            业务状态：{{ returnMoneyStatus[orderInfo.returnMoneySts as keyof typeof returnMoneyStatus] }}
          </div>
        </div>
        <NCard size="small" title="原订单信息" :bordered="false">
          <div>
            原订单号：{{ orderInfo.orderNumber }}
            <NButton v-if="orderInfo.orderNumber" text @click="handleDetail(orderInfo.orderNumber)">
              查看完整订单
            </NButton>
          </div>
          <div>订单状态：{{ orderStatus[orderInfo.hbOrderStatus as keyof typeof orderStatus] }}</div>
          <div>原订单号：{{ orderInfo.orderNumber }}</div>
          <div>订单总额：{{ orderInfo.total }}</div>
          <div>配送费（快递）：{{ orderInfo.freightAmount }}</div>
          <div>积分抵扣：{{ orderInfo.offsetPoints }}</div>
          <div>实际付款：{{ orderInfo.actualTotal }}</div>
          <div>支付时间：{{ orderInfo.payTime }}</div>
        </NCard>
        <NCard size="small" class="mt-20px" title="退款信息" :bordered="false">
          <div class="py-20px font-semibold">01 退款情况</div>

          <div>售后方式：{{ orderInfo.refundType == 1 ? '整单退款' : '部分退款' }}</div>
          <div>退款原因：{{ orderInfo.buyerReason }} {{ orderInfo.buyerDesc }}</div>
          <div>退款件数：{{ orderInfo.goodsNum }}</div>
          <div class="py-20px font-semibold">02 退款商品&费用</div>
          <NDataTable :columns="refundOrderColumns" :data="orderInfo.orderRefundSkuVoList" :bordered="false" />

          <div class="mt-20px flex items-center justify-end">
            <div class="text-20px font-semibold">退款总金额：{{ orderInfo.refundMoney }} 元</div>
            <template v-if="orderInfo.returnMoneySts === 70">
              <div class="ml-20px text-14px text-gray">退还金额：{{ orderInfo.userRefundMoney }}</div>
              <div class="text-14px text-gray">退还积分：{{ orderInfo.refundScore }}</div>
              <div class="text-14px text-gray">已过期：（{{ orderInfo.refundExpiredScore }} ）</div>
              <div v-if="orderInfo.couponBaseInfoDTO" class="text-14px text-gray">
                退还优惠券：{{ orderInfo.couponBaseInfoDTO?.discountMoney || 0 }}
              </div>
            </template>
          </div>

          <div class="py-20px font-semibold">03 退款记录</div>

          <NTimeline>
            <NTimelineItem
              v-for="(item, index) in orderInfo.omsOrderRefundRecordList"
              :key="index"
              :type="item.auditStatus == 30 ? 'success' : 'info'"
              :title="auditStatus[item.auditStatus as keyof typeof auditStatus]"
              :content="item.instructions"
              :time="item.updateTime"
            />
          </NTimeline>
          <div>
            <NSpace v-if="orderInfo.photoFileList" class="mt-20px">
              <NImage
                v-for="(item, index) in orderInfo.photoFileList"
                :key="index"
                :src="item"
                object-fit="scale-down"
                class="mr-10px h-[80px] w-[80px] rounded-6px"
                lazy
              />
            </NSpace>
          </div>
        </NCard>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
