<template>
    <view>
        <u-popup :zoom="zoom" mode="center" :popup="false" :z-index="uZIndex" v-model="value" :length="width"
         :mask-close-able="maskCloseAble" :border-radius="borderRadius" @close="popupClose" :negative-top="negativeTop">
            <view class="u-model">
                <view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
                <view class="u-model__content">
                    <view :style="[contentStyle]" v-if="$slots.default  || $slots.$default">
                        <slot />
                    </view>
                    <view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
                </view>
                <view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
                    <view v-if="showCancelButton" :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button"
                     :style="[cancelBtnStyle]" @tap="cancel">
                        {{cancelText}}
                    </view>
                    <view v-if="showConfirmButton || $slots['confirm-button']" :hover-stay-time="100" :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
                     class="u-model__footer__button hairline-left" :style="[confirmBtnStyle]" @tap="confirm">
                        <slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
                        <block v-else>
                            <u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
                            <block v-else>
                                {{confirmText}}
                            </block>
                        </block>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    /**
     * modal 模态框
     * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
     * @tutorial https://www.uviewui.com/components/modal.html
     * @property {Boolean} value 是否显示模态框
     * @property {String | Number} z-index 层级
     * @property {String} title 模态框标题（默认"提示"）
     * @property {String | Number} width 模态框宽度（默认600）
     * @property {String} content 模态框内容（默认"内容"）
     * @property {Boolean} show-title 是否显示标题（默认true）
     * @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
     * @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
     * @property {Stringr | Number} negative-top modal往上偏移的值
     * @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
     * @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
     * @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
     * @property {String} cancel-text 取消按钮的文字内容（默认"取消"）
     * @property {String} cancel-color 取消按钮的颜色（默认"#606266"）
     * @property {String} confirm-color 确认按钮的文字内容（默认"#2979ff"）
     * @property {String | Number} border-radius 模态框圆角值，单位rpx（默认16）
     * @property {Object} title-style 自定义标题样式，对象形式
     * @property {Object} content-style 自定义内容样式，对象形式
     * @property {Object} cancel-style 自定义取消按钮样式，对象形式
     * @property {Object} confirm-style 自定义确认按钮样式，对象形式
     * @property {Boolean} zoom 是否开启缩放模式（默认true）
     * @event {Function} confirm 确认按钮被点击
     * @event {Function} cancel 取消按钮被点击
     * @example <u-modal :src="title" :content="content"></u-modal>
     */
    export default {
        name: 'u-modal',
        props: {
            // 是否显示Modal
            value: {
                type: Boolean,
                default: false
            },
            // 层级z-index
            zIndex: {
                type: [Number, String],
                default: ''
            },
            // 标题
            title: {
                type: [String],
                default: '提示'
            },
            // 弹窗宽度，可以是数值(rpx)，百分比，auto等
            width: {
                type: [Number, String],
                default: 600
            },
            // 弹窗内容
            content: {
                type: String,
                default: '内容'
            },
            // 是否显示标题
            showTitle: {
                type: Boolean,
                default: true
            },
            // 是否显示确认按钮
            showConfirmButton: {
                type: Boolean,
                default: true
            },
            // 是否显示取消按钮
            showCancelButton: {
                type: Boolean,
                default: false
            },
            // 确认文案
            confirmText: {
                type: String,
                default: '确认'
            },
            // 取消文案
            cancelText: {
                type: String,
                default: '取消'
            },
            // 确认按钮颜色
            confirmColor: {
                type: String,
                default: '#2979ff'
            },
            // 取消文字颜色
            cancelColor: {
                type: String,
                default: '#606266'
            },
            // 圆角值
            borderRadius: {
                type: [Number, String],
                default: 16
            },
            // 标题的样式
            titleStyle: {
                type: Object,
                default () {
                    return {}
                }
            },
            // 内容的样式
            contentStyle: {
                type: Object,
                default () {
                    return {}
                }
            },
            // 取消按钮的样式
            cancelStyle: {
                type: Object,
                default () {
                    return {}
                }
            },
            // 确定按钮的样式
            confirmStyle: {
                type: Object,
                default () {
                    return {}
                }
            },
            // 是否开启缩放效果
            zoom: {
                type: Boolean,
                default: true
            },
            // 是否异步关闭，只对确定按钮有效
            asyncClose: {
                type: Boolean,
                default: false
            },
            // 是否允许点击遮罩关闭modal
            maskCloseAble: {
                type: Boolean,
                default: false
            },
            // 给一个负的margin-top，往上偏移，避免和键盘重合的情况
            negativeTop: {
                type: [String, Number],
                default: 0
            }
        },
        data() {
            return {
                loading: false, // 确认按钮是否正在加载中
            }
        },
        computed: {
            cancelBtnStyle() {
                return Object.assign({
                    color: this.cancelColor
                }, this.cancelStyle);
            },
            confirmBtnStyle() {
                return Object.assign({
                    color: this.confirmColor
                }, this.confirmStyle);
            },
            uZIndex() {
                return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
            }
        },
        watch: {
            // 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态
            // 避免下次打开的时候，状态混乱
            value(n) {
                if (n === true) this.loading = false;
            }
        },
        methods: {
            confirm() {
                // 异步关闭
                if (this.asyncClose) {
                    this.loading = true;
                } else {
                    this.$emit('input', false);
                }
                this.$emit('confirm');
            },
            cancel() {
                this.$emit('cancel');
                this.$emit('input', false);
                // 目前popup弹窗关闭有一个延时操作，此处做一个延时
                // 避免确认按钮文字变成了"确定"字样，modal还没消失，造成视觉不好的效果
                setTimeout(() => {
                    this.loading = false;
                }, 300);
            },
            // 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal
            popupClose() {
                this.$emit('input', false);
            },
            // 清除加载中的状态
            clearLoading() {
                this.loading = false;
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "../../libs/css/style.components.scss";

    .u-model {
        height: auto;
        overflow: hidden;
        font-size: 32rpx;
        background-color: #fff;

        &__btn--hover {
            background-color: rgb(230, 230, 230);
        }

        &__title {
            padding-top: 48rpx;
            font-weight: 500;
            text-align: center;
            color: $u-main-color;
        }

        &__content {
            &__message {
                padding: 48rpx;
                font-size: 30rpx;
                text-align: center;
                color: $u-content-color;
            }
        }

        &__footer {
            @include vue-flex;

            &__button {
                flex: 1;
                height: 100rpx;
                line-height: 100rpx;
                font-size: 32rpx;
                box-sizing: border-box;
                cursor: pointer;
                text-align: center;
                border-radius: 4rpx;
            }
        }
    }
</style>