<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="getProgressBarStyle(item)">
                </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();
                const data = response.data;

                this.maxValue = Math.max(...data.map(item => item.count));

                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);
            }
        },
        getProgressBarStyle(item) {
            if (item.value === 0) {
                return {
                    width: '100%',
                    background: '#e0e0e0'
                };
            } else {
                return {
                    width: item.percentage + '%',
                    background: 'linear-gradient(90deg, #ffffff, #5B76F9)' 
                };
            }
        }
    }
};
</script>

<style scoped>
.progress-container {
    width: 100%;
    height: 9rem;
    padding: 0 3rem 0 0;
    overflow: auto;
    font-family: aliregular;
}

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

.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;
    text-align: right;
    margin-left: .3rem;
    color: #333;
    font-size: 0.88rem;
    font-family: aliregular;
}
</style>