<template>
    <div class="nus_aspect"
        @click="_onClick"
        @tap="_onTap"
        :style="myAspect && !isClass && {paddingTop: myAspect}"
        :class="[myAspect && 'nu_aspect-base', isClass && myAspect, !myAspect && className]">
        <div class="nu_aspect-wrap" v-if="myAspect"
            :class="className">
            <div class="nu_aspect-cont">
                <slot></slot>
            </div>
        </div>
        <template v-else>
            <slot></slot>
        </template>
    </div>
</template>

<script>
import WidgetTmp from '../_comm/WidgetTmp';
export default {
    name: 'NuAspect',
    extends: WidgetTmp,
    props: {
        // 纵横比
        aspect: {
            type: [Boolean, String, Number]
        },
        /**
         * className
         */
        className: {
            type: String
        }
    },
    data() {
        return {
            isClass: false
        };
    },
    computed: {
        /**
         * 纵横比
         * @returns {String}
         */
        myAspect() {
            let _that = this;
            let _aspect = _that.aspect;
            _that.isClass = false;
            if (_aspect === true || _aspect + '' === '1') {
                _aspect = 'nu_aspect';
                _that.isClass = true;
            } else {
                _aspect = ((_aspect || '') + '').replace('%', '');
                let _num = parseFloat(_aspect, 10);
                if (!isNaN(_num)) {
                    switch (typeof _num) {
                        case 'number':
                            _aspect = Math.abs(_aspect);
                            if (_aspect > 5) {
                                _aspect = _aspect + '%';
                            } else if (_aspect > 0) {
                                _aspect = (_aspect * 100) + '%';
                            }
                            break;
                        default:
                            break;
                    }
                } else {
                    _that.isClass = true;
                }
            }
            return _aspect;
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_aspect {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    &.nu_aspect-base{
        height: 0;
        position: relative;
    }
    &.nu_aspect{
        padding-top: 100%;
    }
    .nu_aspect-wrap{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .nu_aspect-cont{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
}

</style>
