<template>
  <div>
    <div class="flex items-center">
      <div class="w-[100px] h-[100px] text-purple-600">
        <Tickets />
      </div>
      <div>
        <div>会员卡订单</div>
        <div class="mt-6">订单编号：{{ detail?.sn }}</div>
      </div>
    </div>
    <div class="mt-4">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane name="1">
          <template #label>
            订单信息
            <!-- <el-icon v-if="isvisibleIcon" class="ml-1" @click.stop="handleProcessCallback"><Warning /></el-icon> -->
          </template>
          <el-descriptions title="" :column="2">
            <el-descriptions-item label="订单编号:">{{ detail?.sn }}</el-descriptions-item>
            <el-descriptions-item label="订单类型:">会员卡订单</el-descriptions-item>
            <el-descriptions-item label="创建时间:">{{ detail?.createdAt }}</el-descriptions-item>
            <el-descriptions-item label="支付时间:">{{ detail?.payTime || "-" }}</el-descriptions-item>
            <el-descriptions-item label="订单状态:">
              <span :class="statusList[detail?.status - 1]?.color">
                {{ statusList[detail?.status - 1]?.label }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="支付方式:"> 微信支付 </el-descriptions-item>
            <el-descriptions-item label="订单金额:"> ¥{{ detail?.balance / 100 }} </el-descriptions-item>
            <el-descriptions-item label="实付金额:"> ¥{{ detail?.balance / 100 }} </el-descriptions-item>
            <el-descriptions-item label="支付款流向:">
              {{ detail?.paymentType == 1 ? "平台" : detail?.agency?.nickname }}
            </el-descriptions-item>
            <el-descriptions-item label="商户号:">
              {{ detail?.mchId }}
            </el-descriptions-item>
            <el-descriptions-item label="支付单号:">
              {{ detail?.paymentOrderSn || "-" }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="订单来源信息" name="2">
          <el-descriptions title="" :column="2">
            <el-descriptions-item label="订单来源:">
              {{ detail?.agency?.nickname || "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="来源ID:">
              {{ detail?.agency?.account }}
            </el-descriptions-item>
            <el-descriptions-item label="渠道名称:">
              {{ detail?.promotionSite?.name || "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="渠道ID:">
              {{ detail?.promotionSite?.sn || "-" }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="商品信息" name="3">
          <el-descriptions title="" :column="1">
            <el-descriptions-item label="商品名称:">
              {{ detail?.promotionGoods?.memberCardName || "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="商品ID:">
              {{ detail?.promotionGoods?.memberCardId || "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="购买数量:">1 </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="用户信息" name="4">
          <el-descriptions title="" :column="1">
            <el-descriptions-item label="用户ID:">
              {{ detail?.archives?.id || "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号:">
              <span v-if="!detail?.archives?.accounts?.length">-</span>
              <span v-else v-for="(item, index) in detail?.archives?.accounts" :key="index" class="space-x-4">
                <span>{{ item?.account || "-" }}</span>
              </span>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
// import { request } from "@/utils";
import http from "@/api";
import { Tickets, Warning } from "@element-plus/icons-vue";
import { ref, defineProps, computed } from "vue";
import { ElMessage } from "element-plus";

import { statusList } from "../constant.ts";

const activeName = ref("1");
const props = defineProps({
  orderSn: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["success"]);
const detail = ref({});

const isvisibleIcon = computed(() => {
  const payTimeDiffFiveMin =
    detail.value?.payTime && new Date().getTime() - new Date(detail.value?.payTime).getTime() > 5 * 60 * 1000;
  return (
    (detail.value.status == 2 && [1, 3].includes(detail.value?.callbackStatus)) ||
    (detail.value?.callbackStatus == 4 && payTimeDiffFiveMin)
  );
});
const handleProcessCallback = () => {
  /**
   * 
   * 订单状态为支付成功的时候，微信支付回调可能会支付失败。如果为待处理和失败 则重新发起
   * 如果为4，则支付时间超过了5分钟 也要重新发起
   * 
   * OrderTypeCallbackStatusWait    = 1 // 待处理
    OrderTypeCallbackStatusDone    = 2 // 已处理
    OrderTypeCallbackStatusError   = 3 // 失败
    OrderTypeCallbackStatusProcess = 4 // 处理中
   */
  http
    .post("archivesService/mechanism/order/processCallback", {
      orderSn: props.orderSn
    })
    .then(resp => {
      ElMessage.success(resp.message);
      emits("success");
      getDetail();
    });
};

const getDetail = () => {
  if (!props.orderSn) return;
  http
    .get("/archivesService/agency/order/detail", {
      orderSn: props.orderSn
    })
    .then(resp => {
      detail.value = resp.data.detail;
    });
};
const initData = () => {
  activeName.value = "1";
  getDetail();
};

defineExpose({
  initData
});
</script>
<style lang="scss"></style>
