<template>
    <div class="type-detail-container">
        <div v-for="(item, index) in dataList" :key="index" class="type-item">
            <!-- 标题和链接区域 -->
            <div class="item-header">
                <div class="item-title">{{ item.title }}</div>
                <div class="item-link" @click="handleLinkClick(item.link)">{{ item.linkText }}</div>
            </div>

            <!-- 主要内容区域 -->
            <div class="item-content">
                <!-- 数量统计区域 -->
                <div class="stat-section">
                    <div class="stat-header">
                        <div class="stat-title">{{ item.statTitle }}</div>
                        <div class="stat-trend" v-if="!role.includes('test') && !role.includes('zhijianke')">
                            绿色为高于平均值，红色为低于平均值
                        </div>
                    </div>


                    <div class="data-grid">
                        <div v-for="(dataItem, dataIndex) in item.dataItems" :key="dataIndex" class="data-item">

                            <div class="data-value">
                                <image v-if="dataItem.isImage" :src="dataItem.value" class="data-image" />
                                <span v-else :style="{ color: dataItem.color || '#333333' }">{{ dataItem.value }}</span>
                            </div>
                            <div class="data-label">{{ dataItem.label }}</div>

                            <div v-if="dataIndex == item.dividerIndex" class="divider"></div>
                        </div>
                    </div>
                </div>

                <!-- 巡视检查部分的问题整改区域 -->
                <div v-if="item.title === '巡视检查'" class="problem-rect-section">
                    <div class="problem-title">问题整改</div>
                    <div class="problem-grid">
                        <!-- 左边：已办结问题 -->
                        <div class="problem-item left-item">

                            <div class="problem-value">{{ item.completed }}</div>
                            <div class="problem-label">{{ '已办结' }}</div>
                        </div>
                        <!-- 右边：待办结问题 -->
                        <div class="problem-item right-item">
                            <div class="problem-value">{{ item.pending }}</div>
                            <div class="problem-label">{{ '办理中' }}</div>
                        </div>
                    </div>
                </div>

                <!-- 排名区域 -->
                <div class="rank-section" v-if="item.rankList.length > 0">
                    <div v-for="(rank, i) in item.rankList" :key="i" class="rank-item">
                        <div class="rank-label">{{ rank.label }}</div>
                        <div class="rank-progress">
                            <h-rank-line :percentage="Number(rank.percentage)" endType="round" :height="10"
                                :color="rank.type == 'station' ? ['#F9CA91', '#ED9E3E'] : ['#87BFFC', '#5580F7']">
                                <div class="rank-info"><span
                                        :style="{ color: rank.type == 'station' ? '#ED9E3E' : '#5580F7' }">{{
                                            rank.current
                                        }}</span>/{{ rank.total }}</div>
                            </h-rank-line>
                        </div>
                    </div>
                </div>

                <!-- test角色特殊显示：主管合格率排行和班组合格率排行 -->
                <div class="rank-section" v-if="role && (role.includes('test') || role.includes('zhijianke'))">

                    <!-- 大队合格率排行 -->
                    <div class="rank-header">
                        <div class="rank-title">{{ item.title === '查获数据' ? '大队查获总数排名' : item.title == '抽问抽答' ? '大队正确率排名'
                            :
                            '大队合格率排名' }}</div>
                        <div class="sort-buttons">
                            <div :class="['sort-btn', { 'active': item.brigadeSortType === 'asc' }]"
                                @click="$emit('sort-change', item.title, 'brigade', 'asc')">正序</div>
                            <div :class="['sort-btn', { 'active': item.brigadeSortType === 'desc' }]"
                                @click="$emit('sort-change', item.title, 'brigade', 'desc')">倒序</div>
                        </div>
                    </div>

                    <!-- 大队排名显示 -->
                    <template v-if="item.brigadeSortType === 'asc'">
                        <div v-for="(brigade, i) in (item.brigadeRank || []).slice(0, 5)" :key="'brigade-asc-' + i"
                            class="rank-item">
                            <div class="rank-label">{{ brigade.name }}</div>
                            <div class="rank-progress">
                                <h-rank-line
                                    :percentage="item.title !== '查获数据' ? Number(brigade.passRate || 0) : getPercentage(brigade.passRate, item.brigadeRank)"
                                    endType="round" :height="10" :color="['#A8E6CF', '#4CAF50']">
                                    <div class="rank-info"><span style="color: #999999">{{ brigade.passRate || 0
                                            }}</span>
                                    </div>
                                </h-rank-line>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div v-for="(brigade, i) in (item.bottomBrigadeRank || []).slice(0, 5)"
                            :key="'brigade-desc-' + i" class="rank-item">
                            <div class="rank-label">{{ brigade.name }}</div>
                            <div class="rank-progress">
                                <h-rank-line
                                    :percentage="item.title !== '查获数据' ? Number(brigade.passRate || 0) : getPercentage(brigade.passRate, item.bottomBrigadeRank)"
                                    endType="round" :height="10" :color="['#A8E6CF', '#4CAF50']">
                                    <div class="rank-info"><span style="color: #999999">{{ brigade.passRate || 0
                                            }}</span>
                                    </div>
                                </h-rank-line>
                            </div>
                        </div>
                    </template>

                    <!-- 主管合格率排行 -->
                    <div class="rank-header">
                        <div class="rank-title">{{ item.title === '查获数据' ? '主管查获总数排名' : item.title == '抽问抽答' ? '主管正确率排名'
                            :
                            '主管合格率排名' }}</div>
                        <div class="sort-buttons">
                            <div :class="['sort-btn', { 'active': item.deptSortType === 'asc' }]"
                                @click="$emit('sort-change', item.title, 'dept', 'asc')">正序</div>
                            <div :class="['sort-btn', { 'active': item.deptSortType === 'desc' }]"
                                @click="$emit('sort-change', item.title, 'dept', 'desc')">倒序</div>
                        </div>
                    </div>

                    <!-- 主管排名显示 -->
                    <template v-if="item.deptSortType === 'asc'">
                        <div v-for="(dept, i) in (item.departmentRank || []).slice(0, 5)" :key="'dept-asc-' + i"
                            class="rank-item">
                            <div class="rank-label">{{ dept.name }}</div>
                            <div class="rank-progress">
                                <h-rank-line
                                    :percentage="item.title !== '查获数据' ? Number(dept.passRate || 0) : getPercentage(dept.passRate, item.departmentRank)"
                                    endType="round" :height="10" :color="['#F9CA91', '#ED9E3E']">
                                    <div class="rank-info"><span style="color: #999999">{{ dept.passRate || 0 }}</span>
                                    </div>
                                </h-rank-line>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div v-for="(dept, i) in (item.bottomDepartmentRank || []).slice(0, 5)" :key="'dept-desc-' + i"
                            class="rank-item">
                            <div class="rank-label">{{ dept.name }}</div>
                            <div class="rank-progress">
                                <h-rank-line
                                    :percentage="item.title !== '查获数据' ? Number(dept.passRate || 0) : getPercentage(dept.passRate, item.bottomDepartmentRank)"
                                    endType="round" :height="10" :color="['#F9CA91', '#ED9E3E']">
                                    <div class="rank-info"><span style="color: #999999">{{ dept.passRate || 0 }}</span>
                                    </div>
                                </h-rank-line>
                            </div>
                        </div>
                    </template>

                    <!-- 班组合格率排行 -->
                    <div class="rank-header">
                        <div class="rank-title">{{ item.title ===
                            '查获数据' ? '班组查获总数排名' : item.title == '抽问抽答' ? '班组正确率排名' : '班组合格率排名' }}</div>
                        <div class="sort-buttons">
                            <div :class="['sort-btn', { 'active': item.teamSortType === 'asc' }]"
                                @click="$emit('sort-change', item.title, 'team', 'asc')">正序</div>
                            <div :class="['sort-btn', { 'active': item.teamSortType === 'desc' }]"
                                @click="$emit('sort-change', item.title, 'team', 'desc')">倒序</div>
                        </div>
                    </div>

                    <!-- 班组排名显示 -->
                    <template v-if="item.teamSortType === 'asc'">
                        <div v-for="(team, i) in (item.teamRank || []).slice(0, 5)" :key="'team-asc-' + i"
                            class="rank-item">
                            <div class="rank-label">{{ team.name }}</div>
                            <div class="rank-progress">
                                <h-rank-line
                                    :percentage="item.title !== '查获上报' ? Number(team.passRate || 0) : getPercentage(team.passRate, item.teamRank)"
                                    endType="round" :height="10" :color="['#87BFFC', '#5580F7']">
                                    <div class="rank-info"><span style="color: #999999">{{ team.passRate || 0 }}</span>
                                    </div>
                                </h-rank-line>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div v-for="(team, i) in (item.bottomTeamRank || []).slice(0, 5)" :key="'team-desc-' + i"
                            class="rank-item">
                            <div class="rank-label">{{ team.name }}</div>
                            <div class="rank-progress">
                                <h-rank-line
                                    :percentage="item.title !== '查获上报' ? Number(team.passRate || 0) : getPercentage(team.passRate, item.bottomTeamRank)"
                                    endType="round" :height="10" :color="['#87BFFC', '#5580F7']">
                                    <div class="rank-info"><span style="color: #999999">{{ team.passRate || 0 }}</span>
                                    </div>
                                </h-rank-line>
                            </div>
                        </div>
                    </template>


                </div>

            </div>
        </div>
    </div>
</template>

<script>
import HRankLine from "@/components/h-rank-line/h-rank-line.vue";

export default {
    name: 'TypeDetail',
    components: {
        HRankLine
    },
    props: {
        dataList: {
            type: Array,
            default: () => []
        }
    },
    emits: ['sort-change'],
    computed: {
        role() {
            return this.$store?.state?.user?.roles
        }
    },
    watch: {
        dataList: {
            handler(newValue, oldValue) {
                console.log('dataList', newValue)
            }
        }
    },
    methods: {
        handleLinkClick(link) {
            if (link) {
                // 检查是否是tabBar页面
                const tabBarPages = [
                    '/pages/home-new/index',
                    '/pages/myToDoList/index',
                    '/pages/work/index',
                    '/pages/mine/index'
                ];


                if (tabBarPages.includes(link)) {
                    uni.switchTab({
                        url: link
                    });
                } else {
                    uni.navigateTo({
                        url: link
                    });
                }
            }
        },

        // 计算百分比：使用数组中的最大值作为分母
        getPercentage(value, array) {
            if (!array || !Array.isArray(array) || array.length === 0) {
                return 0;
            }

            // 找到数组中的最大值
            const maxValue = Math.max(...array.map(item => Number(item.passRate) || 0));

            // 如果最大值为0，则返回0避免除以0
            if (maxValue === 0) {
                return 0;
            }

            // 计算百分比
            const percentage = (Number(value) || 0) / maxValue * 100;

            // 确保百分比在0-100之间
            return Math.min(Math.max(percentage, 0), 100);
        },




    }
}
</script>

<style lang="scss" scoped>
.type-detail-container {
    margin-top: 30rpx;
}

.type-item {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;
}

.item-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
}

.item-link {
    font-size: 26rpx;
    color: #1890FF;
    cursor: pointer;
}

.item-content {
    .stat-section {
        background: #EFF2FE;
        border-radius: 15rpx;
        padding: 15rpx;
    }

    .stat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .stat-title {
        font-size: 28rpx;
        color: #3D3D3D;
        font-weight: bold;
        font-weight: 600;
    }

    .stat-trend {
        font-size: 24rpx;
        padding: 6rpx 12rpx;
        border-radius: 8rpx;
        color: #999999;
    }

    .trend-up {
        color: #52C41A;
        background: rgba(82, 196, 26, 0.1);
    }

    .trend-down {
        color: #FF4D4F;
        background: rgba(255, 77, 79, 0.1);
    }

    .data-grid {
        display: flex;
        justify-content: space-evenly;
    }

    .data-item {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;

    }

    .data-value {
        font-size: 34rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50rpx;
    }

    .data-image {
        width: 40rpx;
        height: 40rpx;
        border-radius: 8rpx;
    }

    .data-label {
        font-size: 24rpx;
        color: #999999;
    }

    .divider {
        position: absolute;
        right: -4%;
        top: 50%;
        transform: translateY(-50%);
        width: 1rpx;
        height: 60%;
        background: rgba(0, 0, 0, 0.1);
    }

    /* 问题整改区域样式 */
    .problem-rect-section {
        margin-top: 25rpx;
    }

    .problem-title {
        font-size: 28rpx;
        color: #3D3D3D;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .problem-grid {
        display: flex;
        gap: 20rpx;
    }

    .problem-item {
        flex: 1;
        border-radius: 15rpx;
        padding: 25rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .left-item {
        background: #EFFFF5;
    }

    .right-item {
        background: #FFF6F6;
    }

    .problem-value {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
        min-height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .left-item .problem-value {
        color: #00AE41;
    }

    .right-item .problem-value {
        color: #F96060;
    }

    .problem-label {
        font-size: 24rpx;
        color: #999999;
    }

    /* 排名区域样式 */
    .rank-section {
        margin-top: 25rpx;
    }

    .rank-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15rpx;
        margin-top: 20rpx;
    }

    .rank-title {
        font-size: 28rpx;
        color: #3D3D3D;
        font-weight: bold;
    }

    .sort-buttons {
        display: flex;

        div:nth-child(1) {

            border-radius: 10rpx 0 0 10rpx;
        }

        div:nth-child(2) {

            border-radius: 0 10rpx 10rpx 0;
        }
    }

    .sort-btn {
        padding: 4rpx 20rpx;
        border: 2rpx solid #1890FF;

        background: #FFFFFF;
        color: #1890FF;
        font-size: 24rpx;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .sort-btn.active {
        background: #1890FF;
        color: #FFFFFF;
    }

    // .sort-btn:not(.active):hover {
    //     background: #F0F8FF;
    // }

    .rank-item {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
    }

    .rank-label {
        width: 120rpx;
        font-size: 26rpx;
        color: #333;
        font-weight: 500;
    }

    .rank-progress {
        flex: 1;
        margin: 0 20rpx;
    }

    .rank-info {
        width: 100rpx;
        text-align: right;
        font-size: 26rpx;
        color: #666;

        span {
            font-size: 29rpx;
            font-weight: bold;
        }
    }
}
</style>