<template>
  <div class="stats-section">
    <div v-for="(item, index) in props.typeDetailData" :key="index" class="stats-item">
      <ChartsContainer :title="item.title">
        <!-- 主要内容区域 -->
        <div class="item-content">
          <!-- 数量统计区域和问题整改区域 -->
          <div class="top-section">
            <!-- 数量统计区域 -->
            <div class="stat-section">
              <div class="stat-header">
                <div class="stat-title">{{ item.statTitle }}</div>
              </div>

              <div class="data-grid">
                <div v-for="(dataItem, dataIndex) in item.dataItems" :key="dataIndex" class="data-item">
                  <div class="data-value">
                    <img v-if="dataItem.isImage" :src="dataItem.value" class="data-image" />
                    <span v-else :style="{ color: dataItem.color || '#fff' }">{{ 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>

          <!-- 排名区域 -->
          <div class="rank-section" v-if="item.rankList && 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">
                <!-- <div class="progress-bar1" :style="{ width: rank.percentage + '%' }"></div> -->
                <el-progress :percentage="Number(rank.percentage || 0)" :show-text="false" :stroke-width="10"
                  color="#F9B83A" />
                <div class="rank-info">
                  <span :style="{ color: rank.type === 'station' ? '#ED9E3E' : '#5580F7' }">{{ rank.current }}</span>/{{
                    rank.total }}
                </div>
              </div>
            </div>
          </div>

          <!-- 大队和班组合格率排行 -->
          <div class="rank-section">
            <!-- 大队排名区域 -->
            <div class="department-rank-container">
              <div class="custom-title">
                <div class="arrow-icon"></div>
                <span>{{ item.title === '查获上报' ? '大队查获总数排名' : item.title == '抽问抽答' ? '大队正确率排名' : '大队合格率排名' }}</span>
              </div>
              <div v-for="(dept, index) in item.departmentRank" :key="'dept-' + index" class="rank-item">
                <div class="rank-label">{{ dept.name }}</div>
                <div class="rank-progress">
                  <el-progress
                    :percentage="item.title !== '查获上报' ? Number(dept.passRate || 0) : getPercentage(dept.passRate, item.departmentRank)"
                    :show-text="false" :stroke-width="10" color="#F9B83A" />
                  <div class="rank-info">
                    <span style="color: #999999">{{ dept.passRate || 0 }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 班组合格率排行 -->
            <div class="team-rank-section">
              <div class="rank-header">
                <div class="rank-header-title">
                  <div class="arrow-icon"></div>
                  <div class="rank-title">{{ item.title === '查获上报' ? '班组查获总数排名' : item.title == '抽问抽答' ? '班组正确率排名' :
                    '班组合格率排名' }}</div>
                </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>

              <!-- 班组排名显示 -->
              <div class="team-rank-container">
                <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">
                      <el-progress
                        :percentage="item.title !== '查获上报' ? Number(team.passRate || 0) : getPercentage(team.passRate, item.teamRank)"
                        :show-text="false" :stroke-width="10" color="#A7C8FF" />
                      <div class="rank-info">
                        <span style="color: #999999">{{ team.passRate || 0 }}</span>
                      </div>
                    </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">
                      <el-progress
                        :percentage="item.title !== '查获上报' ? Number(team.passRate || 0) : getPercentage(team.passRate, item.bottomTeamRank)"
                        :show-text="false" :stroke-width="10" color="#A7C8FF" />
                      <div class="rank-info">
                        <span style="color: #999999">{{ team.passRate || 0 }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>

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

<script setup>
import ChartsContainer from '../ChartsContainer.vue'
import { watch } from 'vue'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const userRole = userStore.roles
// 定义props，从父组件接收数据
const props = defineProps({
  typeDetailData: {
    type: Array,
    default: () => []
  }
})

// 计算百分比：使用数组中的最大值作为分母
const 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>
.stats-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  height: 100%;
}

.stats-item {
  height: 100%;

  .chartsContainer {
    :deep(.chartsContainer-content) {
      padding: 10px 0px;
    
    }
  }

}

.item-content {
  height: 100%;
  display: flex;
  flex-direction: column;

  .top-section {
    display: flex;
    gap: 0;
    margin-bottom: 15px;

    .stat-section {
      flex: 1;
      border-radius: 8px;
      padding: 10px 25px;
      background: url('../../../../../assets/images/cardBg.png') no-repeat !important;
      background-size: 100% 105% !important;
    }

    .problem-rect-section {
      padding: 6px 10px;
      flex: 0.6;
      margin-top: 0;
      background: url('../../../../../assets/images/cardBg.png') no-repeat !important;
      background-size: 100% 105% !important;
    }
  }

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

  .stat-title {
    font-size: 16px;
    color: #7DE6FF;
    font-weight: bold;
  }

  .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: 18px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;

    .data-image {
      width: 35px;
      height: 35px;
    }
  }

  .data-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }

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

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

  .problem-title {
    font-size: 16px;
    color: #7DE6FF;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .problem-grid {
    display: flex;
    gap: 10px;
  }

  .problem-item {
    flex: 1;
    border-radius: 8px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  // .left-item {
  //   background: rgba(0, 174, 65, 0.2);
  // }

  // .right-item {
  //   background: rgba(249, 96, 96, 0.2);
  // }

  .problem-value {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

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

  .problem-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }

  /* 排名区域样式 */
  .rank-section {
    height: 100%;
    padding: 0 15px;
    // background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;

  }

  .custom-title {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 15px;
  }

  .custom-title:first-child {
    margin-top: 0;
  }

  .arrow-icon {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #1CB6FF;
    margin-right: 8px;
  }

  /* 排名头部样式 */
  .rank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 15px;

    .rank-header-title {
      display: flex;

      align-items: center;

      .rank-title {
        font-size: 15px;
      }
    }
  }

  .rank-header:first-child {
    margin-top: 0;
  }

  .rank-title {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
  }

  .arrow-icon {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #35D8FF;
    margin-right: 8px;
  }

  .sort-buttons {
    display: flex;

    div:nth-child(1) {
      border-radius: 3px 0 0 3px;
    }

    div:nth-child(2) {
      border-radius: 0 3px 3px 0;
    }
  }

  .sort-btn {
    padding: 3px 9px;
    font-size: 13px;
    color: #999;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .sort-btn.active {
    color: #fff;
    background: #1CB6FF;
  }

  .sort-btn:hover {
    background: rgba(28, 182, 255, 0.3);
  }

  .rank-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 17px;
  }

  .rank-item:last-child {
    margin-bottom: 0;
  }

  /* 大队排名容器样式 */
  .department-rank-container {

    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 15px;
  }

  /* 班组合格率排行区域样式 */
  .team-rank-section {
    margin-top: 15px;
  }

  /* 班组排名容器样式 */
  .team-rank-container {
    // max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
  }

  /* 自定义滚动条样式 */
  .department-rank-container::-webkit-scrollbar,
  .team-rank-container::-webkit-scrollbar {
    width: 4px;
  }

  .department-rank-container::-webkit-scrollbar-track,
  .team-rank-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
  }

  .department-rank-container::-webkit-scrollbar-thumb,
  .team-rank-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }

  .department-rank-container::-webkit-scrollbar-thumb:hover,
  .team-rank-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  .rank-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    width: 60px;
    margin-right: 10px;
  }

  .rank-progress {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
  }

  :deep(.el-progress) {
    flex: 1;
    margin-right: 10px;
  }

  :deep(.el-progress-bar) {
    padding-right: 0;
  }

  :deep(.el-progress-bar__outer) {
    border-radius: 5px;
    background-color: transparent !important;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 5px;
  }

  .rank-info {
    font-size: 13px;
    color: #999;
    min-width: 30px;
    text-align: right;
  }
}

// /* 响应式设计 */
// @media (max-width: 1280px) {
//   .team-rank-container {
//     max-height: 200px;

//   }

// }
</style>