<template>
  <div class="payment-settings-detail-page">
    <ElCard shadow="never">
      <!-- 页面头部 -->
      <div class="detail-header">
        <ElButton @click="handleBack">
          <template #icon>
            <ElIcon><ArrowLeft /></ElIcon>
          </template>
          返回
        </ElButton>
        <h2 class="detail-title">{{ pageTitle }}</h2>
      </div>

      <!-- 详情内容 -->
      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />

      <!-- 加载中 -->
      <div v-if="loading" class="loading-container">
        <ElIcon class="is-loading"><Loading /></ElIcon>
        <span>加载中...</span>
      </div>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElCard, ElButton, ElIcon } from 'element-plus'
  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
  import DetailPage from '@/components/common/DetailPage.vue'
  import type { DetailSection } from '@/components/common/DetailPage.vue'
  import { PaymentSettingsService } from '@/api/modules'
  import type { PaymentSettings } from '@/types/api'
  import { formatDateTime } from '@/utils/business/format'
  import { getPaymentConfigStatus, getPaymentProviderText } from '@/utils/business/paymentConfig'

  defineOptions({ name: 'PaymentSettingsDetail' })

  const route = useRoute()
  const router = useRouter()

  const loading = ref(false)
  const detailData = ref<PaymentSettings | null>(null)

  const configId = computed(() => Number(route.params.id))
  const pageTitle = computed(() => `支付配置详情 #${configId.value}`)
  const formatText = (value: string | number | undefined | null): string => {
    if (value === undefined || value === null || value === '') return '-'
    return String(value)
  }

  // 基础详情配置
  const baseSection: DetailSection = {
    title: '基本信息',
    fields: [
      { label: '配置ID', prop: 'id' },
      { label: '配置名称', prop: 'name' },
      {
        label: '支付渠道类型',
        formatter: (_, data) => getPaymentProviderText(data.provider_type)
      },
      {
        label: '激活状态',
        formatter: (_, data) => (data.is_active ? '已激活' : '未激活')
      },
      {
        label: '配置描述',
        prop: 'description',
        formatter: (value) => value || '-',
        fullWidth: true
      },
      {
        label: '创建时间',
        prop: 'created_at',
        formatter: (value) => formatDateTime(value)
      },
      {
        label: '更新时间',
        prop: 'updated_at',
        formatter: (value) => formatDateTime(value)
      }
    ]
  }

  // 微信小程序配置
  const miniappSection: DetailSection = {
    title: '小程序配置',
    fields: [
      {
        label: '小程序AppID',
        prop: 'miniapp_app_id',
        formatter: (value) => formatText(value)
      },
      {
        label: '小程序AppSecret',
        prop: 'miniapp_app_secret',
        formatter: (value) => formatText(value)
      }
    ]
  }

  // 微信公众号配置
  const oaSection: DetailSection = {
    title: '公众号配置',
    fields: [
      {
        label: '公众号AppID',
        prop: 'oa_app_id',
        formatter: (value) => formatText(value)
      },
      {
        label: '公众号AppSecret',
        prop: 'oa_app_secret',
        formatter: (value) => formatText(value)
      },
      {
        label: '公众号Token',
        prop: 'oa_token',
        formatter: (value) => formatText(value)
      },
      {
        label: '公众号AES Key',
        prop: 'oa_aes_key',
        formatter: (value) => formatText(value)
      },
      {
        label: 'OAuth回调地址',
        prop: 'oa_oauth_redirect_url',
        formatter: (value) => formatText(value),
        fullWidth: true
      }
    ]
  }

  const alipaySection: DetailSection = {
    title: '支付宝配置',
    fields: [
      {
        label: '支付宝AppID',
        prop: 'ali_app_id',
        formatter: (value) => formatText(value)
      },
      {
        label: '支付过期分钟数',
        prop: 'ali_pay_expire_minutes',
        formatter: (value) => formatText(value)
      },
      {
        label: '生产环境',
        formatter: (_, data) => (data.ali_production ? '是' : '否')
      },
      {
        label: '异步通知地址',
        prop: 'ali_notify_url',
        formatter: (value) => formatText(value),
        fullWidth: true
      },
      {
        label: '同步跳转地址',
        prop: 'ali_return_url',
        formatter: (value) => formatText(value),
        fullWidth: true
      },
      {
        label: '应用私钥',
        prop: 'ali_private_key',
        formatter: (value) => getPaymentConfigStatus(value)
      },
      {
        label: '支付宝公钥',
        prop: 'ali_public_key',
        formatter: (value) => getPaymentConfigStatus(value)
      }
    ]
  }

  // 微信支付配置
  const wechatPaySection: DetailSection = {
    title: '微信支付配置',
    fields: [
      {
        label: '微信商户号',
        prop: 'wx_mch_id',
        formatter: (value) => formatText(value)
      },
      {
        label: '证书序列号',
        prop: 'wx_serial_no',
        formatter: (value) => formatText(value)
      },
      {
        label: 'APIv2密钥',
        prop: 'wx_api_v2_key',
        formatter: (value) => formatText(value)
      },
      {
        label: 'APIv3密钥',
        prop: 'wx_api_v3_key',
        formatter: (value) => formatText(value)
      },
      {
        label: '支付回调地址',
        prop: 'wx_notify_url',
        formatter: (value) => formatText(value),
        fullWidth: true
      },
      {
        label: '支付证书',
        prop: 'wx_cert_content',
        formatter: (value) => getPaymentConfigStatus(value)
      },
      {
        label: '支付密钥',
        prop: 'wx_key_content',
        formatter: (value) => getPaymentConfigStatus(value)
      }
    ]
  }

  // 富友支付配置
  const fuiouSection: DetailSection = {
    title: '富友支付配置',
    fields: [
      {
        label: '富友API地址',
        prop: 'fy_api_url',
        formatter: (value) => formatText(value),
        fullWidth: true
      },
      {
        label: '富友机构号',
        prop: 'fy_ins_cd',
        formatter: (value) => formatText(value)
      },
      {
        label: '富友商户号',
        prop: 'fy_mchnt_cd',
        formatter: (value) => formatText(value)
      },
      {
        label: '富友终端号',
        prop: 'fy_term_id',
        formatter: (value) => formatText(value)
      },
      {
        label: '支付回调地址',
        prop: 'fy_notify_url',
        formatter: (value) => formatText(value)
      },
      {
        label: '富友私钥',
        prop: 'fy_private_key',
        formatter: (value) => getPaymentConfigStatus(value)
      },
      {
        label: '富友公钥',
        prop: 'fy_public_key',
        formatter: (value) => getPaymentConfigStatus(value)
      }
    ]
  }

  // 根据支付类型动态构建详情配置
  const detailSections = computed<DetailSection[]>(() => {
    if (!detailData.value) return [baseSection]

    const sections = [baseSection, miniappSection, oaSection, alipaySection]

    if (
      detailData.value.provider_type === 'wechat' ||
      detailData.value.provider_type === 'wechat_v2'
    ) {
      sections.push(wechatPaySection)
    } else if (detailData.value.provider_type === 'fuiou') {
      sections.push(fuiouSection)
    }

    return sections
  })

  // 返回上一页
  const handleBack = () => {
    router.back()
  }

  // 获取详情数据
  const fetchDetail = async () => {
    loading.value = true
    try {
      const res = await PaymentSettingsService.getPaymentSettingsById(configId.value)
      if (res.code === 0) {
        detailData.value = res.data
      }
    } catch (error) {
      console.error(error)
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    fetchDetail()
  })
</script>

<style scoped lang="scss">
  .payment-settings-detail-page {
    padding: 20px;
  }

  .detail-header {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-bottom: 16px;

    .detail-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--el-text-color-secondary);

    .el-icon {
      font-size: 32px;
    }
  }
</style>
