<template>
    <div class="progress-container">
        <div class="progress-item" v-for="(item, index) in progressData" :key="index">
            <span class="progress-label">{{ item.label }}</span>
            <div class="progress-bar-wrapper">
                <div class="progress-bar" :style="{ width: item.percentage + '%', background: item.color }">
                </div>
            </div>
            <span class="progress-value">{{item.value}}</span>
        </div>
    </div>
</template>

<script>
import { allchanyexfcyfx } from '@/api/ManageApi/index';

export default {
    name: 'ProgressBarWithLabel',
    data() {
        return {
            progressData: [],
            maxValue: 0
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        async fetchData() {
            try {
                const response = await allchanyexfcyfx();
                //  response.data 是一个数组，包含进度条的数据
                const data = response.data;

                // 计算最大值
                this.maxValue = Math.max(...data.map(item => item.count));

                // 更新 progressData
                this.progressData = data.map((item, index) => ({
                    label: item.ssgnq,
                    value: item.count,
                    percentage: (item.count / this.maxValue) * 100,
                    color: item.color || (index % 2 === 0 ? '#5B76F9' : '#5B76F9')
                }));
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }
    }
};
</script>

<style scoped>
.progress-container {
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.progress-item {
    display: flex;
    align-items: center;
    margin-top: 1.2rem;
}

.progress-label {
    width: 10rem;
    text-align: right;
    padding-right: 0.7rem;
    font-size: 0.875rem;
    color: #333;
    font-family: alibold;
}

.progress-bar-wrapper {
    flex: 1;
    height: 0.8rem;
    background-color: #f0f0f0;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s ease;
    position: relative;
}

.progress-value {
    width: 1.5rem;
    /* background-color: red; */
    text-align: right;
    margin-left: .3rem;
    color: #333;
    font-size: 0.88rem;
    font-family: aliregular;
}
</style>