<template>
    <div class="dept-stats">
        <div class="stats-grid">
            <div class="stat-item">
                <div class="stat-value">{{ statsData.totalScore || 0 }}</div>
                <div class="stat-label">综合得分</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">{{ statsData.employeeCount || 0 }}</div>
                <div class="stat-label">人员数量</div>
            </div>
            <div class="stat-item center">
                <div class="dept-name">{{ statsData.deptName || '' }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">{{ statsData.avgAge || 0 }}</div>
                <div class="stat-label">平均年龄</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">{{ statsData.avgWorkYears || 0 }}</div>
                <div class="stat-label">平均司龄</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DeptStats',
    props: {
        statsData: {
            type: Object,
            default: () => ({})
        }
    }
}
</script>

<style lang="scss" scoped>
.dept-stats {
    width: 100%;
    padding: 16rpx 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16rpx;
    align-items: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24rpx 16rpx;
    background: linear-gradient(135deg, rgba(33, 33, 58, 0.95), rgba(15, 70, 250, 0.2));
    border-radius: 16rpx;
    border: 1rpx solid rgba(159, 3, 193, 0.3);
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2rpx;
        background: linear-gradient(90deg, #0f46fa, transparent);
    }

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        height: 2rpx;
        background: linear-gradient(90deg, transparent, #9903C1);
    }
}

.stat-value {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 12rpx rgba(15, 70, 250, 0.8);
    line-height: 1;
}

.stat-label {
    font-size: 20rpx;
    color: #a0c4ff;
    margin-top: 8rpx;
}

.stat-item.center {
    padding: 32rpx 16rpx;

    .dept-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #fff;
        text-align: center;
    }
}
</style>
