<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="130px" style="width: 700px">
      <div class="form-title">
        <span class="title">支付参数配置</span>
        <span class="tip">（请联系支付平台获取支付参数）</span>
      </div>
      <el-form-item label="商户号" prop="num">
        <el-input v-model="form.num" placeholder="请输入商户号" clearable></el-input>
      </el-form-item>
      <el-form-item label="服务商号" prop="num">
        <el-input v-model="form.num" placeholder="请输入服务商号" clearable></el-input>
      </el-form-item>
      <el-form-item label="商户秘钥" prop="num">
        <el-input v-model="form.num" placeholder="请输入商户秘钥" clearable></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" :loading="loading" @click="handleSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { businessSetPayParamsPage } from "@/api/shop";
export default {
  data() {
    return {
      loading: false,
      radioNum: null,
      form: {},
      rules: {},
    };
  },
  watch: {
    radioNum(val) {
      this.form.num = val;
    },
  },
  created() { },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.loading = true;
          businessSetPayParamsPage(this.form)
            .then((res) => {
              console.log(res);
              this.loading = false;
              if (res.code === 200) {
                this.$message.success("保存成功");
              }
            })
            .catch((err) => {
              console.log(err);
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-title {
  margin-bottom: 30px;

  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .tip {
    font-size: 13px;
  }
}
</style>
