<template>
    <view>
        <tui-modal :show="modal" custom @cancel="close">
            <view class="title">{{ title }}</view>
            <slot></slot>
            <slot name="footer">
                <view class="operations">
                    <tui-button plain @click="cancel">取消</tui-button>
                    <tui-button @click="confirm">确认</tui-button>
                </view>
            </slot>
        </tui-modal>
    </view>
</template>
<script>
export default {
    props: ["title"],
    data() {
        return {
            modal: false,
        };
    },
    methods: {
        open() {
            this.modal = true;
        },
        close() {
            this.modal = false;
        },
        cancel() {
            this.$emit("cancel");
            this.close();
        },
        confirm() {
            this.$emit("confirm");
        },
    },
};
</script>
<style lang="scss">
.title {
    font-size: 30rpx;
    font-weight: bold;
    padding: 40rpx 0;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}
.operations {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    .tui-btn {
        height: auto !important;
        line-height: 1 !important;
        padding: 20rpx;
    }
}
::v-deep .tui-modal-box {
    width: 95% !important;
    height: auto !important;
    padding: 0 40rpx 40rpx !important;
}
</style>
