<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="inpuCallLimit3" class="col-sm-2 col-form-label">月调用次数</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="form.callLimit" class="form-control" id="inputCallLimit3">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="inputPrice3" class="col-sm-2 col-form-label">价格</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="form.price" class="form-control" id="inputPrice3" v-money>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="inputOneMinuteLimit3" class="col-sm-2 col-form-label">调用频率限制</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="form.oneMinuteLimit" class="form-control"
                                    id="inputOneMinuteLimit3">
                            </div>
                        </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: 'PackageFormModal',
    props: {
        title: {
            type: String
        },
        formType: {
            type: String,
            default: 'edit'
        }
    },
    data() {
        return {
            visible: false,
            packageId: -2,
            packageList: [],
            form: {
                name: '',
                callLimit: 0,
                price: '0',
                oneMinuteLimit: 0
            },
            resolve: null
        };
    },
    methods: {
        open(packageId = null, packageInfo = null) {
            this.resetForm();
            this.visible = true;
            if (packageInfo != null) {
                this.packageId = packageId;
                this.form.name = packageInfo.name;
                this.form.callLimit = packageInfo.callLimit;
                this.form.price = packageInfo.price.toString();
                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: '',
                callLimit: 0,
                price: '0',
                oneMinuteLimit: 0
            };
        }
    }
};
</script>

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

.formcontent {
    padding: 0 30px;
}
</style>
