<template>
  <div v-if="visible" class="modal fade show" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalLabel"
    style="display: block; padding-right: 15px;" _mstvisible="0" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-dialog-centered" _mstvisible="1">
      <div class="modal-content" _mstvisible="2">
        <div class="modal-header" _mstvisible="3">
          <h5 class="modal-title" id="exampleModalCenterTitle" _msttexthash="13222534" _msthash="147" _mstvisible="4">
            {{ title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭" _mstaria-label="59709"
            _msthash="148" _mstvisible="4" @click="cancel"></button>
        </div>
        <div class="formcontent">
          <form>
            <div class="row mb-3">
              <label for="inputName3" class="col-sm-2 col-form-label">接口名称</label>
              <div class="col-sm-10">
                <input type="text" v-model="form.name" class="form-control" id="inputName3">
              </div>
            </div>
            <div class="row mb-3">
              <label for="inputDescription3" class="col-sm-2 col-form-label">接口描述</label>
              <div class="col-sm-10">
                <input type="text" v-model="form.description" class="form-control" id="inputDescription3">
              </div>
            </div>
            <fieldset class="row mb-3">
              <legend class="col-form-label col-sm-2 pt-0">调用方法</legend>
              <div class="col-sm-10">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" v-model="form.method"
                    value="0" :checked="form.method == 0 ? true : false">
                  <label class="form-check-label" for="gridRadios1">
                    GET
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" v-model="form.method"
                    value="1" :checked="form.method == 1 ? true : false">
                  <label class="form-check-label" for="gridRadios1">
                    POST
                  </label>
                </div>
              </div>
            </fieldset>
            <div class="row mb-3">
              <label class="form-label fw-bold" for="PackageSelect">所属套餐</label>
              <select class="form-select" id="PackageSelect" v-model="form.packageId" multiple size="5">
                <option v-for="(item, index) in packageList" :key="index" :value="item.id"
                  >
                  {{ item.name }}
                </option>
              </select>
            </div>

          </form>
        </div>
        <div class="modal-footer" _mstvisible="3">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" _msttexthash="5889065" _msthash="150"
            _mstvisible="4" @click="cancel">关闭</button>
          <button type="button" class="btn btn-primary" _msttexthash="10744773" _msthash="151" _mstvisible="4"
            @click="submit">保存更改</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ApiFormModal',
  props: {
    title: {
      type: String
    },
    formType: {
      type: String,
      default: 'edit'
    }
  },
  data() {
    return {
      visible: false,
      ApiId: -2,
      packageList: [],
      form: {
        name: '',
        description: '',
        method: '0',
        packageId: []
      },
      resolve: null
    };
  },
  methods: {
    open(apiId, apiInfo = null, packageList, apipackageitem) {
      this.resetForm();
      this.visible = true;
      this.apiId = apiId;
      this.form.name = apiInfo.name;
      this.form.description = apiInfo.description;
      this.form.method = apiInfo.method.toString();
      this.form.packageId = apipackageitem
      this.packageList = packageList
      return new Promise((resolve) => {
        this.resolve = resolve;
      });
    },
    submit() {
      this.visible = false;
      this.form.method = Number(this.form.method)
      //this.form.packageId = Number(this.form.packageId)
      this.resolve && this.resolve(this.form);
    },
    cancel() {
      this.visible = false;
      this.resolve && this.resolve(null);
    },
    resetForm() {
      this.form = {
        name: '',
        description: '',
        method: '0',
        packageId: []
      };
    }
  }
};
</script>

<style scoped>
.modal {
  background: rgba(0, 0, 0, 0.5);
}

.formcontent {
  padding: 0 30px;
}

#PackageSelect {
  border-radius: 8px;
  padding: 8px;
}

#PackageSelect option:checked {
  background-color: #0d6efd;
  color: white;
}
</style>
