<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 模拟数据
const questionData = ref([
  {
    id: 1,
    question: '学校有哪些奖学金政策和申请条件？',
    count: 3948
  },
  {
    id: 2,
    question: '我的高考成绩能报考哪些学校和专业？',
    count: 2249
  },
  {
    id: 3,
    question: '大学生实习和就业有哪些资源？',
    count: 900
  },
  {
    id: 4,
    question: '如何申请转专业以及需要满足什么条件？',
    count: 600
  },
  {
    id: 5,
    question: '如何申请休学、复学或者退学？',
    count: 380
  },
  {
    id: 6,
    question: '如果高考分数不理想，有哪些复读或者其他选择？',
    count: 20
  }
]);

// 获取问题数据
const fetchQuestionData = () => {
  // 这里可以替换为实际的API调用
  // 模拟API调用
  setTimeout(() => {
    // 数据已经在上面定义
  }, 500);
};

onMounted(() => {
  fetchQuestionData();
});
</script>

<template>
  <div class="common-questions">
    <div class="question-list">
      <div v-for="(item, index) in questionData" :key="index" class="question-item">
        <div class="question-rank">{{ index + 1 }}</div>
        <div class="question-content">
          <div class="question-text">{{ item.question }}</div>
          <div class="question-count">
            <span class="count-value">{{ item.count }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.common-questions {
  width: 100%;
  height: 100%;
  padding: 10px 0;
}

.question-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.question-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.question-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 50%;
  margin-right: 15px;
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
  
  // 前三名使用不同颜色
  .question-item:nth-child(1) & {
    background-color: #f5222d;
    color: #fff;
  }
  
  .question-item:nth-child(2) & {
    background-color: #fa8c16;
    color: #fff;
  }
  
  .question-item:nth-child(3) & {
    background-color: #52c41a;
    color: #fff;
  }
}

.question-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.question-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 5px;
}

.question-count {
  font-size: 12px;
  color: #999;
  
  .count-value {
    color: #4B96FF;
    font-weight: bold;
  }
}
</style> 