<template>
    <div class="nus_confirms">
        <div class="nu_confirm-wrap" :class="[!isConfirm && 'nu_active']">
            <span class="nu_cancel"
                v-if="cancelText"
                :data-text="cancelText"
                @click="_cancel($event)"
                @tap="_cancel($event)"></span>
            <span class="nu_confirm"
                v-if="confirmText"
                :data-text="confirmText"
                @click="_confirm($event)"
                @tap="_confirm($event)"></span>
        </div>
    </div>
</template>

<script>
import ConfirmbarTmp from '../_comm/ConfirmbarTmp';
export default {
    extends: ConfirmbarTmp,
    name: 'NuConfirmbars'
};
</script>

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

.nus_confirms {
    position: relative;
    border-bottom: solid 1px $brEee;
    pointer-events: none;
    // height: 32px;
    .nu_confirm-wrap {
        width: 100%;
        height: 100%;
        @include after();
    }
    .nu_cancel,
    .nu_confirm {
        pointer-events: auto;
        display: inline-block;
        position: relative;
        overflow: hidden;
        line-height: 1.2;
        padding: 6px 12px 4px 12px;
        font-size: $fontSizeLarge;
        color: $colorDefault;
        font-weight: 500;
        height: 100%;
        cursor: pointer;
        &::after{
            content: attr(data-text);
            display: inline-block;
            position: relative;
            z-index: 1;
        }
        &::before{
            position: absolute;
            content: '';
            display: inline-block;
            background: $bgEee;
            left: 0;
            top:0;
            bottom: 0;
            right: 0;
            transform-origin: 100% 100%;
        }
    }
    .nu_cancel {
        color: $color999;
        float: left;
        padding-right: 20px;
        &::before{
            transform: skew(18deg);
        }
    }
    .nu_confirm {
        float: right;
        padding-left: 20px;
        &::before{
            transform: skew(-18deg);
        }
    }
    .nu_active{
        .nu_confirm{
            display: none;
        }
        .nu_cancel{
            float: right;
            padding-left: 20px;
            padding-right: 12px;
            &::before{
                transform: skew(-18deg);
            }
        }
    }
}
</style>
