<template>
  <ArtTableFullScreen>
    <div class="payment-settings-page" id="table-full-screen">
      <!-- 搜索栏 -->
      <ArtSearchBar
        v-model:filter="searchForm"
        :items="searchFormItems"
        label-width="100"
        :show-expand="false"
        @reset="handleReset"
        @search="handleSearch"
      ></ArtSearchBar>

      <ElCard shadow="never" class="art-table-card">
        <!-- 表格头部 -->
        <ArtTableHeader
          :columnList="columnOptions"
          v-model:columns="columnChecks"
          @refresh="handleRefresh"
        >
          <template #left>
            <ElButton
              type="primary"
              @click="showCreateDialog"
              v-if="hasAuth('payment_settings:create')"
              >新增支付配置</ElButton
            >
          </template>
        </ArtTableHeader>

        <!-- 表格 -->
        <ArtTable
          ref="tableRef"
          row-key="id"
          :loading="loading"
          :data="configList"
          :currentPage="pagination.page"
          :pageSize="pagination.page_size"
          :total="pagination.total"
          :marginTop="10"
          :actions="getActions"
          :actionsWidth="120"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <template #default>
            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
          </template>
        </ArtTable>

        <!-- 创建/编辑对话框 -->
        <ElDialog
          v-model="dialogVisible"
          :title="dialogType === 'add' ? '新增支付配置' : '编辑支付配置'"
          width="900px"
          :close-on-click-modal="false"
          @closed="handleDialogClosed"
        >
          <ElForm
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="140px"
            class="config-form"
          >
            <ElRow :gutter="20">
              <ElCol :span="12">
                <ElFormItem label="配置名称" prop="name">
                  <ElInput v-model="form.name" placeholder="请输入配置名称" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="12">
                <ElFormItem label="支付渠道类型" prop="provider_type">
                  <ElSelect
                    v-model="form.provider_type"
                    placeholder="请选择支付渠道类型"
                    style="width: 100%"
                    @change="handleProviderTypeChange"
                  >
                    <ElOption label="微信直连" value="wechat" />
                    <ElOption label="微信直连V2" value="wechat_v2" />
                    <ElOption label="富友支付" value="fuiou" />
                  </ElSelect>
                </ElFormItem>
              </ElCol>
            </ElRow>
            <ElFormItem label="配置描述" prop="description">
              <ElInput
                v-model="form.description"
                type="textarea"
                :rows="2"
                placeholder="请输入配置描述"
              />
            </ElFormItem>

            <ElDivider content-position="left">
              <span class="divider-title">小程序配置</span>
            </ElDivider>
            <ElRow :gutter="20">
              <ElCol :span="12">
                <ElFormItem label="小程序AppID" prop="miniapp_app_id">
                  <ElInput v-model="form.miniapp_app_id" placeholder="请输入小程序AppID" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="12">
                <ElFormItem label="小程序AppSecret" prop="miniapp_app_secret">
                  <ElInput
                    v-model="form.miniapp_app_secret"
                    type="password"
                    show-password
                    placeholder="请输入小程序AppSecret"
                  />
                </ElFormItem>
              </ElCol>
            </ElRow>

            <ElDivider content-position="left">
              <span class="divider-title">公众号配置</span>
            </ElDivider>
            <ElRow :gutter="20">
              <ElCol :span="12">
                <ElFormItem label="公众号AppID" prop="oa_app_id">
                  <ElInput v-model="form.oa_app_id" placeholder="请输入公众号AppID" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="12">
                <ElFormItem label="公众号AppSecret" prop="oa_app_secret">
                  <ElInput
                    v-model="form.oa_app_secret"
                    type="password"
                    show-password
                    placeholder="请输入公众号AppSecret"
                  />
                </ElFormItem>
              </ElCol>
            </ElRow>
            <ElRow :gutter="20">
              <ElCol :span="12">
                <ElFormItem label="公众号Token" prop="oa_token">
                  <ElInput
                    v-model="form.oa_token"
                    type="password"
                    show-password
                    placeholder="请输入公众号Token"
                  />
                </ElFormItem>
              </ElCol>
              <ElCol :span="12">
                <ElFormItem label="公众号AES Key" prop="oa_aes_key">
                  <ElInput
                    v-model="form.oa_aes_key"
                    type="password"
                    show-password
                    placeholder="请输入公众号AES加密Key"
                  />
                </ElFormItem>
              </ElCol>
            </ElRow>
            <ElFormItem label="OAuth回调地址" prop="oa_oauth_redirect_url">
              <ElInput v-model="form.oa_oauth_redirect_url" placeholder="请输入OAuth回调地址" />
            </ElFormItem>

            <ElDivider content-position="left">
              <span class="divider-title">支付宝配置</span>
            </ElDivider>
            <ElRow :gutter="20">
              <ElCol :span="12">
                <ElFormItem label="支付宝AppID" prop="ali_app_id">
                  <ElInput v-model="form.ali_app_id" placeholder="请输入支付宝AppID" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="12">
                <ElFormItem label="支付过期分钟数" prop="ali_pay_expire_minutes">
                  <ElInputNumber
                    v-model="form.ali_pay_expire_minutes"
                    :min="1"
                    :step="1"
                    controls-position="right"
                    style="width: 100%"
                  />
                </ElFormItem>
              </ElCol>
            </ElRow>
            <ElRow :gutter="20">
              <ElCol :span="12">
                <ElFormItem label="异步通知地址" prop="ali_notify_url">
                  <ElInput v-model="form.ali_notify_url" placeholder="请输入支付宝异步通知地址" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="12">
                <ElFormItem label="同步跳转地址" prop="ali_return_url">
                  <ElInput v-model="form.ali_return_url" placeholder="请输入支付宝同步跳转地址" />
                </ElFormItem>
              </ElCol>
            </ElRow>
            <ElFormItem label="生产环境" prop="ali_production">
              <ElSwitch
                v-model="form.ali_production"
                active-text="生产环境"
                inactive-text="测试环境"
                inline-prompt
              />
            </ElFormItem>
            <ElRow :gutter="20">
              <ElCol :span="12">
                <ElFormItem label="应用私钥" prop="ali_private_key">
                  <ElInput
                    v-model="form.ali_private_key"
                    type="textarea"
                    :rows="3"
                    placeholder="请粘贴支付宝应用私钥内容"
                  />
                </ElFormItem>
              </ElCol>
              <ElCol :span="12">
                <ElFormItem label="支付宝公钥" prop="ali_public_key">
                  <ElInput
                    v-model="form.ali_public_key"
                    type="textarea"
                    :rows="3"
                    placeholder="请粘贴支付宝公钥内容"
                  />
                </ElFormItem>
              </ElCol>
            </ElRow>

            <template v-if="form.provider_type === 'wechat' || form.provider_type === 'wechat_v2'">
              <ElDivider content-position="left">
                <span class="divider-title">微信支付配置</span>
              </ElDivider>
              <ElRow :gutter="20">
                <ElCol :span="12">
                  <ElFormItem label="微信商户号" prop="wx_mch_id">
                    <ElInput v-model="form.wx_mch_id" placeholder="请输入微信商户号" />
                  </ElFormItem>
                </ElCol>
                <ElCol :span="12">
                  <ElFormItem label="证书序列号" prop="wx_serial_no">
                    <ElInput v-model="form.wx_serial_no" placeholder="请输入微信证书序列号" />
                  </ElFormItem>
                </ElCol>
              </ElRow>
              <ElRow :gutter="20">
                <ElCol :span="12">
                  <ElFormItem label="APIv2密钥" prop="wx_api_v2_key">
                    <ElInput
                      v-model="form.wx_api_v2_key"
                      type="password"
                      show-password
                      placeholder="请输入微信APIv2密钥"
                    />
                  </ElFormItem>
                </ElCol>
                <ElCol :span="12">
                  <ElFormItem label="APIv3密钥" prop="wx_api_v3_key">
                    <ElInput
                      v-model="form.wx_api_v3_key"
                      type="password"
                      show-password
                      placeholder="请输入微信APIv3密钥"
                    />
                  </ElFormItem>
                </ElCol>
              </ElRow>
              <ElFormItem label="支付回调地址" prop="wx_notify_url">
                <ElInput v-model="form.wx_notify_url" placeholder="请输入微信支付回调地址" />
              </ElFormItem>
              <ElRow :gutter="20">
                <ElCol :span="12">
                  <ElFormItem label="支付证书" prop="wx_cert_content">
                    <ElInput
                      v-model="form.wx_cert_content"
                      type="textarea"
                      :rows="3"
                      placeholder="请粘贴PEM格式证书内容，保留当前配置可不修改"
                    />
                  </ElFormItem>
                </ElCol>
                <ElCol :span="12">
                  <ElFormItem label="支付密钥" prop="wx_key_content">
                    <ElInput
                      v-model="form.wx_key_content"
                      type="textarea"
                      :rows="3"
                      placeholder="请粘贴PEM格式密钥内容，保留当前配置可不修改"
                    />
                  </ElFormItem>
                </ElCol>
              </ElRow>
            </template>

            <template v-if="form.provider_type === 'fuiou'">
              <ElDivider content-position="left">
                <span class="divider-title">富友支付配置</span>
              </ElDivider>
              <ElRow :gutter="20">
                <ElCol :span="12">
                  <ElFormItem label="富友API地址" prop="fy_api_url">
                    <ElInput v-model="form.fy_api_url" placeholder="请输入富友API地址" />
                  </ElFormItem>
                </ElCol>
                <ElCol :span="12">
                  <ElFormItem label="富友机构号" prop="fy_ins_cd">
                    <ElInput v-model="form.fy_ins_cd" placeholder="请输入富友机构号" />
                  </ElFormItem>
                </ElCol>
              </ElRow>
              <ElRow :gutter="20">
                <ElCol :span="12">
                  <ElFormItem label="富友商户号" prop="fy_mchnt_cd">
                    <ElInput v-model="form.fy_mchnt_cd" placeholder="请输入富友商户号" />
                  </ElFormItem>
                </ElCol>
                <ElCol :span="12">
                  <ElFormItem label="富友终端号" prop="fy_term_id">
                    <ElInput v-model="form.fy_term_id" placeholder="请输入富友终端号" />
                  </ElFormItem>
                </ElCol>
              </ElRow>
              <ElFormItem label="支付回调地址" prop="fy_notify_url">
                <ElInput v-model="form.fy_notify_url" placeholder="请输入富友支付回调地址" />
              </ElFormItem>
              <ElRow :gutter="20">
                <ElCol :span="12">
                  <ElFormItem label="富友私钥" prop="fy_private_key">
                    <ElInput
                      v-model="form.fy_private_key"
                      type="textarea"
                      :rows="3"
                      placeholder="请粘贴PEM格式私钥内容，保留当前配置可不修改"
                    />
                  </ElFormItem>
                </ElCol>
                <ElCol :span="12">
                  <ElFormItem label="富友公钥" prop="fy_public_key">
                    <ElInput
                      v-model="form.fy_public_key"
                      type="textarea"
                      :rows="3"
                      placeholder="请粘贴PEM格式公钥内容，保留当前配置可不修改"
                    />
                  </ElFormItem>
                </ElCol>
              </ElRow>
            </template>
          </ElForm>
          <template #footer>
            <div class="dialog-footer">
              <ElButton @click="dialogVisible = false">取消</ElButton>
              <ElButton type="primary" @click="handleSubmit" :loading="submitLoading">
                提交
              </ElButton>
            </div>
          </template>
        </ElDialog>
      </ElCard>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { h, nextTick, onMounted, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { PaymentSettingsService } from '@/api/modules'
  import { ElMessage, ElMessageBox, ElSwitch, ElTag } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'
  import type {
    CreatePaymentSettingsRequest,
    PaymentProviderType,
    UpdatePaymentSettingsRequest,
    PaymentSettings,
    PaymentSettingsQueryParams
  } from '@/types/api'
  import type { SearchFormItem } from '@/types'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
  import { useAuth } from '@/composables/useAuth'
  import { RoutesAlias } from '@/router/routesAlias'
  import { formatDateTime } from '@/utils/business/format'
  import {
    getPaymentMerchantId,
    getPaymentNotifyUrl,
    getPaymentProviderText,
    isMaskedPaymentConfigValue
  } from '@/utils/business/paymentConfig'

  defineOptions({ name: 'PaymentSettingsList' })

  type PaymentConfigFormModel = {
    id: number
    name: string
    provider_type: PaymentProviderType
    description: string
    miniapp_app_id: string
    miniapp_app_secret: string
    oa_app_id: string
    oa_app_secret: string
    oa_token: string
    oa_aes_key: string
    oa_oauth_redirect_url: string
    wx_mch_id: string
    wx_api_v2_key: string
    wx_api_v3_key: string
    wx_notify_url: string
    wx_serial_no: string
    wx_cert_content: string
    wx_key_content: string
    ali_app_id: string
    ali_private_key: string
    ali_public_key: string
    ali_notify_url: string
    ali_return_url: string
    ali_pay_expire_minutes: number
    ali_production: boolean
    fy_api_url: string
    fy_ins_cd: string
    fy_mchnt_cd: string
    fy_term_id: string
    fy_notify_url: string
    fy_private_key: string
    fy_public_key: string
  }

  const textFieldKeys = [
    'description',
    'miniapp_app_id',
    'oa_app_id',
    'oa_oauth_redirect_url',
    'wx_mch_id',
    'wx_notify_url',
    'wx_serial_no',
    'ali_app_id',
    'ali_notify_url',
    'ali_return_url',
    'fy_api_url',
    'fy_ins_cd',
    'fy_mchnt_cd',
    'fy_term_id',
    'fy_notify_url'
  ] as const

  const sensitiveFieldKeys = [
    'miniapp_app_secret',
    'oa_app_secret',
    'oa_token',
    'oa_aes_key',
    'wx_api_v2_key',
    'wx_api_v3_key',
    'wx_cert_content',
    'wx_key_content',
    'ali_private_key',
    'ali_public_key',
    'fy_private_key',
    'fy_public_key'
  ] as const

  const { hasAuth } = useAuth()
  const router = useRouter()
  const canUpdatePaymentSettingsStatus = hasAuth('payment_settings:status')

  const loading = ref(false)
  const submitLoading = ref(false)
  const tableRef = ref()
  const dialogVisible = ref(false)
  const dialogType = ref<'add' | 'edit'>('add')
  const formRef = ref<FormInstance>()
  const configList = ref<PaymentSettings[]>([])
  const originalFormState = ref<PaymentConfigFormModel | null>(null)

  const createInitialFormState = (): PaymentConfigFormModel => ({
    id: 0,
    name: '',
    provider_type: 'wechat',
    description: '',
    miniapp_app_id: '',
    miniapp_app_secret: '',
    oa_app_id: '',
    oa_app_secret: '',
    oa_token: '',
    oa_aes_key: '',
    oa_oauth_redirect_url: '',
    wx_mch_id: '',
    wx_api_v2_key: '',
    wx_api_v3_key: '',
    wx_notify_url: '',
    wx_serial_no: '',
    wx_cert_content: '',
    wx_key_content: '',
    ali_app_id: '',
    ali_private_key: '',
    ali_public_key: '',
    ali_notify_url: '',
    ali_return_url: '',
    ali_pay_expire_minutes: 30,
    ali_production: true,
    fy_api_url: '',
    fy_ins_cd: '',
    fy_mchnt_cd: '',
    fy_term_id: '',
    fy_notify_url: '',
    fy_private_key: '',
    fy_public_key: ''
  })

  const mapConfigToForm = (detail: PaymentSettings): PaymentConfigFormModel => ({
    ...createInitialFormState(),
    ...detail,
    description: detail.description || '',
    ali_pay_expire_minutes: detail.ali_pay_expire_minutes ?? 30,
    ali_production: detail.ali_production ?? true
  })

  const trimString = (value: string): string => value.trim()
  const normalizeOptionalString = (value: string): string | undefined => {
    const trimmed = trimString(value)
    return trimmed || undefined
  }

  const form = reactive<PaymentConfigFormModel>(createInitialFormState())

  const isWechatProvider = (): boolean =>
    form.provider_type === 'wechat' || form.provider_type === 'wechat_v2'

  const getStatusText = (value: boolean): string => (value ? '已激活' : '未激活')

  const requiredValidator =
    (shouldRequire: () => boolean, label: string) =>
    (_rule: unknown, value: unknown, callback: (error?: Error) => void) => {
      if (!shouldRequire()) {
        callback()
        return
      }

      if (typeof value === 'string') {
        if (!trimString(value)) {
          callback(new Error(`请输入${label}`))
          return
        }
        callback()
        return
      }

      if (value === undefined || value === null || value === '') {
        callback(new Error(`请输入${label}`))
        return
      }

      callback()
    }

  const urlValidator = (_rule: unknown, value: unknown, callback: (error?: Error) => void) => {
    if (!value || typeof value !== 'string') {
      callback()
      return
    }

    const urlPattern = /^(https?:\/\/)[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?$/
    if (!urlPattern.test(value)) {
      callback(new Error('请输入正确的URL格式(http://或https://)'))
      return
    }

    callback()
  }

  const expireMinutesValidator = (
    _rule: unknown,
    value: unknown,
    callback: (error?: Error) => void
  ) => {
    if (typeof value !== 'number' || Number.isNaN(value) || value < 1) {
      callback(new Error('支付过期分钟数必须大于 0'))
      return
    }

    callback()
  }

  const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
    provider_type: [{ required: true, message: '请选择支付渠道类型', trigger: 'change' }],
    wx_mch_id: [{ validator: requiredValidator(isWechatProvider, '微信商户号'), trigger: 'blur' }],
    wx_api_v3_key: [
      {
        validator: requiredValidator(() => form.provider_type === 'wechat', '微信APIv3密钥'),
        trigger: 'blur'
      }
    ],
    wx_serial_no: [
      { validator: requiredValidator(isWechatProvider, '证书序列号'), trigger: 'blur' }
    ],
    wx_cert_content: [
      { validator: requiredValidator(isWechatProvider, '支付证书内容'), trigger: 'blur' }
    ],
    wx_key_content: [
      { validator: requiredValidator(isWechatProvider, '支付密钥内容'), trigger: 'blur' }
    ],
    oa_oauth_redirect_url: [{ validator: urlValidator, trigger: 'blur' }],
    wx_notify_url: [{ validator: urlValidator, trigger: 'blur' }],
    ali_notify_url: [{ validator: urlValidator, trigger: 'blur' }],
    ali_return_url: [{ validator: urlValidator, trigger: 'blur' }],
    fy_api_url: [{ validator: urlValidator, trigger: 'blur' }],
    fy_notify_url: [{ validator: urlValidator, trigger: 'blur' }],
    ali_pay_expire_minutes: [{ validator: expireMinutesValidator, trigger: 'change' }]
  })

  const initialSearchState = {
    provider_type: undefined as PaymentProviderType | undefined,
    is_active: undefined as number | undefined
  }

  const searchForm = reactive({ ...initialSearchState })

  const searchFormItems: SearchFormItem[] = [
    {
      label: '支付渠道类型',
      prop: 'provider_type',
      type: 'select',
      placeholder: '请选择支付渠道类型',
      options: [
        { label: '微信直连', value: 'wechat' },
        { label: '微信直连V2', value: 'wechat_v2' },
        { label: '富友支付', value: 'fuiou' }
      ],
      config: {
        clearable: true
      }
    },
    {
      label: '激活状态',
      prop: 'is_active',
      type: 'select',
      placeholder: '请选择激活状态',
      options: [
        { label: '已激活', value: 1 },
        { label: '未激活', value: 0 }
      ],
      config: {
        clearable: true
      }
    }
  ]

  const pagination = reactive({
    page: 1,
    page_size: 20,
    total: 0
  })

  const columnOptions = [
    { label: '配置名称', prop: 'name' },
    { label: '配置描述', prop: 'description' },
    { label: '支付渠道类型', prop: 'provider_type' },
    { label: '激活状态', prop: 'is_active' },
    { label: '商户号', prop: 'merchant_id' },
    { label: '小程序AppID', prop: 'miniapp_app_id' },
    { label: '公众号AppID', prop: 'oa_app_id' },
    { label: '支付宝AppID', prop: 'ali_app_id' },
    { label: '支付回调地址', prop: 'notify_url' },
    { label: '创建时间', prop: 'created_at' },
    { label: '更新时间', prop: 'updated_at' }
  ]

  const { columnChecks, columns } = useCheckedColumns(() => [
    {
      prop: 'name',
      label: '配置名称',
      minWidth: 160,
      showOverflowTooltip: true,
      formatter: (row: PaymentSettings) => {
        return h(
          'span',
          {
            style: 'color: var(--el-color-primary); cursor: pointer; text-decoration: underline;',
            onClick: (e: MouseEvent) => {
              e.stopPropagation()
              handleNameClick(row)
            }
          },
          row.name
        )
      }
    },
    {
      prop: 'description',
      label: '配置描述',
      minWidth: 180,
      showOverflowTooltip: true,
      formatter: (row: PaymentSettings) => row.description || '-'
    },
    {
      prop: 'provider_type',
      label: '支付渠道类型',
      width: 130,
      formatter: (row: PaymentSettings) => getPaymentProviderText(row.provider_type)
    },
    {
      prop: 'is_active',
      label: '激活状态',
      width: 110,
      formatter: (row: PaymentSettings) => {
        if (canUpdatePaymentSettingsStatus) {
          return h(ElSwitch, {
            modelValue: row.is_active,
            activeText: '已激活',
            inactiveText: '未激活',
            inlinePrompt: true,
            'onUpdate:modelValue': (val) => handleStatusChange(row, val)
          })
        }

        return h(ElTag, { type: row.is_active ? 'success' : 'info' }, () =>
          getStatusText(row.is_active)
        )
      }
    },
    {
      prop: 'merchant_id',
      label: '商户号',
      width: 150,
      showOverflowTooltip: true,
      formatter: (row: PaymentSettings) => getPaymentMerchantId(row)
    },
    {
      prop: 'miniapp_app_id',
      label: '小程序AppID',
      width: 160,
      showOverflowTooltip: true,
      formatter: (row: PaymentSettings) => row.miniapp_app_id || '-'
    },
    {
      prop: 'oa_app_id',
      label: '公众号AppID',
      width: 160,
      showOverflowTooltip: true,
      formatter: (row: PaymentSettings) => row.oa_app_id || '-'
    },
    {
      prop: 'ali_app_id',
      label: '支付宝AppID',
      width: 160,
      showOverflowTooltip: true,
      formatter: (row: PaymentSettings) => row.ali_app_id || '-'
    },
    {
      prop: 'notify_url',
      label: '支付回调地址',
      minWidth: 200,
      showOverflowTooltip: true,
      formatter: (row: PaymentSettings) => getPaymentNotifyUrl(row)
    },
    {
      prop: 'created_at',
      label: '创建时间',
      width: 180,
      formatter: (row: PaymentSettings) => formatDateTime(row.created_at)
    },
    {
      prop: 'updated_at',
      label: '更新时间',
      width: 180,
      formatter: (row: PaymentSettings) => formatDateTime(row.updated_at)
    }
  ])

  const resetForm = () => {
    Object.assign(form, createInitialFormState())
    originalFormState.value = null
  }

  const getTableData = async () => {
    loading.value = true
    try {
      const params: PaymentSettingsQueryParams = {
        page: pagination.page,
        page_size: pagination.page_size,
        provider_type: searchForm.provider_type,
        is_active: searchForm.is_active !== undefined ? searchForm.is_active === 1 : undefined
      }

      const res = await PaymentSettingsService.getPaymentSettings(params)
      if (res.code === 0) {
        configList.value = res.data.items || []
        pagination.page = res.data.page || pagination.page
        pagination.page_size = res.data.size || res.data.page_size || pagination.page_size
        pagination.total = res.data.total || 0
      }
    } catch (error) {
      console.error(error)
    } finally {
      loading.value = false
    }
  }

  const handleReset = () => {
    Object.assign(searchForm, { ...initialSearchState })
    pagination.page = 1
    getTableData()
  }

  const handleSearch = () => {
    pagination.page = 1
    getTableData()
  }

  const handleRefresh = () => {
    getTableData()
  }

  const handleSizeChange = (newPageSize: number) => {
    pagination.page_size = newPageSize
    getTableData()
  }

  const handleCurrentChange = (newCurrentPage: number) => {
    pagination.page = newCurrentPage
    getTableData()
  }

  const showCreateDialog = () => {
    resetForm()
    dialogType.value = 'add'
    dialogVisible.value = true
    nextTick(() => {
      formRef.value?.clearValidate()
    })
  }

  const showEditDialog = async (row: PaymentSettings) => {
    try {
      const res = await PaymentSettingsService.getPaymentSettingsById(row.id)
      if (res.code === 0 && res.data) {
        const mappedForm = mapConfigToForm(res.data)
        Object.assign(form, mappedForm)
        originalFormState.value = { ...mappedForm }
        dialogType.value = 'edit'
        dialogVisible.value = true
        await nextTick()
        formRef.value?.clearValidate()
      }
    } catch (error) {
      console.error('获取详情失败:', error)
    }
  }

  const handleProviderTypeChange = () => {
    nextTick(() => {
      formRef.value?.clearValidate()
    })
  }

  const handleDialogClosed = () => {
    resetForm()
    formRef.value?.clearValidate()
  }

  const buildCreatePayload = (): CreatePaymentSettingsRequest => {
    const payload: CreatePaymentSettingsRequest = {
      name: trimString(form.name),
      provider_type: form.provider_type,
      ali_pay_expire_minutes: form.ali_pay_expire_minutes,
      ali_production: form.ali_production
    }

    for (const key of textFieldKeys) {
      const value = normalizeOptionalString(form[key])
      if (value !== undefined) {
        payload[key] = value
      }
    }

    for (const key of sensitiveFieldKeys) {
      const value = normalizeOptionalString(form[key])
      if (value !== undefined) {
        payload[key] = value
      }
    }

    return payload
  }

  const buildUpdatePayload = (): UpdatePaymentSettingsRequest => {
    const initial = originalFormState.value
    if (!initial) return {}

    const payload: UpdatePaymentSettingsRequest = {}
    const currentName = trimString(form.name)
    const initialName = trimString(initial.name)
    if (currentName !== initialName) {
      payload.name = currentName
    }

    if (form.provider_type !== initial.provider_type) {
      payload.provider_type = form.provider_type
    }

    for (const key of textFieldKeys) {
      const currentValue = trimString(form[key])
      const initialValue = trimString(initial[key])
      if (currentValue !== initialValue) {
        payload[key] = currentValue
      }
    }

    if (form.ali_pay_expire_minutes !== initial.ali_pay_expire_minutes) {
      payload.ali_pay_expire_minutes = form.ali_pay_expire_minutes
    }

    if (form.ali_production !== initial.ali_production) {
      payload.ali_production = form.ali_production
    }

    for (const key of sensitiveFieldKeys) {
      const currentValue = trimString(form[key])
      if (!currentValue || isMaskedPaymentConfigValue(currentValue)) {
        continue
      }

      const initialValue = trimString(initial[key])
      if (currentValue !== initialValue) {
        payload[key] = currentValue
      }
    }

    return payload
  }

  const handleSubmit = async () => {
    if (!formRef.value) return

    try {
      await formRef.value.validate()
    } catch {
      return
    }

    submitLoading.value = true
    try {
      if (dialogType.value === 'add') {
        await PaymentSettingsService.createPaymentSettings(buildCreatePayload())
        ElMessage.success('创建成功')
      } else {
        const payload = buildUpdatePayload()
        if (Object.keys(payload).length === 0) {
          ElMessage.info('未检测到可提交的变更')
          return
        }

        await PaymentSettingsService.updatePaymentSettings(form.id, payload)
        ElMessage.success('更新成功')
      }

      dialogVisible.value = false
      await getTableData()
    } catch (error) {
      console.error(error)
    } finally {
      submitLoading.value = false
    }
  }

  const handleStatusChange = async (row: PaymentSettings, newStatus: string | number | boolean) => {
    if (!hasAuth('payment_settings:status')) {
      ElMessage.warning('您没有修改激活状态的权限')
      return
    }

    const newBoolStatus = Boolean(newStatus)
    const oldStatus = row.is_active
    row.is_active = newBoolStatus
    try {
      if (newBoolStatus) {
        await PaymentSettingsService.activatePaymentSettings(row.id)
        ElMessage.success('激活成功')
      } else {
        await PaymentSettingsService.deactivatePaymentSettings(row.id)
        ElMessage.success('停用成功')
      }
      await getTableData()
    } catch (error) {
      row.is_active = oldStatus
      console.error(error)
    }
  }

  const handleDelete = async (row: PaymentSettings) => {
    try {
      await ElMessageBox.confirm(`确定要删除支付配置"${row.name}"吗?`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

      await PaymentSettingsService.deletePaymentSettings(row.id)
      ElMessage.success('删除成功')
      await getTableData()
    } catch (error) {
      if (error !== 'cancel') {
        console.error(error)
      }
    }
  }

  const handleViewDetail = (row: PaymentSettings) => {
    router.push({
      path: `${RoutesAlias.PaymentSettings}/detail/${row.id}`
    })
  }

  const handleNameClick = (row: PaymentSettings) => {
    if (hasAuth('payment_settings:detail')) {
      handleViewDetail(row)
    } else {
      ElMessage.warning('您没有查看详情的权限')
    }
  }

  const getActions = (row: PaymentSettings) => {
    const actions: any[] = []

    if (hasAuth('payment_settings:edit')) {
      actions.push({
        label: '编辑',
        handler: () => showEditDialog(row),
        type: 'primary'
      })
    }

    if (hasAuth('payment_settings:delete')) {
      actions.push({
        label: '删除',
        handler: () => handleDelete(row),
        type: 'danger'
      })
    }

    return actions
  }

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

<style scoped lang="scss">
  .payment-settings-page {
    height: 100%;
  }

  .config-form {
    max-height: 600px;
    padding-right: 10px;
    overflow-y: auto;

    .divider-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }

    :deep(.el-divider) {
      margin: 24px 0 20px;
    }

    :deep(.el-form-item) {
      margin-bottom: 18px;
    }

    :deep(.el-input__wrapper) {
      transition: all 0.3s ease;
    }

    :deep(.el-textarea__inner) {
      transition: all 0.3s ease;
    }
  }

  // 优化滚动条样式
  .config-form::-webkit-scrollbar {
    width: 6px;
  }

  .config-form::-webkit-scrollbar-thumb {
    background-color: var(--el-border-color-darker);
    border-radius: 3px;
  }

  .config-form::-webkit-scrollbar-track {
    background-color: var(--el-fill-color-lighter);
  }
</style>
