<template>
    <view v-if="showPopup" class="uni-popup" :class="popupstyle + (isDesktop ? ' fixforpc-z-index' : '')">
        <view @touchstart="touchstart">
            <u-transition key="1" v-if="maskShow" propName="mask" propMode="fade" :propCustomStyle="maskClass" :propDuration="duration" :propShow="showTrans" @click="onTap" />
            <u-transition key="2" :propMode="ani" propName="content" :propCustomStyle="transClass" :propDuration="duration" :propShow="showTrans">
                <view class="pr" :style="'border-radius:' + propRound + 'px'">
                    <view v-if="propCloseType == 'icon' && propCloseable" class="popup-close pa-14 box-border-box" :class="propCloseIconPos" :style="closeIconStyle" @tap="close">
                        <u-icon :propName="propCloseIcon" :propType="propCloseIconType" :propSize="propCloseIconSize + 'rpx'"></u-icon>
                    </view>
                    <view v-if="propTitle != ''" class="pr">
                        <view class="popup-close pa-14 box-border-box flex-row" :class="propTitleBorder ? 'br-b-e' : ''">
                            <view v-if="propTitle != ''" class="flex-1 title">
                                <text class="fw tc">{{ propTitle }}</text>
                            </view>
                        </view>
                    </view>
                    <view v-if="propCloseType == 'text' && propCloseable" class="flex-row jc-sb align-c w pa top-0 pa-14 z-i box-border-box" :style="propWidth">
                        <text class="cr-info" @click="close">取消</text>
                        <view class="pr">
                            <text v-if="propIsCustomBtn" class="inline-block" :style="propCustomBtnStyle" @click="custom_change">{{ propCustomBtnText }}</text>
                            <text class="cr-primary" @click="comfirm">确定</text>
                        </view>
                    </view>
                    <view class="uni-popup__wrapper radius-lg" :style="{ backgroundColor: bg, maxHeight: propHeight }" :class="[popupstyle]" @click="clear">
                        <slot />
                    </view>
                </view>
            </u-transition>
        </view>
        <!-- #ifdef H5 -->
        <keypress v-if="maskShow" @esc="onTap" />
        <!-- #endif -->
    </view>
</template>

<script>
    // #ifdef H5
    import keypress from './keypress.js';
    // #endif

    /**
     * PopUp 弹出层
     * @description 弹出层组件，为了解决遮罩弹层的问题
     * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
     * 	@value top 顶部弹出
     * 	@value center 中间弹出
     * 	@value bottom 底部弹出
     * 	@value left		左侧弹出
     * 	@value right  右侧弹出
     * 	@value message 消息提示
     * 	@value dialog 对话框
     * 	@value share 底部分享示例
     * @property {Boolean} animation = [true|false] 是否开启动画
     * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
     * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
     * @property {String}  backgroundColor 主窗口背景色
     * @property {String}  maskBackgroundColor 蒙版颜色
     * @property {Boolean} safeArea		   是否适配底部安全区
     * @property {Boolean} closeable Boolean | 是否显示关闭图标，默认true
     * @property {String} closeIcon String | 关闭iconfont，默认‘close’ ---还有close-o，或者其他自定义icon
     * @property {String} closeIconType String | 关闭颜色，默认‘6’ 参照组件u-icon
     * @property {String} closeIconPos = [top-left|top-right|top-center|bottom-left|bottom-right|bottom-center] String | 关闭图标位置
     * 	@value top-left 左上角
     * 	@value top-right 右上角
     * 	@value bottom-left 左下角
     * 	@value bottom-right 右下角
     * @property {Number} closeIconSize Number | 关闭图标大小，默认32(单位rpx)
     * @property {Boolean} closeType Boolean | 显示关闭图标还是文本(文本包含确定和取消)，默认icon,------icon,text,
     * @property {Boolean} isCustomBtn Boolean | 自定义按钮
     * @property {String} customBtnText String | 自定义按钮文本
     * @property {Object} customBtnStyle Object | 自定义按钮样式
     * @property {String}  title String | 弹窗标题
     * @property {String}  titleBorder String | 弹窗底部边框
     * @property {String}  height String | 弹窗内容高度
     * @property {String}  round String | 弹窗圆角
     * @property {Boolean}  isConfirmClose Boolean | 是否点击确认按钮时主动关闭弹窗
     * @event {Function} change 打开关闭弹窗触发，e={show: false}
     * @event {Function} maskClick 点击遮罩触发
     * @event {Function} callBack 确定按钮回调方法
     * @event {Function} custom_change 自定义按钮回调方法
     */

    export default {
        name: 'uniPopup',
        components: {
            // #ifdef H5
            keypress,
            // #endif
        },
        emits: ['change', 'maskClick', 'callBack', 'callBackCustom'],
        props: {
            // 开启动画
            propAnimation: {
                type: Boolean,
                default: true,
            },
            // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
            // message: 消息提示 ; dialog : 对话框
            propType: {
                type: String,
                default: 'bottom',
            },
            // maskClick
            propIsMaskClick: {
                type: Boolean,
                default: null,
            },
            // TODO 2 个版本后废弃属性 ，使用 isMaskClick
            propMaskClick: {
                type: Boolean,
                default: null,
            },
            propBackgroundColor: {
                type: String,
                default: 'none',
            },
            propSafeArea: {
                type: Boolean,
                default: true,
            },
            propMaskBackgroundColor: {
                type: String,
                default: 'rgba(0, 0, 0, 0.4)',
            },
            // 是否显示关闭图标
            propCloseable: {
                type: Boolean,
                default: true,
            },
            // icon
            propCloseIcon: {
                type: String,
                default: 'close-line',
            },
            // icon颜色
            propCloseIconType: {
                type: String,
                default: '6',
            },
            // 关闭图标大小
            propCloseIconSize: {
                type: Number,
                default: 32,
            },
            // 关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角，top-center为外部上部中间位置， bottom-center为外部底部中间位置，
            propCloseIconPos: {
                type: String,
                validator: (value) => ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'].includes(value),
                default: 'top-right',
            },
            propCloseType: {
                type: String,
                default: 'icon',
            },
            propIsCustomBtn: {
                type: Boolean,
                default: false,
            },
            propCustomBtnText: {
                type: String,
                default: '自定义',
            },
            propCustomBtnStyle: {
                type: String,
                default: '',
            },
            // 标题
            propTitle: {
                type: String,
                default: '',
            },
            propTitleBorder: {
                type: Boolean,
                default: false,
            },
            propHeight: {
                type: String,
                default: 'auto',
            },
            propRound: {
                type: Number,
                default: 0,
            },
            propIsConfirmClose: {
                type: Boolean,
                default: true,
            },
            propWidth: {
                type: String,
                default: '',
            },
        },

        watch: {
            /**
             * 监听type类型
             */
            propType: {
                handler: function (type) {
                    if (!this.config[type]) return;
                    this[this.config[type]](true);
                },
                immediate: true,
            },
            isDesktop: {
                handler: function (newVal) {
                    if (!this.config[newVal]) return;
                    this[this.config[this.propType]](true);
                },
                immediate: true,
            },
            /**
             * 监听遮罩是否可点击
             * @param {Object} val
             */
            propMaskClick: {
                handler: function (val) {
                    this.mkclick = val;
                },
                immediate: true,
            },
            propIsMaskClick: {
                handler: function (val) {
                    this.mkclick = val;
                },
                immediate: true,
            },
            // H5 下禁止底部滚动
            showPopup(show) {
                // #ifdef H5
                // fix by mehaotian 处理 h5 滚动穿透的问题
                document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible';
                // #endif
            },
        },
        data() {
            return {
                duration: 300,
                ani: [],
                showPopup: false,
                showTrans: false,
                popupWidth: 0,
                popupHeight: 0,
                config: {
                    top: 'top',
                    bottom: 'bottom',
                    center: 'center',
                    left: 'left',
                    right: 'right',
                    message: 'top',
                    dialog: 'center',
                    share: 'bottom',
                },
                maskClass: {
                    position: 'fixed',
                    bottom: 0,
                    top: '-1000%',
                    left: 0,
                    right: 0,
                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
                },
                transClass: {
                    position: 'fixed',
                    left: 0,
                    right: 0,
                },
                maskShow: true,
                mkclick: true,
                popupstyle: this.isDesktop ? 'fixforpc-top' : 'top',
            };
        },
        computed: {
            isDesktop() {
                return this.popupWidth >= 500 && this.popupHeight >= 500;
            },
            bg() {
                if (this.propBackgroundColor === '' || this.propBackgroundColor === 'none') {
                    return '#fff';
                }
                return this.propBackgroundColor;
            },
            // transition固定样式
            transitionFixedStyle() {
                let style = {
                    backgroundColor: this.bgColor,
                    zIndex: this.zIndex,
                };
                switch (this.mode) {
                    case 'top':
                        style['borderBottomLeftRadius'] = this.propRound + 'px';
                        style['borderBottomRightRadius'] = this.propRound + 'px';
                        break;
                    case 'bottom':
                        style['borderTopLeftRadius'] = this.propRound + 'px';
                        style['borderTopRightRadius'] = this.propRound + 'px';
                        break;
                    case 'left':
                        style['borderTopRightRadius'] = this.propRound + 'px';
                        style['borderBottomRightRadius'] = this.propRound + 'px';
                        break;
                    case 'right':
                        style['borderTopLeftRadius'] = this.propRound + 'px';
                        style['borderBottomLeftRadius'] = this.propRound + 'px';
                        break;
                    case 'center':
                        style['borderRadius'] = this.propRound + 'px';
                        break;
                }

                return style;
            },
            // 关闭Icon样式
            closeIconStyle() {
                let style = {
                    zIndex: 999,
                };
                let posSize = 28;
                switch (this.propCloseIconPos) {
                    case 'top-left':
                        style['position'] = 'absolute';
                        style['top'] = '0rpx';
                        style['left'] = '0rpx';
                        break;
                    case 'top-right':
                        style['position'] = 'absolute';
                        style['top'] = '0rpx';
                        style['right'] = '0rpx';
                        break;
                    case 'top-center':
                        style['position'] = 'absolute';
                        style['top'] = -(posSize * 4) + 'rpx';
                        style['left'] = '0rpx';
                        style['right'] = '0rpx';
                        break;
                    case 'bottom-left':
                        style['position'] = 'absolute';
                        style['bottom'] = '0rpx';
                        style['left'] = '0rpx';
                        break;
                    case 'bottom-right':
                        style['position'] = 'absolute';
                        style['bottom'] = '0rpx';
                        style['right'] = '0rpx';
                        break;
                    case 'bottom-center':
                        style['position'] = 'absolute';
                        style['bottom'] = -(posSize * 4) + 'rpx';
                        style['left'] = '0rpx';
                        style['right'] = '0rpx';
                        break;
                    default:
                        if (this.propTitle != '') {
                            style['position'] = 'absolute';
                            style['top'] = '0rpx';
                            style['right'] = '0rpx';
                        }
                        break;
                }
                let result = '';
                Object.keys(style).forEach(key => {
                    result += `${key}: ${style[key]};`;
                });
                return result;
            },
        },
        mounted() {
            const fixSize = () => {
                const { windowWidth, windowHeight, windowTop, safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync();
                this.popupWidth = windowWidth;
                this.popupHeight = windowHeight + (windowTop || 0);
                // TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
                if (safeArea && this.propSafeArea) {
                    // #ifdef MP-WEIXIN
                    this.safeAreaInsets = screenHeight - safeArea.bottom;
                    // #endif
                    // #ifndef MP-WEIXIN
                    this.safeAreaInsets = safeAreaInsets.bottom;
                    // #endif
                } else {
                    this.safeAreaInsets = 0;
                }
            };
            fixSize();
            // #ifdef H5
            // window.addEventListener('resize', fixSize)
            // this.$once('hook:beforeDestroy', () => {
            // 	window.removeEventListener('resize', fixSize)
            // })
            // #endif
            // #ifdef APP-NVUE
            // 修复nvue 遮罩层位置问题
            const data = uni.getWindowInfo();
            this.maskClass.top = - data.windowHeight + 'px;';
            // #endif
        },
        // #ifndef VUE3
        // TODO vue2
        destroyed() {
            this.setH5Visible();
        },
        // #endif
        // #ifdef VUE3
        // TODO vue3
        unmounted() {
            this.setH5Visible();
        },
        // #endif
        created() {
            // this.mkclick =  this.propIsMaskClick || this.propMaskClick
            if (this.propIsMaskClick === null && this.propMaskClick === null) {
                this.mkclick = true;
            } else {
                this.mkclick = this.propIsMaskClick != null ? this.propIsMaskClick : this.propMaskClick;
            }
            if (this.propAnimation) {
                this.duration = 300;
            } else {
                this.duration = 0;
            }
            // TODO 处理 message 组件生命周期异常的问题
            this.messageChild = null;
            // TODO 解决头条冒泡的问题
            this.clearPropagation = false;
            this.maskClass.backgroundColor = this.propMaskBackgroundColor;
        },
        methods: {
            setH5Visible() {
                // #ifdef H5
                // fix by mehaotian 处理 h5 滚动穿透的问题
                document.getElementsByTagName('body')[0].style.overflow = 'visible';
                // #endif
            },
            /**
             * 公用方法，不显示遮罩层
             */
            closeMask() {
                this.maskShow = false;
            },
            /**
             * 公用方法，遮罩层禁止点击
             */
            disableMask() {
                this.mkclick = false;
            },
            // TODO nvue 取消冒泡
            clear(e) {
                // #ifndef APP-NVUE
                e.stopPropagation();
                // #endif
                this.clearPropagation = true;
            },

            open(direction) {
                // fix by mehaotian 处理快速打开关闭的情况
                if (this.showPopup) {
                    clearTimeout(this.timer);
                    this.showPopup = false;
                }
                let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'];
                if (!(direction && innerType.indexOf(direction) != -1)) {
                    direction = this.propType;
                }
                if (!this.config[direction]) {
                    return;
                }
                this[this.config[direction]]();
                this.$emit('change', {
                    show: true,
                    type: direction,
                });
            },
            close(type) {
                this.showTrans = false;
                this.$emit('change', {
                    show: false,
                    type: this.propType,
                });
                this.$emit('close')
                clearTimeout(this.timer);
                // // 自定义关闭事件
                // this.customOpen && this.customClose()
                this.timer = setTimeout(() => {
                    this.showPopup = false;
                }, 300);
            },
            // TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
            touchstart() {
                this.clearPropagation = false;
            },

            onTap() {
                if (this.clearPropagation) {
                    // fix by mehaotian 兼容 nvue
                    this.clearPropagation = false;
                    return;
                }
                this.$emit('maskClick');
                if (!this.mkclick) return;
                this.close();
            },
            /**
             * 顶部弹出样式处理
             */
            top(type) {
                this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top';
                this.ani = ['slide-top'];
                this.transClass = {
                    position: 'fixed',
                    left: 0,
                    right: 0,
                    backgroundColor: this.bg,
                };
                // TODO 兼容 type 属性 ，后续会废弃
                if (type) return;
                this.showPopup = true;
                this.showTrans = true;
                this.$nextTick(() => {
                    if (this.messageChild && this.propType === 'message') {
                        this.messageChild.timerClose();
                    }
                });
            },
            /**
             * 底部弹出样式处理
             */
            bottom(type) {
                this.popupstyle = 'bottom';
                this.ani = ['slide-bottom'];
                this.transClass = {
                    position: 'fixed',
                    left: 0,
                    right: 0,
                    bottom: 0,
                    paddingBottom: this.safeAreaInsets + 'px',
                    backgroundColor: this.bg,
                };
                // TODO 兼容 type 属性 ，后续会废弃
                if (type) return;
                this.showPopup = true;
                this.showTrans = true;
            },
            /**
             * 中间弹出样式处理
             */
            center(type) {
                this.popupstyle = 'center';
                this.ani = ['zoom-out', 'fade'];
                this.transClass = {
                    position: 'fixed',
                    /* #ifndef APP-NVUE */
                    display: 'flex',
                    flexDirection: 'column',
                    /* #endif */
                    bottom: 0,
                    left: 0,
                    right: 0,
                    top: 0,
                    justifyContent: 'center',
                    alignItems: 'center',
                };
                // TODO 兼容 type 属性 ，后续会废弃
                if (type) return;
                this.showPopup = true;
                this.showTrans = true;
            },
            left(type) {
                this.popupstyle = 'left';
                this.ani = ['slide-left'];
                this.transClass = {
                    position: 'fixed',
                    left: 0,
                    bottom: 0,
                    top: 0,
                    backgroundColor: this.bg,
                    /* #ifndef APP-NVUE */
                    display: 'flex',
                    flexDirection: 'column',
                    /* #endif */
                };
                // TODO 兼容 type 属性 ，后续会废弃
                if (type) return;
                this.showPopup = true;
                this.showTrans = true;
            },
            right(type) {
                this.popupstyle = 'right';
                this.ani = ['slide-right'];
                this.transClass = {
                    position: 'fixed',
                    bottom: 0,
                    right: 0,
                    top: 0,
                    backgroundColor: this.bg,
                    /* #ifndef APP-NVUE */
                    display: 'flex',
                    flexDirection: 'column',
                    /* #endif */
                };
                // TODO 兼容 type 属性 ，后续会废弃
                if (type) return;
                this.showPopup = true;
                this.showTrans = true;
            },
            comfirm() {
                if (this.propIsConfirmClose) {
                    this.close();
                }
                this.$emit('callBack');
            },
            // 自定义按钮点击回调
            custom_change() {
                if (this.propIsConfirmClose) {
                    this.close();
                }
                this.$emit('callBackCustom');
            },
        },
    };
</script>
<style lang="scss" scoped>
    .uni-popup {
        position: fixed;
        max-width: 1600rpx;
        margin: 0 auto;
        /* #ifndef APP-NVUE */
        z-index: 99;

        /* #endif */
        &.top,
        &.left,
        &.right {
            /* #ifdef H5 */
            top: var(--window-top);
            /* #endif */
            /* #ifndef H5 */
            top: 0;
            /* #endif */
        }

        &.top {
            .popup-close {
                display: none;
            }
        }
        &.center,
        &.bottom,
        &.left {
            .popup-close {
                display: flex;
                justify-content: flex-end;
            }
        }

        &.right {
            .popup-close {
                display: flex;
                justify-content: flex-start;
            }
        }

        .uni-popup__wrapper {
            /* #ifndef APP-NVUE */
            display: block;
            /* #endif */
            position: relative;
            overflow-y: auto;

            /* iphonex 等安全区设置，底部安全区适配 */
            /* #ifndef APP-NVUE */
            // padding-bottom: constant(safe-area-inset-bottom);
            // padding-bottom: env(safe-area-inset-bottom);
            /* #endif */
            &.left,
            &.right {
                /* #ifdef H5 */
                padding-top: var(--window-top);
                /* #endif */
                /* #ifndef H5 */
                padding-top: 0;
                /* #endif */
                flex: 1;
            }
        }

        .popup-close {
            padding: 28rpx;
            &.top-center,
            &.bottom-center {
                justify-content: center;
            }
        }

        .title {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    }

    .fixforpc-z-index {
        /* #ifndef APP-NVUE */
        z-index: 999;
        /* #endif */
    }

    .fixforpc-top {
        top: 0;
    }
    .fw {
        font-weight: 700;
    }
    .tc {
        text-align: center;
    }
</style>
