<template>
    <div>
        <text v-if="isBlur">{{ text1 }}</text>
        <text v-if="isBlur" class="blur-medium">{{ text2 }}</text>
        <text v-if="isBlur" class="blur-heavy">{{ text3 }}</text>
        <text v-if="!isBlur">{{ text }}</text>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text1: '',
            text2: '',
            text3: ''
        }
    },
    watch: {
        text(newValue, oldValue) {
            if (this.text.length == 0) {
                return
            }
            this.text1 = newValue.substring(0, Math.ceil(newValue.length / 5));
            this.text2 = newValue.substring(Math.ceil(newValue.length / 5), Math.ceil(newValue.length / 5) + Math.ceil(newValue.length / 5))
            this.text3 = newValue.substring(Math.ceil(newValue.length / 5) + Math.ceil(newValue.length / 5), newValue.length - 1)

        }
    },
    props: {
        text: {
            type: String,
            default: ''
        },
        isBlur: {
            type: Boolean,
            default: true
        }
    },
    mounted() {
        if (this.text.length == 0) {
            return
        }
        // console.log(this.text)
        // this.text1 = this.text.substring(0, Math.ceil(this.text.length/10) );
        // this.text2 = this.text.substring(Math.ceil(this.text.length/10),Math.ceil(this.text.length/10)+ Math.ceil(this.text.length/10) )
        // this.text3 = this.text.substring(Math.ceil(this.text.length/10)+ Math.ceil(this.text.length/10),this.text.length-1)
    },

}
</script>

<style lang="less" scoped>
.blur-light {
    color: transparent;
    text-shadow: 2rpx 2rpx 4rpx #000000;
}

.blur-medium {
    color: transparent;
    text-shadow: 2rpx 2rpx 6rpx #000000;
}

.blur-heavy {
    color: transparent;
    text-shadow: 2rpx 2rpx 16rpx #000000;
}
</style>