<template>
  <div class="integration-config-page">
    <div class="page-heading">
      <div><h2>支付渠道配置</h2><p>统一管理支付渠道凭证、接口地址和默认交易参数</p></div>
      <el-button :loading="loading" :icon="Refresh" @click="load">刷新</el-button>
    </div>
    <div v-loading="loading" class="config-layout">
      <aside class="provider-panel">
        <div class="panel-title">渠道 <span>{{ configs.length }}</span></div>
        <button v-for="item in configs" :key="item.provider" type="button" class="provider-item" :class="{ active: selected?.provider === item.provider }" @click="select(item)">
          <span class="provider-copy"><strong>{{ item.name || item.provider }}</strong><small>{{ item.provider }}</small></span>
          <el-tag :type="item.enabled ? 'success' : 'info'" size="small">{{ item.enabled ? '启用' : '停用' }}</el-tag>
        </button>
      </aside>
      <section v-if="selected" class="editor-panel">
        <div class="editor-heading">
          <div><div class="editor-title">{{ selected.name || selected.provider }}</div><div class="editor-subtitle">{{ selected.description || `provider: ${selected.provider}` }}</div></div>
          <el-switch v-model="selected.enabled" active-text="启用渠道" @change="save" />
        </div>
        <el-alert v-if="selected.configured" title="密钥字段已脱敏，保留 ****** 表示继续使用当前密钥。" type="info" :closable="false" class="editor-alert" />
        <el-alert v-else title="该渠道尚未保存，填写字段后保存即可创建配置。" type="warning" :closable="false" class="editor-alert" />
        <el-form label-position="top" class="config-form">
          <div class="field-grid">
            <el-form-item v-for="field in selected.fields" :key="field.key" :label="field.label" :required="field.required">
              <template #label><span>{{ field.label }}</span><span class="field-key">{{ field.key }}</span></template>
              <el-select v-if="field.type === 'select'" v-model="selected.config[field.key]" class="field-control" filterable>
                <el-option v-for="option in field.options" :key="String(option.value)" :label="option.label" :value="option.value" />
              </el-select>
              <el-switch v-else-if="field.type === 'switch'" v-model="selected.config[field.key]" />
              <el-input v-else-if="field.type === 'textarea'" v-model="selected.config[field.key]" class="field-control" type="textarea" :rows="4" :show-password="field.secret" spellcheck="false" />
              <el-input v-else v-model="selected.config[field.key]" class="field-control" :type="field.secret ? 'password' : field.type === 'number' ? 'number' : 'text'" :show-password="field.secret" spellcheck="false" />
            </el-form-item>
          </div>
        </el-form>
        <div class="editor-actions">
          <el-button type="primary" :loading="saving" :icon="Check" @click="save">保存配置</el-button>
          <el-button v-if="selected.configured" type="danger" plain :icon="Delete" @click="remove">删除配置</el-button>
          <el-button text :icon="DocumentCopy" @click="copyConfig">复制 JSON</el-button>
        </div>
      </section>
      <el-empty v-else description="暂无支付渠道" />
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Check, Delete, DocumentCopy, Refresh } from '@element-plus/icons-vue'
import { deleteIntegrationConfig, getIntegrationConfigs, saveIntegrationConfig } from '@/api/integration'

const configs = ref([]); const selectedProvider = ref(''); const loading = ref(false); const saving = ref(false)
const selected = computed(() => configs.value.find((item) => item.provider === selectedProvider.value) || configs.value[0])
const select = (item) => { selectedProvider.value = item.provider }
const load = async () => { loading.value = true; try { const res = await getIntegrationConfigs('payment'); if (res.code === 0) { configs.value = (res.data || []).map((item) => ({ ...item, config: { ...(item.config || {}) } })); if (!configs.value.some((item) => item.provider === selectedProvider.value)) selectedProvider.value = configs.value[0]?.provider || '' } } finally { loading.value = false } }
const save = async () => { if (!selected.value) return; saving.value = true; try { const res = await saveIntegrationConfig('payment', selected.value.provider, { enabled: selected.value.enabled, config: selected.value.config }); if (res.code === 0) { ElMessage.success('支付渠道配置已保存'); await load() } } finally { saving.value = false } }
const remove = async () => { if (!selected.value) return; await ElMessageBox.confirm(`确认删除 ${selected.value.name || selected.value.provider} 配置吗？`, '删除配置', { type: 'warning' }); const res = await deleteIntegrationConfig('payment', selected.value.provider); if (res.code === 0) { ElMessage.success('配置已删除'); await load() } }
const copyConfig = async () => { if (!selected.value) return; await navigator.clipboard.writeText(JSON.stringify(selected.value.config || {}, null, 2)); ElMessage.success('JSON 已复制') }
load()
</script>

<style scoped>
.integration-config-page { padding: 4px 0 24px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-heading h2 { margin: 0; color: var(--el-text-color-primary); font-size: 20px; font-weight: 600; }
.page-heading p { margin: 6px 0 0; color: var(--el-text-color-secondary); font-size: 13px; }
.config-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 620px; border: 1px solid var(--el-border-color-lighter); background: var(--el-bg-color); }
.provider-panel { border-right: 1px solid var(--el-border-color-lighter); padding: 14px 10px; }
.panel-title { display: flex; justify-content: space-between; padding: 2px 10px 12px; color: var(--el-text-color-primary); font-size: 14px; font-weight: 600; }
.panel-title span { color: var(--el-text-color-secondary); font-weight: 400; }
.provider-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 9px 10px; border: 0; border-left: 3px solid transparent; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.provider-item:hover { background: var(--el-fill-color-light); }
.provider-item.active { border-left-color: var(--el-color-primary); background: var(--el-color-primary-light-9); }
.provider-copy { display: grid; gap: 3px; min-width: 0; }
.provider-copy strong { overflow: hidden; color: var(--el-text-color-primary); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.provider-copy small { color: var(--el-text-color-secondary); font-size: 11px; }
.editor-panel { min-width: 0; padding: 22px 28px 24px; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--el-border-color-lighter); }
.editor-title { color: var(--el-text-color-primary); font-size: 18px; font-weight: 600; }
.editor-subtitle { margin-top: 5px; color: var(--el-text-color-secondary); font-size: 13px; }
.editor-alert { margin: 18px 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.field-key { margin-left: 8px; color: var(--el-text-color-placeholder); font-size: 11px; font-weight: 400; }
.field-control { width: 100%; }
.editor-actions { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--el-border-color-lighter); }
@media (max-width: 900px) { .config-layout { grid-template-columns: 1fr; } .provider-panel { border-right: 0; border-bottom: 1px solid var(--el-border-color-lighter); max-height: 260px; overflow-y: auto; } .field-grid { grid-template-columns: 1fr; } .editor-panel { padding: 18px; } }
</style>
