// 添加/修改用户库
<template>
  <el-dialog
    :title="isEdit ? '编辑Ampe平台' : '添加Ampe平台'"
    width="500px"
    :visible.sync="visible"
    :destroy-on-close="false"
    :close-on-click-modal="false"
    :center="true"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="110px"
    >
      <el-form-item prop="id" style="margin-bottom: 0">&nbsp;</el-form-item>
      <el-form-item label="Ampe平台" prop="ampeName" required>
        <el-input v-model="form.ampeName" placeholder="请输入Ampe平台" />
      </el-form-item>
      <el-form-item label="产品ID" prop="productId" required>
        <el-input
          v-model="form.productId"
          placeholder="请输入产品ID（product_id）"
        />
      </el-form-item>
      <el-form-item label="调用应用" prop="hostAppId" required>
        <el-input
          v-model="form.hostAppId"
          placeholder="请输入调用应用（ampe_appid）"
        />
      </el-form-item>
      <el-form-item label="小程序" prop="appId" required>
        <el-input
          v-model="form.appId"
          placeholder="请输入小程序（miniProgram_appid）"
        />
      </el-form-item>
      <el-form-item label="小程序名称" prop="appName" required>
        <el-input v-model="form.appName" placeholder="请输入小程序名称" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取消 </el-button>
      <el-button type="primary" :loading="submitLoading" @click="submit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ampeEdit } from "@/api/configuration";

export default {
  data() {
    return {
      form: {
        ampeName: null,
        productId: null,
        hostAppId: null,
        appName: null,
        appId: null,
      },
      rules: {
        ampeName: [
          {
            required: true,
            whitespace: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        productId: [
          {
            required: true,
            whitespace: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        hostAppId: [
          {
            required: true,
            whitespace: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        appId: [
          {
            required: true,
            whitespace: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        appName: [
          {
            required: true,
            whitespace: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
      },
      visible: false,
      submitLoading: false,
      isEdit: false,
    };
  },
  created() {
    this.form_copy = JSON.parse(JSON.stringify(this.form));
  },
  methods: {
    open(obj) {
      this.visible = true;
      this.submitLoading = false;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        if (obj && Object.keys(obj).length > 0) {
          this.form = obj;
          this.isEdit = true;
        } else {
          this.form = JSON.parse(JSON.stringify(this.form_copy));
          this.isEdit = false;
        }
      });
    },
    submit(e) {
      e.preventDefault();
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        if (this.submitLoading) {
          return;
        }
        this.submitLoading = true;
        try {
          await ampeEdit(this.form);
          this.visible = false;
          this.$emit("success", this.isEdit);
        } catch (e) {
          console.info("add", e);
        } finally {
          this.submitLoading = false;
        }
      });
    },
  },
};
</script>
