<template>
    <view style="height: 100%">
        <wux-animation-group :wux-class="classes.wrap" :in="in" :classNames="classNames" @click="onClick" :wrapStyle="" disableScroll />
    </view>
</template>

<script>
'use strict';
import wuxAnimationGroup from '../animation-group/index';
var _baseComponent = _interopRequireDefault(require('../helpers/baseComponent'));
function _interopRequireDefault(e) {
    return e && e.__esModule
        ? e
        : {
              default: e
          };
}
(0, _baseComponent.default)({
    properties: {
        prefixCls: {
            type: String,
            value: 'wux-backdrop'
        },
        transparent: {
            type: Boolean,
            value: false
        },
        zIndex: {
            type: Number,
            value: 1000
        },
        classNames: {
            type: null,
            value: 'wux-animate--fadeIn'
        }
    },
    computed: {
        classes: [
            'prefixCls, transparent',
            function (e, t) {
                return {
                    wrap: t ? ''.concat(e, '--transparent') : e
                };
            }
        ]
    },
    methods: {
        retain: function () {
            ('number' == typeof this.backdropHolds && this.backdropHolds) || (this.backdropHolds = 0);
            this.backdropHolds = this.backdropHolds + 1;
            if (1 === this.backdropHolds) {
                this.setData({
                    in: true
                });
            }
        },
        release: function () {
            if (1 === this.backdropHolds) {
                this.setData({
                    in: false
                });
            }
            this.backdropHolds = Math.max(0, this.backdropHolds - 1);
        },
        onClick: function () {
            this.$emit('click');
        }
    }
});
</script>
<style>
.wux-backdrop {
    background: rgba(0, 0, 0, 0.4);
}
.wux-backdrop,
.wux-backdrop--transparent {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.wux-backdrop--transparent {
    background: 0 0;
}
</style>
