<template>
    <view style="height: 100%">
        <wux-backdrop id="wux-backdrop" v-if="mask" @click="onMaskClick($event, { tagId: 'wux-backdrop' })" :zIndex="zIndex" />
        <view :class="'wux-class ' + classes.wrap" :style="extStyle">
            <wux-animation-group
                :wux-class="prefixCls"
                :in="popupVisible"
                :classNames="transitionName"
                @exited="onExited"
                :wrapStyle=""
                :mountOnEnter="mountOnEnter"
                :unmountOnExit="unmountOnExit"
            >
                <view :class="'wux-content-class ' + classes.content">
                    <view :class="'wux-header-class ' + classes.hd" v-if="hasHeader">
                        <view :class="classes.title" v-if="title">{{ title }}</view>
                        <block v-else>
                            <slot name="header"></slot>
                        </block>
                    </view>
                    <view :class="'wux-body-class ' + classes.bd">
                        <view v-if="content">{{ content }}</view>
                        <slot></slot>
                    </view>
                    <view :class="'wux-footer-class ' + classes.ft" v-if="hasFooter">
                        <view :class="classes.extra" v-if="extra">{{ extra }}</view>
                        <block v-else>
                            <slot name="footer"></slot>
                        </block>
                    </view>
                    <view :class="'wux-close-class ' + classes.close" v-if="closable" @tap="close">
                        <text :class="classes.x"></text>
                    </view>
                </view>
            </wux-animation-group>
        </view>
    </view>
</template>

<script>
'use strict';
import wuxAnimationGroup from '../animation-group/index';
import wuxBackdrop from '../backdrop/index';
var _baseComponent = _interopRequireDefault(require('../helpers/baseComponent'));
var _classNames2 = _interopRequireDefault(require('../helpers/classNames'));
var _styleToCssString = _interopRequireDefault(require('../helpers/styleToCssString'));
var _index = require('../index');
function _interopRequireDefault(e) {
    return e && e.__esModule
        ? e
        : {
              default: e
          };
}
function _defineProperty(e, t, a) {
    t in e
        ? Object.defineProperty(e, t, {
              value: a,
              enumerable: true,
              configurable: true,
              writable: true
          })
        : (e[t] = a);
    return e;
}
(0, _baseComponent.default)({
    useSafeArea: true,
    externalClasses: ['wux-content-class', 'wux-header-class', 'wux-body-class', 'wux-footer-class', 'wux-close-class'],
    properties: {
        prefixCls: {
            type: String,
            value: 'wux-popup'
        },
        animationPrefixCls: {
            type: String,
            value: 'wux-animate'
        },
        title: {
            type: String,
            value: ''
        },
        content: {
            type: String,
            value: ''
        },
        extra: {
            type: String,
            value: ''
        },
        position: {
            type: String,
            value: 'center',
            observer: 'getTransitionName'
        },
        wrapStyle: {
            type: [String, Object],
            value: '',
            observer: function (e) {
                this.setData({
                    extStyle: (0, _styleToCssString.default)(e)
                });
            }
        },
        closable: {
            type: Boolean,
            value: false
        },
        mask: {
            type: Boolean,
            value: true
        },
        maskClosable: {
            type: Boolean,
            value: true
        },
        visible: {
            type: Boolean,
            value: false,
            observer: 'setPopupVisible'
        },
        zIndex: {
            type: Number,
            value: 1000
        },
        hasHeader: {
            type: Boolean,
            value: true
        },
        hasFooter: {
            type: Boolean,
            value: true
        },
        mountOnEnter: {
            type: Boolean,
            value: true
        },
        unmountOnExit: {
            type: Boolean,
            value: true
        }
    },
    data: {
        transitionName: '',
        popupVisible: false,
        extStyle: ''
    },
    computed: {
        classes: [
            'prefixCls, position, safeAreaConfig, isIPhoneX',
            function (e, t, a, i) {
                var o;
                return {
                    wrap: (0, _classNames2.default)(
                        ''.concat(e, '-position'),
                        (_defineProperty((o = {}), ''.concat(e, '-position--').concat(t), t), _defineProperty(o, ''.concat(e, '-position--is-iphonex'), a.bottom && i), o)
                    ),
                    content: ''.concat(e, '__content'),
                    hd: ''.concat(e, '__hd'),
                    title: ''.concat(e, '__title'),
                    bd: ''.concat(e, '__bd'),
                    ft: ''.concat(e, '__ft'),
                    extra: ''.concat(e, '__extra'),
                    close: ''.concat(e, '__close'),
                    x: ''.concat(e, '__close-x')
                };
            }
        ]
    },
    methods: {
        close: function () {
            this.$emit('close');
        },
        onMaskClick: function () {
            if (this.maskClosable) {
                this.close();
            }
        },
        onExited: function () {
            this.$emit('closed');
        },
        getTransitionName: function (e) {
            if (0 < arguments.length && void 0 !== e) {
                var t = e;
            } else {
                var t = this.position;
            }
            var a = this.animationPrefixCls;
            var i = '';
            switch (t) {
                case 'top':
                    i = ''.concat(a, '--slideInDown');
                    break;
                case 'right':
                    i = ''.concat(a, '--slideInRight');
                    break;
                case 'bottom':
                    i = ''.concat(a, '--slideInUp');
                    break;
                case 'left':
                    i = ''.concat(a, '--slideInLeft');
                    break;
                default:
                    i = ''.concat(a, '--fadeIn');
            }
            this.setData({
                transitionName: i
            });
        },
        setPopupVisible: function (e) {
            if (this.popupVisible !== e) {
                this.setData({
                    popupVisible: e
                });
                this.setBackdropVisible(e);
            }
        },
        setBackdropVisible: function (e) {
            if (this.mask && this.$wuxBackdrop) {
                this.$wuxBackdrop[e ? 'retain' : 'release']();
            }
        }
    },
    created: function () {
        if (this.mask) {
            this.$wuxBackdrop = (0, _index.$wuxBackdrop)('#wux-backdrop', this);
        }
    },
    attached: function () {
        this.setPopupVisible(this.visible);
        this.getTransitionName();
    }
});
</script>
<style>
.wux-popup {
    position: fixed;
    z-index: 1000;
    width: 80%;
    max-width: 600rpx;
}
.wux-popup-position.wux-popup-position--center .wux-popup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.wux-popup-position.wux-popup-position--center .wux-popup__content {
    border-radius: 8rpx;
}
.wux-popup-position.wux-popup-position--center .wux-popup__hd {
    padding: 1.3em 1.6em 0.5em;
}
.wux-popup-position.wux-popup-position--center .wux-popup__bd {
    padding: 0 1.6em 0.8em;
}
.wux-popup-position.wux-popup-position--center .wux-popup__ft::after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}
.wux-popup-position.wux-popup-position--top .wux-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
}
.wux-popup-position.wux-popup-position--right .wux-popup {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}
.wux-popup-position.wux-popup-position--bottom .wux-popup {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
}
.wux-popup-position.wux-popup-position--left .wux-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 80%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}
.wux-popup-position.wux-popup-position--is-iphonex .wux-popup__content {
    padding-bottom: 68rpx;
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .wux-popup-position.wux-popup-position--is-iphonex .wux-popup__content {
        padding-bottom: constant(safe-area-inset-bottom);
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .wux-popup-position.wux-popup-position--is-iphonex .wux-popup__content {
        padding-bottom: env(safe-area-inset-bottom);
    }
}
.wux-popup__content {
    position: relative;
    background-color: #fff;
    border: 0;
    background-clip: padding-box;
    height: 100%;
    text-align: center;
    overflow: hidden;
}
.wux-popup__title {
    font-weight: 400;
    font-size: 36rpx;
    color: rgba(0, 0, 0, 0.85);
}
.wux-popup__bd {
    min-height: 80rpx;
    font-size: 30rpx;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-all;
    color: rgba(0, 0, 0, 0.45);
}
.wux-popup__ft {
    position: relative;
    line-height: 96rpx;
    font-size: 36rpx;
    display: flex;
}
.wux-popup__close {
    border: 0;
    padding: 6rpx;
    background-color: transparent;
    outline: 0;
    position: absolute;
    top: 12rpx;
    right: 12rpx;
    height: 42rpx;
    width: 42rpx;
}
.wux-popup__close-x {
    display: inline-block;
    width: 30rpx;
    height: 30rpx;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23888%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M1.414%200l28.284%2028.284-1.414%201.414L0%201.414z%22%2F%3E%3Cpath%20d%3D%22M28.284%200L0%2028.284l1.414%201.414L29.698%201.414z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
</style>
