<template>
    <div
        class="nus_layercc"
        :class="[styleName && 'nu_layer-' + styleName]">
        <div
            class="nu_layer-cont"
            @click.stop="_onClick"
            @tap.stop="_onTap">
            <slot></slot>
        </div>
        <div
            class="nu_layer-close nu_icon"
            v-if="styleName === 'cb' || styleName === 'rt'"
            @click.stop="_cancel">
            {{cancelText}}
        </div>
    </div>
</template>
<script>
import LayerTmp from '../_comm/LayerTmp';
export default {
    extends: LayerTmp,
    name: 'NuLayercc',
    props: {
        /**
         * 样式（cb|rt）
         */
        styleName: {
            type: String,
            default: ''
        },

        /**
         * 取消按钮显示的文本
         */
        cancelText: {
            type: String,
            default: '\ue606'
        }
    }
};
</script>

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';
.nu_layercc-popup {
    &.nus_popup{
        .nu_content-wrap{
            width: 75%;
        }
    }
}
.nus_layercc {
    width: 100%;
    max-height: 100%;
    position: relative;
    pointer-events: none;
    &.nu_layer{
        @at-root #{&}-{
            &cb{
                // height: 430px;
                padding-bottom: 80px;
                .nu_layer-cont{
                    height: 100%;
                }
                .nu_layer-close {
                    bottom: 0;
                    font-size: $fontSizeSmall * 2;
                    color: $colorFff;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
            &rt{
                // height: 320px;
                .nu_layer-cont{
                    padding-top: 20px;
                }
                .nu_layer-close{
                    right: 4px;
                    top: 4px;
                }
            }
        }
    }
    .nu_layer-cont {
        height: 100%;
        border-radius: 5px;
        background: $bgFff;
        padding: 10px;
        overflow-y: auto;
        box-shadow: 0 0 6px rgba(0,0,0,.3);
        pointer-events: auto;
    }
    .nu_layer-close {
        position: absolute;
        pointer-events: auto;
        @include iconPadding();
    }
}
</style>
