<template>
  <div class="payment-config">
    <el-card>
      <template #header>
        <span>支付配置</span>
      </template>
      <el-form
        v-if="canManage"
        ref="formRef"
        label-width="140px"
        style="max-width: 640px"
      >
        <el-divider content-position="left">微信支付</el-divider>
        <el-form-item label="AppID">
          <el-input v-model="form.wechat.app_id" placeholder="微信应用 AppID" />
        </el-form-item>
        <el-form-item label="商户号">
          <el-input v-model="form.wechat.mch_id" placeholder="商户号 MchID" />
        </el-form-item>
        <el-form-item label="API 密钥">
          <el-input v-model="form.wechat.api_key" type="password" placeholder="API 密钥(v2)" show-password />
        </el-form-item>
        <el-form-item label="APIv3 密钥">
          <el-input v-model="form.wechat.api_key_v3" type="password" placeholder="APIv3 密钥（可选）" show-password />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="form.wechat.enabled" />
        </el-form-item>

        <el-divider content-position="left">支付宝</el-divider>
        <el-form-item label="AppID">
          <el-input v-model="form.alipay.app_id" placeholder="支付宝应用 AppID" />
        </el-form-item>
        <el-form-item label="应用私钥">
          <el-input v-model="form.alipay.private_key" type="textarea" :rows="3" placeholder="应用私钥（支持多行）" />
        </el-form-item>
        <el-form-item label="支付宝公钥">
          <el-input v-model="form.alipay.alipay_public_key" type="textarea" :rows="3" placeholder="支付宝公钥（支持多行）" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="form.alipay.enabled" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleSave">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getPaymentConfig, updatePaymentConfig } from '../../api/admin'
import { useAuthStore } from '../../stores/auth'

const authStore = useAuthStore()
const formRef = ref(null)
const loading = ref(false)

const form = reactive({
  wechat: {
    app_id: '',
    mch_id: '',
    api_key: '',
    api_key_v3: '',
    enabled: false
  },
  alipay: {
    app_id: '',
    private_key: '',
    alipay_public_key: '',
    enabled: false
  }
})

const canManage = computed(() => {
  const user = authStore.getUser()
  if (!user) return false
  return user.role_id === 9527 && user.role === 'admin'
})

const fetchConfig = async () => {
  if (!canManage.value) return
  try {
    const res = await getPaymentConfig()
    if (res.wechat) {
      form.wechat = { ...form.wechat, ...res.wechat }
    }
    if (res.alipay) {
      form.alipay = { ...form.alipay, ...res.alipay }
    }
  } catch (e) {
    ElMessage.error(e.message || '获取配置失败')
  }
}

const handleSave = async () => {
  loading.value = true
  try {
    await updatePaymentConfig({
      wechat: form.wechat,
      alipay: form.alipay
    })
    ElMessage.success('保存成功')
  } catch (e) {
    ElMessage.error(e.response?.data?.error || e.message || '保存失败')
  } finally {
    loading.value = false
  }
}

onMounted(fetchConfig)
</script>

<style scoped>
.payment-config {
  padding: 0;
}
</style>
