<template>
  <uni-collapse>
    <eikon-collapse-item title="学习成长" name="learningGrowth" :borderColor="'#E435F3'">
      <div class="collapse-content">
        <div class="learning-ranking-section">
          <!-- <div class="ranking-header">
            <SwitchTab :tabList="switchOptions" :defaultActive="learningSwitchValue"
              @tabChange="handleLearningTabChange" />
          </div> -->
          <statistic-table :columns="learningTableColumns" :data="learningTableData" />
        </div>
      </div>
    </eikon-collapse-item>
  </uni-collapse>
</template>

<script>
import EikonCollapseItem from "./eikon-collapse-item.vue";
import SwitchTab from "./switch-tab.vue"
import { mapState, mapGetters } from 'vuex'
import StatisticTable from "@/components/statistic-table/statistic-table.vue";

export default {
  name: "LearningGrowth",
  components: {
    EikonCollapseItem,
    SwitchTab,
    StatisticTable
  },
  data() {
    return {
      // 学习成长相关数据
      learningSwitchValue: 0,
      learningTableData: []
    }
  },
  computed: {
    ...mapState({
      growthPortraitData: state => state.eikonLevel.growthPortraitData,
      currentLevel: state => state.eikonLevel.currentLevel,
    }),
    ...mapGetters('eikonLevel', ['isPersonal', 'isBanZuZhang']),
    learningTableColumns() {
      return [
        ...(this.isPersonal ? [{ props: 'name', title: '姓名' }] : [{ props: 'name', title: '部门' }]),
        { props: 'averageScore', title: '平均分' },
        { props: 'highestScore', title: '最高分' },
        { props: 'lowestScore', title: '最低分' }
      ]
    },
    switchOptions() {
      if (this.isPersonal) {
        return [
          { value: 0, label: '全站' },
          { value: 1, label: '本科' },
          { value: 2, label: '本班' }
        ]
      }
      if (this.isBanZuZhang) {
        return [
          { value: 0, label: '全站' },
          { value: 1, label: '本科' },

        ]
      }
      return []
    },
  },
  watch: {
    growthPortraitData: {
      handler(newVal, oldVal) {

        this.handleData(newVal)
      },
    }
  },
  methods: {
    handleData(newVal) {
      // 检查newVal是否为null或undefined
      if (!newVal) {
        this.learningTableData = [];
        return;
      }
      
      let rank = '';
      if (this.learningSwitchValue === 0) {
        rank = `${newVal.stationRanking || '-'}/${newVal.stationTotal || '-'}`;
      }
      if (this.learningSwitchValue === 1) {
        rank = `${newVal.departmentRanking || '-'}/${newVal.departmentTotal || '-'}`;
      }
      if (this.learningSwitchValue === 2) {
        rank = `${newVal.teamRanking || '-'}/${newVal.teamTotal || '-'}`;
      }
      this.learningTableData = newVal
      //  [
      //   { dimension: '平均分', score: newVal.averageScore || '-', },
      //   { dimension: '最高分', score: newVal.highestScore || '-', },
      //   { dimension: '最低分', score: newVal.lowestScore || '-', },
      // ...(this.currentLevel === 'station' ? [] : [{ dimension: '名次', score: rank || '-', }])
      // ]
    },
    // 学习成长切换处理
    handleLearningTabChange(event) {
      console.log('学习成长切换:', event);
      this.learningSwitchValue = event.value;
      // 根据切换的值更新学习统计数据
      this.handleData(this.growthPortraitData);
    },


  }
}
</script>

<style lang="scss" scoped>
.collapse-content {
  padding: 20rpx;
}

/* 学习成长样式 */
.learning-ranking-section .ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.learning-ranking-section .ranking-content {
  background: #f8f9fa;
  border-radius: 12rpx;
  margin: 30rpx 0;
}
</style>