<template>
    <view
        class="wrapper box-loading"
    >
        <view
            v-for="n in nums"
            :key="n"
            class="box-loading__item c-gap-top-large c-gap-inner-bottom-large wrapper-sm"
        >
            <view class="c-row c-gap-inner-top-large">
                <view class="c-span6 skt-cell" style="height: 20px;"/>
                <view class="c-span6"/>
            </view>
            <view class="c-row c-gap-top-large c-gap-inner-top">
                <view class="c-span3 skt-cell" style="height: 76px;"/>
                <view class="c-span9 wrapper-sm c-gap-inner-top">
                    <view class="skt-cell c-gap-bottom" style="height: 20px;"/>
                    <view class="skt-cell c-gap-bottom" style="height: 20px;"/>
                </view>
            </view>
            <view class="c-row c-gap-top-large c-gap-inner-top">
                <view class="c-span3 skt-cell" style="height: 76px;"/>
                <view class="c-span9 wrapper-sm c-gap-inner-top">
                    <view class="skt-cell c-gap-bottom" style="height: 20px;"/>
                    <view class="skt-cell c-gap-bottom" style="height: 20px;"/>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
/**
* @file boxLoading 模块加载中loading占位
* @author zhangeryi
* @categories 业务组件
* @tags [component]
*/
export default {
    config: {
        component: true
    },
    props: {
        /* 模块数量 */
        num: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            nums: []
        };
    },
    created() {
        let nums = [];
        for (let i = 0; i < this.num; i++) {
            nums.push(i);
        }
        this.nums = nums;
    }
};
</script>
<style lang="less" scoped>
.wrapper {
    padding-left: .17rem;
    padding-right: .17rem;
    &-sm {
        padding-left: .15rem;
        padding-right: .15rem;
    }
}
.box-loading {
    &__item {
        border-radius: .08rem;
        background: #fff;
        box-shadow: 0 3px 20px rgba(0, 0, 0, .08);
        position: relative;
        overflow: hidden;
        &::after {
            display: block;
            background: rgba(255, 255, 255, .5);
            width: 20%;
            height: 100%;
            position: absolute;
            content: '';
            left: 20%;
            top: 0;
            animation: glintier 1.5s linear 0s infinite;
            filter: blur(25px);
            transform: translateX(100%) skewX(-15deg);
            opacity: 1;
        }
        .skt-cell {
            background-color: #f6f6f6;
            border-radius: .1rem;
        }
    }
}
@keyframes glintier {
    0% {
        transform: translateX(-200%) skewX(-15deg);
        opacity: 0;
    }
    75% {
        transform: translateX(-200%) skewX(-15deg);
        opacity: .6;
    }
    100% {
        transform: translateX(200%) skewX(-15deg);
        opacity: 1;
    }
}
</style>
