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

interface QuestionItem {
  id: number;
  question: string;
  count: number;
}

// 问题数据
const questionData = ref<QuestionItem[]>([]);

// 获取问题数据
const fetchQuestionData = () => {
  commonQuestions().then(res => {
    if (res.success) {
      questionData.value = res.data;
    }
  });
};

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> 