<template>
    <div
        class="nus_loadingc"
        @click="_onClick"
        @tap="_onTap">
        <div
            class="nu_loading-icon"
            :style="{width: mySize}">
            <div
                class="nu_loading">
                <div
                    class="nu_loading-cont">
                    <slot>
                        <svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'>
                            <defs>
                                <line
                                    :id="fillId"
                                    x1='60'
                                    x2='60'
                                    y1='7'
                                    y2='27'
                                    stroke='currentcolor'
                                    stroke-width='8%'
                                stroke-linecap='round'/>
                            </defs>
                            <g>
                                <use :xlink:href="'#' + fillId"
                                    v-for="(item, index) in 12"
                                    :key="index"
                                    :opacity="Math.min(0.27 + (index < 4 ? 0 : (index - 4) * 0.13), 1)"
                                    :transform="'rotate(' + (30 * index) + ' 60,60)'"/>
                            </g>
                        </svg>
                    </slot>
                </div>
            </div>
        </div>
        <nu-tag
            class="nu_loading-text"
            v-if="nameText"
            :nameText="nameText">
        </nu-tag>
    </div>
</template>

<script>
import LoadingTmp from '../_comm/LoadingTmp';
import NuTag from '../../tag';
export default {
    extends: LoadingTmp,
    name: 'NuLoadingc',
    components: {
        NuTag
    }
};
</script>

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';
.nu_loadingc-popup {
    .nu_content-wrap {
        padding: 8px;
        background: $nuloadingc-bg;
        border-radius: 5px;
    }
    .nus_loadingc {
        color: $nuloadingc-self-color;
    }
    .nu_content{
        line-height: 1;
    }
}
.nus_loadingc {
    color: $nuloadingc-color;
    box-sizing: border-box;
    display: inline-block;
    .nu_loading-icon{
        width: $nuloadingc-size;
        margin: 0 auto;
    }
    .nu_loading{
        color: inherit;
        padding-top: 100%;
        width: 100%;
        height: 0;
        position: relative;
        overflow: hidden;
    }
    .nu_loading-cont{
        color: inherit;
        width: 100%;
        height: 100%;
        position: absolute;
        transform-origin: 50% 50%;
        animation: nu_spinner-spin-loadingc 1s step-end infinite;
        left: 0;
        top: 0;
        font-size: 0;
    }
    .nu_loading-text{
        margin-top: 6%;
        width: 100%;
        overflow: hidden;
        color: inherit;
        border-color:transparent;
        font-size: $nuloading-fontsize;
    }
    @include spinnerSpin('loadingc', 12);
}

</style>
