<template>
    <view>
        <view @tap="close" :class="'weui-mask ' + (!showClone ? 'weui-mask_hidden' : '')" v-if="mask"></view>
        <view v-if="showClone" @tap="close" :class="'weui-dialog__wrp ' + extClass">
            <view class="weui-dialog" @tap.stop.prevent="stopEvent">
                <view class="weui-dialog__hd">
                    <view class="weui-dialog__title">
                        {{ title }}
                        <slot name="title"></slot>
                    </view>
                </view>
                <view class="weui-dialog__bd">
                    <slot></slot>
                </view>
                <view class="weui-dialog__ft">
                    <block v-if="buttonsClone && buttonsClone.length">
                        <view
                            :class="'weui-dialog__btn ' + item.className + ' ' + item.extClass"
                            :data-index="index"
                            @tap="buttonTap"
                            v-for="(item, index) in buttonsClone"
                            :key="index"
                        >
                            {{ item.text }}
                        </view>
                    </block>
                    <slot name="footer" v-else></slot>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            innerShow: false,
            buttonsClone: '',
            showClone: false
        };
    },
    options: {
        multipleSlots: true,
        // 在组件定义时的选项中启用多slot支持
        addGlobalClass: true
    },
    props: {
        title: {
            // 弹窗标题，也可以通过 slot 自定义
            type: String,
            default: ''
        },
        extClass: {
            // 弹窗 class
            type: String,
            default: ''
        },
        maskClosable: {
            type: Boolean,
            default: true
        },
        mask: {
            // 是否需要 遮罩层
            type: Boolean,
            default: true
        },
        show: {
            // 是否开启弹窗
            type: Boolean,

            default: false
        },
        buttons: {
            type: Array,
            default: () => [] // {text, extClass}
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready() {
            const buttons = this.buttons;
            const len = buttons.length;
            buttons.forEach((btn, index) => {
                if (len === 1) {
                    btn.className = 'weui-dialog__btn_primary';
                } else if (index === 0) {
                    btn.className = 'weui-dialog__btn_default';
                } else {
                    btn.className = 'weui-dialog__btn_primary';
                }
            });
            this.setData({
                buttonsClone: buttons
            });
        },

        buttonTap(e) {
            const { index } = e.currentTarget.dataset;
            this.$emit(
                'buttontap',
                {
                    detail: {
                        index,
                        item: this.buttons[index]
                    }
                },
                {}
            );
        },

        close() {
            const data = this;
            if (!data.maskClosable) {
                return;
            }
            this.setData({
                showClone: false
            });
            this.$emit(
                'close',
                {
                    detail: {}
                },
                {}
            );
        },

        stopEvent() {}
    },
    created: function () {},
    watch: {
        buttons: {
            handler: function (newVal, oldVal) {
                this.buttonsClone = newVal;
            },

            immediate: true,
            deep: true
        },

        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        }
    }
};

/***/
</script>
<style>
.weui-dialog.weui-dialog_hidden {
    opacity: 0;
    transform: scale3d(1, 1, 0);
}
.weui-dialog {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    transition: all 0.2s ease-in;
}
.weui-mask.weui-mask_hidden {
    opacity: 0;
    transform: scale3d(1, 1, 0);
}
.weui-mask {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    transition: all 0.2s ease-in;
}
</style>
