<template>
  <div
    v-if="visible"
    class="modal fade show"
    id="packageModal"
    tabindex="-1"
    aria-labelledby="packageModalLabel"
    style="display: block; padding-right: 15px"
    aria-modal="true"
    role="dialog"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="packageModalTitle">{{ title }}</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="关闭"
            @click="cancel"
          ></button>
        </div>
        <div class="formcontent">
          <form>
            <div class="row mb-3">
              <label for="packageName" class="col-sm-2 col-form-label">套餐名</label>
              <div class="col-sm-10">
                <input
                  type="text"
                  v-model="form.name"
                  class="form-control"
                  id="packageName"
                />
              </div>
            </div>
            <div class="row mb-3">
              <label for="packagePrice" class="col-sm-2 col-form-label">价格</label>
              <div class="col-sm-10">
                <input
                  type="number"
                  v-model="form.price"
                  class="form-control"
                  id="packagePrice"
                />
              </div>
            </div>
            <div class="row mb-3">
              <label for="callLimit" class="col-sm-2 col-form-label">调用次数限制</label>
              <div class="col-sm-10">
                <input
                  type="number"
                  v-model="form.callLimit"
                  class="form-control"
                  id="callLimit"
                />
              </div>
            </div>
            <div class="row mb-3">
              <label for="oneMinuteLimit" class="col-sm-2 col-form-label"
                >一分钟调用限制</label
              >
              <div class="col-sm-10">
                <input
                  type="number"
                  v-model="form.oneMinuteLimit"
                  class="form-control"
                  id="oneMinuteLimit"
                />
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
            @click="cancel"
          >
            关闭
          </button>
          <button type="button" class="btn btn-primary" @click="submit">保存更改</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PackageFormModal",
  props: {
    title: {
      type: String,
      default: "编辑套餐",
    },
  },
  data() {
    return {
      visible: false,
      packageId: null,
      form: {
        name: "",
        price: "",
        callLimit: "",
        oneMinuteLimit: "",
      },
      resolve: null,
    };
  },
  methods: {
    open(packageId, packageInfo = null) {
      this.resetForm();
      this.visible = true;
      this.packageId = packageId;
      if (packageInfo) {
        this.form.name = packageInfo.name;
        this.form.price = packageInfo.price;
        this.form.callLimit = packageInfo.callLimit;
        this.form.oneMinuteLimit = packageInfo.oneMinuteLimit;
      }
      return new Promise((resolve) => {
        this.resolve = resolve;
      });
    },
    submit() {
      this.visible = false;
      this.resolve && this.resolve(this.form);
    },
    cancel() {
      this.visible = false;
      this.resolve && this.resolve(null);
    },
    resetForm() {
      this.form = {
        name: "",
        price: "",
        callLimit: "",
        oneMinuteLimit: "",
      };
    },
  },
};
</script>

<style scoped>
.modal {
  background: rgba(0, 0, 0, 0.5);
}
.formcontent {
  padding: 0 30px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
