<template>
    <div class="conveyor_component" :style="gePumptProgressStyle">
        <!-- 传送带图标 -->
        <i class="icon iconfont-hnyz-colour icon-hnyz-colourconveyor pump_icon"
            :style="{ fontSize: `${iconSize}px` }"></i>
        <div class="pump_title">{{ title }}</div>
        <div class="conveyor_bar">
            <div class="conveyor_flow" :style="getConveyorFlowStyle"></div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
    title: {// 传送带名称
        type: String,
        required: true
    },
    //图标大小
    iconSize: {
        type: Number,
        default: 80
    },
})

// 计算 组件 的 style
const gePumptProgressStyle = computed(() => {
    return {
        fontSize: `${props.iconSize}px`,
        width: `${props.iconSize}px`,
        height: `${props.iconSize}px`,
    }
})

// 计算 进度条 style
const getConveyorFlowStyle = computed(() => {
    return {
        backgroundImage: `repeating-linear-gradient(90deg,
                    rgba(133, 134, 135, 0.3) 0px,
                    rgba(133, 134, 135, 0.3) ${props.iconSize * 0.15}px,
                    rgba(133, 134, 135, 0.5) ${props.iconSize * 0.15}px,
                    rgba(133, 134, 135, 0.9) ${props.iconSize * 0.3}px)`
    }
})

</script>

<style scoped lang="scss">
.conveyor_component {
    position: relative;

    .pump_icon {
        position: absolute;
    }

    .pump_title {
        color: #C7D2E0;
        position: absolute;
        top: 125%;
        left: 128%;
        transform: translate(-50%, -50%);
        font-size: 18px;
    }

    .conveyor_bar {
        top: 20%;
        left: 32%;
        width: 194%;
        height: 70%;
        background-color: #eee;
        overflow: hidden;
        position: relative;

        /* 动画流动条 */
        .conveyor_flow {
            width: 200%;
            height: 100%;
            animation: conveyor-move 5s linear infinite;
        }

        @keyframes conveyor-move {
            0% {
                transform: translateX(-50%);
            }

            100% {
                transform: translateX(0%);
            }
        }
    }


}
</style>