<template>
  <div class="p-2">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>微信小程序支付配置</span>
          <el-button type="primary" @click="handleSave" :loading="saving">保存配置</el-button>
        </div>
      </template>

      <el-form :model="form" label-width="140px" v-loading="loading">
        <el-form-item label="小程序AppID">
          <el-input v-model="form.appId" placeholder="请输入微信小程序AppID" style="width: 400px" />
        </el-form-item>

        <el-form-item label="商户号ID">
          <el-input v-model="form.mchId" placeholder="请输入微信支付商户号(MCHID)" style="width: 400px" />
        </el-form-item>
        
        <el-form-item label="商户号API密钥">
          <el-input v-model="form.apiV3Key" placeholder="请输入微信支付商户API密钥(APIv3密钥)" 
                    type="password" show-password style="width: 400px" />
        </el-form-item>

        <el-form-item label="证书序列号">
          <el-input v-model="form.serialNo" placeholder="请输入商户证书序列号" style="width: 400px" />
        </el-form-item>

        <el-form-item label="支付证书">
          <div>
            <el-input v-model="form.certPath" placeholder="证书路径，上传后自动回填或手动指定" style="width: 400px; margin-bottom: 10px;" />
            <el-upload
              action="#"
              :auto-upload="false"
              :show-file-list="false"
              accept=".pem"
              :on-change="handleCertChange"
            >
              <el-button type="primary">上传证书文件</el-button>
            </el-upload>
            <div class="tip-text">微信支付证书(apiclient_cert.pem)，前往微信商家平台下载</div>
            <div v-if="form.certUploaded" class="success-text">✓ 证书已上传</div>
          </div>
        </el-form-item>
        
        <el-form-item label="商户私钥">
          <div>
            <el-input v-model="form.privateKeyPath" placeholder="私钥路径，上传后自动回填或手动指定" style="width: 400px; margin-bottom: 10px;" />
            <el-upload
              action="#"
              :auto-upload="false"
              :show-file-list="false"
              accept=".pem"
              :on-change="handlePrivateKeyChange"
            >
              <el-button type="primary">上传私钥文件</el-button>
            </el-upload>
            <div class="tip-text">微信支付证书私钥(apiclient_key.pem)，前往微信商家平台下载</div>
            <div v-if="form.privateKeyUploaded" class="success-text">✓ 私钥已上传</div>
          </div>
        </el-form-item>

        <el-divider content-position="left">微信支付公钥配置（新商户必填）</el-divider>
        
        <el-form-item label="公钥ID">
          <el-input v-model="form.publicKeyId" placeholder="请输入微信支付公钥ID，如：PUB_KEY_ID_xxx" style="width: 400px" />
          <div class="tip-text">从微信商户平台 → API安全 → 申请微信支付公钥 获取</div>
        </el-form-item>
        
        <el-form-item label="微信支付公钥">
          <div>
            <el-upload
              action="#"
              :auto-upload="false"
              :show-file-list="false"
              accept=".pem"
              :on-change="handlePublicKeyChange"
            >
              <el-button type="primary">上传公钥文件</el-button>
            </el-upload>
            <div class="tip-text">微信支付公钥(pub_key.pem)，从微信商户平台 → API安全 下载</div>
            <div v-if="form.publicKeyUploaded" class="success-text">✓ 公钥已上传</div>
          </div>
        </el-form-item>

        <el-divider content-position="left">回调配置</el-divider>
        
        <el-form-item label="API回调地址">
          <el-input v-model="form.notifyUrl" placeholder="请输入支付回调地址，如：https://域名/v1/order/notify" style="width: 400px" />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const loading = ref(false)
const saving = ref(false)
const privateKeyFile = ref<File | null>(null)
const certFile = ref<File | null>(null)
const publicKeyFile = ref<File | null>(null)

const form = ref({
  appId: '',
  mchId: '',
  apiV3Key: '',
  serialNo: '',
  certPath: '',
  privateKeyPath: '',
  notifyUrl: '',
  privateKeyUploaded: false,
  certUploaded: false,
  publicKeyId: '',
  publicKeyUploaded: false
})

const handlePrivateKeyChange = (file: any) => {
  privateKeyFile.value = file.raw
  ElMessage.success('私钥文件已选择，保存时将一并上传')
}

const handleCertChange = (file: any) => {
  certFile.value = file.raw
  ElMessage.success('证书文件已选择，保存时将一并上传')
}

const handlePublicKeyChange = (file: any) => {
  publicKeyFile.value = file.raw
  ElMessage.success('公钥文件已选择，保存时将一并上传')
}

const getConfig = async () => {
  loading.value = true
  try {
    const res = await request.get('/miniapp/paymentConfig/list')
    if (res.code === 200 && res.data) {
      form.value.appId = res.data.appId || ''
      form.value.mchId = res.data.mchId || ''
      form.value.apiV3Key = res.data.apiV3Key || ''
      form.value.serialNo = res.data.serialNo || ''
      form.value.certPath = res.data.certPath || ''
      form.value.privateKeyPath = res.data.privateKeyPath || ''
      form.value.notifyUrl = res.data.notifyUrl || ''
      form.value.privateKeyUploaded = res.data.privateKeyUploaded || false
      form.value.certUploaded = res.data.certUploaded || false
      form.value.publicKeyId = res.data.publicKeyId || ''
      form.value.publicKeyUploaded = res.data.publicKeyUploaded || false
    }
  } catch (e) {
    console.error('获取配置失败', e)
  } finally {
    loading.value = false
  }
}

const handleSave = async () => {
  saving.value = true
  try {
    // 上传私钥
    if (privateKeyFile.value) {
      const formData = new FormData()
      formData.append('file', privateKeyFile.value)
      const uploadRes = await request.post('/miniapp/paymentConfig/uploadPrivateKey', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      if (uploadRes.code !== 200) {
        ElMessage.error('私钥上传失败：' + uploadRes.msg)
        saving.value = false
        return
      }
      form.value.privateKeyUploaded = true
      // 如果上传成功，后端通常会返回路径，这里我们可以刷新一下或者让后端直接在保存接口处理
      privateKeyFile.value = null
    }

    // 上传证书
    if (certFile.value) {
      const formData = new FormData()
      formData.append('file', certFile.value)
      const uploadRes = await request.post('/miniapp/paymentConfig/uploadCert', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      if (uploadRes.code !== 200) {
        ElMessage.error('证书上传失败：' + uploadRes.msg)
        saving.value = false
        return
      }
      form.value.certUploaded = true
      certFile.value = null
    }

    // 上传公钥
    if (publicKeyFile.value) {
      const formData = new FormData()
      formData.append('file', publicKeyFile.value)
      const uploadRes = await request.post('/miniapp/paymentConfig/uploadPublicKey', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      if (uploadRes.code !== 200) {
        ElMessage.error('公钥上传失败：' + uploadRes.msg)
        saving.value = false
        return
      }
      form.value.publicKeyUploaded = true
      publicKeyFile.value = null
    }
    
    const res = await request.put('/miniapp/paymentConfig/wxpay', {
      appId: form.value.appId,
      mchId: form.value.mchId,
      apiV3Key: form.value.apiV3Key,
      serialNo: form.value.serialNo,
      certPath: form.value.certPath,
      privateKeyPath: form.value.privateKeyPath,
      notifyUrl: form.value.notifyUrl,
      publicKeyId: form.value.publicKeyId
    })
    if (res.code === 200) {
      ElMessage.success('保存成功')
    } else {
      ElMessage.error(res.msg || '保存失败')
    }
  } catch (e) {
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

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

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tip-text {
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}
.success-text {
  color: #67c23a;
  font-size: 12px;
  margin-top: 4px;
}
</style>
