<template>
  <div class="row mt14">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="left">
      <el-form-item label="店铺ID" prop="storeId">
        <el-input v-model="form.storeId" placeholder="请输入店铺ID" :style="inputStyle"></el-input>
      </el-form-item>
      <el-form-item label="商户名称" prop="merchantName">
        <el-input v-model="form.merchantName" placeholder="请输入商户名称" :style="inputStyle"></el-input>
      </el-form-item>
      <el-form-item label="appId" prop="appId">
        <el-input v-model="form.appId" placeholder="请输入appId" :style="inputStyle"></el-input>
      </el-form-item>
      <el-form-item label="appSecret" prop="appSecret">
        <el-input type="textarea" :rows="4" v-model="form.appSecret" placeholder="请输入appSecret"
          :style="inputStyle"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitHandle" v-loading="loading">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { shopMerchantPut } from '@/api/common'

const inputStyle = {
  width: '500px'
}

const props = defineProps({
  detail: {
    type: Object,
    default: {}
  }
})

const route = useRoute()

const formRef = ref(null)

const form = defineModel({
  storeId: '',
  merchantName: '',
  appId: '',
  appSecret: '',
})

const rules = ref({
  storeId: [
    {
      required: true,
      message: '请输入店铺ID',
      trigger: 'blur'
    }
  ],
  merchantName: [
    {
      required: true,
      message: '请输入店铺名称',
      trigger: 'blur'
    }
  ],
  appId: [
    {
      required: true,
      message: '请输入appId',
      trigger: 'blur'
    }
  ],
  appSecret: [
    {
      required: true,
      message: '请输入appSecret',
      trigger: 'blur'
    }
  ]
})

// 验证表单
function submitHandle() {
  formRef.value.validate(valid => {
    if (valid) {
      shopMerchantPostAjax()
    }
  })
}

// 更新聚合支付
const loading = ref(false)
async function shopMerchantPostAjax() {
  try {
    loading.value = true
    const res = await shopMerchantPut({
      shopId: route.query.shopId,
      polyMerchantDTO: form.value
    })
    ElNotification({
      title: '注意',
      message: '更新成功',
      type: 'success'
    })
  } catch (error) {
    console.log('shopMerchantPostAjax=', error);
  }
  loading.value = false
}
</script>