<script lang="ts" setup>
import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { ElTag } from 'element-plus';

import { getCoupon2AuditDetailApi } from '#/api/coupon/coupon2';

const data = ref<any>(null);
const loading = ref(false);

// 申请人信息
const applicantInfo = computed(() => {
  if (!data.value) return [];
  return [
    { label: '姓名', value: data.value.usersname },
    { label: '手机号', value: data.value.usersphone },
    { label: '身份证号', value: data.value.usersidcardnumber },
    { label: '用户类型', value: data.value.userstype },
    { label: '用户性质', value: data.value.usersnature },
    { label: '邮箱', value: data.value.usersemail },
    { label: '地址', value: data.value.usersaddress },
    { label: '注册时间', value: data.value.usersdate },
    { label: '银行名称', value: data.value.usersbankname },
    { label: '银行账号', value: data.value.usersbanknumber },
    { label: '社会统一信用代码', value: data.value.usersshtyxydm },
  ];
});

// 产品信息
const productInfo = computed(() => {
  if (!data.value) return [];
  return [
    { label: '产品名称', value: data.value.productsname },
    { label: '产品型号', value: data.value.productsmodel },
    { label: '产品类别', value: data.value.productscategory },
    { label: '机具类型', value: data.value.productsjjlx },
    {
      label: '产品价格',
      value: data.value.productsprice ? `¥${data.value.productsprice}` : '',
    },
    {
      label: '推广补贴',
      value: data.value.productstsxzybt ? `¥${data.value.productstsxzybt}` : '',
    },
    {
      label: '中央补贴',
      value: data.value.productszybt ? `¥${data.value.productszybt}` : '',
    },
    { label: '产品序列号', value: data.value.productssn },
    { label: '发动机编号', value: data.value.productsfdbh },
    { label: '发动机名称', value: data.value.productsfdmc },
    { label: '生产企业', value: data.value.scqyinfomc },
    { label: '企业地址', value: data.value.scqyinfoaddress },
    { label: '法人姓名', value: data.value.scqyinfofrmc },
    { label: '销售姓名', value: data.value.scqyinfoxsmc },
    { label: '销售电话', value: data.value.scqyinfoxsphone },
    { label: '统一社会信用代码', value: data.value.scqyinfoshtydm },
    {
      label: '注册资本',
      value: data.value.scqyinfozczb ? `¥${data.value.scqyinfozczb}` : '',
    },
  ];
});

// 优惠券状态映射
const getCouponStatusTag = (status: number) => {
  const statusMap = {
    0: { text: '申请中', type: 'info' },
    1: { text: '审核通过', type: 'success' },
    2: { text: '审核不通过', type: 'danger' },
  } as const;
  return (
    statusMap[status as keyof typeof statusMap] || {
      text: '未知',
      type: 'warning',
    }
  );
};

// 使用状态映射
const getUsedStatusTag = (status: number) => {
  const statusMap = {
    0: { text: '未使用', type: 'info' },
    1: { text: '已使用', type: 'success' },
  } as const;
  return (
    statusMap[status as keyof typeof statusMap] || {
      text: '未知',
      type: 'warning',
    }
  );
};

// 优惠券信息
const couponInfo = computed(() => {
  if (!data.value) return [];

  return [
    { label: '优惠券ID', value: data.value.coupon2sid },
    { label: '优惠券代码', value: data.value.coupon2code },
    { label: '优惠券名称', value: data.value.coupon2mc },
    { label: '申请时间', value: data.value.coupon2adddatetime },
    { label: '审核时间', value: data.value.coupon2reviewdatetime || '未审核' },
    {
      label: '优惠券状态',
      value: data.value.coupon2sype,
      isTag: true,
      tagType: 'couponStatus',
    },
    {
      label: '使用状态',
      value: data.value.coupon2isused,
      isTag: true,
      tagType: 'usedStatus',
    },
    // { label: '可用产品ID', value: data.value.coupon2productids },
    // { label: '关联主券ID', value: data.value.coupon2coupon1id },
    { label: '订单编号', value: data.value.ordersnumber },
    {
      label: '订单总价',
      value: data.value.orderstotalprice
        ? `¥${data.value.orderstotalprice}`
        : '',
    },
    {
      label: '优惠价格',
      value: data.value.ordersyhprice ? `¥${data.value.ordersyhprice}` : '',
    },
    {
      label: '折扣价格',
      value: data.value.ordersdiscountprice
        ? `¥${data.value.ordersdiscountprice}`
        : '',
    },
    { label: '下单时间', value: data.value.ordersorderdate },
    { label: '经销商名称', value: data.value.jxsname },
  ];
});

const [Modal, modalApi] = useVbenModal({
  title: '优惠券详情',
  class: 'w-10/12 max-w-8xl',
  showCancelButton: false,
  confirmText: '关闭',
  onConfirm() {
    modalApi.close();
  },
  async onOpenChange(isOpen) {
    if (isOpen) {
      const modalData = modalApi.getData();

      if (modalData?.row?.coupon2sid) {
        try {
          loading.value = true;
          const detailData = await getCoupon2AuditDetailApi({
            coupon2sid: modalData.row.coupon2sid,
          });
          data.value = detailData;
        } catch (error) {
          console.error('获取优惠券详情失败:', error);
        } finally {
          loading.value = false;
        }
      }
    } else {
      data.value = null;
    }
  },
});

function openDetailModal(rowData: any) {
  modalApi.setData({ row: rowData });
  modalApi.open();
}

defineExpose({
  openDetailModal,
});
</script>

<template>
  <Modal>
    <div v-loading="loading" class="space-y-6 p-4">
      <!-- 申请人信息 -->
      <div>
        <el-divider content-position="left">
          <span class="text-lg font-semibold text-gray-800">申请人信息</span>
        </el-divider>
        <el-descriptions :column="3" border class="mb-4" label-width="120px">
          <el-descriptions-item
            v-for="item in applicantInfo"
            :key="item.label"
            :label="item.label"
            width="20%"
          >
            {{ item.value || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 产品信息 -->
      <div>
        <el-divider content-position="left">
          <span class="text-lg font-semibold text-gray-800">产品信息</span>
        </el-divider>
        <el-descriptions :column="3" border class="mb-4" label-width="120px">
          <el-descriptions-item
            v-for="item in productInfo"
            :key="item.label"
            :label="item.label"
            width="20%"
          >
            {{ item.value || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 优惠券信息 -->
      <div>
        <el-divider content-position="left">
          <span class="text-lg font-semibold text-gray-800">优惠券信息</span>
        </el-divider>
        <el-descriptions :column="3" border class="mb-4" label-width="120px">
          <el-descriptions-item
            v-for="item in couponInfo"
            :key="item.label"
            :label="item.label"
            width="20%"
          >
            <!-- 优惠券状态标签 -->
            <ElTag
              v-if="item.isTag && item.tagType === 'couponStatus'"
              :type="getCouponStatusTag(item.value).type"
            >
              {{ getCouponStatusTag(item.value).text }}
            </ElTag>
            <!-- 使用状态标签 -->
            <ElTag
              v-else-if="item.isTag && item.tagType === 'usedStatus'"
              :type="getUsedStatusTag(item.value).type"
            >
              {{ getUsedStatusTag(item.value).text }}
            </ElTag>
            <!-- 普通文本 -->
            <span v-else>{{ item.value || '-' }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </Modal>
</template>
