<template>

  <div style="padding:40px;">
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px" style="width: 100%">
      <el-form-item label="appId" prop="appId">
        <el-input v-model="formData.appId" />
      </el-form-item>
      <el-form-item label="appSecret" prop="appSecret">
        <el-input v-model="formData.appSecret" />
      </el-form-item>
      <el-form-item label="商户号" prop="merchantNumber">
        <el-input v-model="formData.merchantNumber" />
      </el-form-item>
      <el-form-item label="商户支付密钥" prop="paymentKey">
        <el-input v-model="formData.paymentKey" />
      </el-form-item>

    </el-form>
    <div class="flex justify-flex-end mt-20">
      <el-button type="primary" @click="save" :disabled="!auth('edit')">保存</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import request from '/@/api/request'
import { sysConfig } from '/@/api/controllerUrls'
import { ElNotification } from 'element-plus/es'
import { auth } from '/@/utils/common'

onMounted(() => {
    getFormData()
})

let formData = ref({
    appId: '',
    appSecret: '',
    merchantNumber: '',
    paymentKey: '',
})

let rules = ref({
    appId: [{ required: true, message: '请输入', trigger: 'blur' }],
    appSecret: [{ required: true, message: '请输入', trigger: 'blur' }],
    merchantNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
    paymentKey: [{ required: true, message: '请输入', trigger: 'blur' }],
})

function getFormData() {
    request.index(sysConfig, { configName: 'wechatPayment' }, 'edit').then((res: any) => {
        formData.value = res.data.configValue
    })
}

let ruleFormRef = ref()

function save() {
    ruleFormRef.value.validate((valid: any, fields: any) => {
        if (valid) {
            request
                .edit(sysConfig, {
                    configName: 'wechatPayment',
                    configValue: formData.value,
                })
                .then((res: any) => {
                    ElNotification({ type: 'success', message: res.msg })
                })
        }
    })
}
</script>

<style scoped>
</style>
