<template>
  <el-dialog :visible.sync="visible" fullscreen :show-close="false" class="survey-dialog">
    <div class="results-header">
      <div class="header-content">
        <div>
          <div class="survey-title">{{ surveyData.title }}</div>
          <div class="survey-meta">
            <span class="meta-item"><i class="el-icon-date"></i> 创建时间：{{ surveyData.createTime }}</span>
            <span class="meta-item"><i class="el-icon-time"></i> 截止时间：{{ surveyData.deadline }}</span>
          </div>
        </div>
        <el-button @click="$emit('close')">关闭</el-button>
      </div>
    </div>
    <div class="results-main">
      <div class="stats-overview">
        <div class="stat-card">
          <div class="stat-icon" style="background:#3498db"><i class="el-icon-user"></i></div>
          <div class="stat-number">{{ surveyData.responses }}</div>
          <div class="stat-label">回复数</div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background:#f1c40f"><i class="el-icon-edit"></i></div>
          <div class="stat-number">{{ surveyData.questions.length }}</div>
          <div class="stat-label">题目数</div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background:#2ecc71"><i class="el-icon-star-on"></i></div>
          <div class="stat-number">{{ surveyData.avgScore || '-' }}</div>
          <div class="stat-label">平均分</div>
        </div>
      </div>
      <div v-for="(q, idx) in surveyData.questions" :key="q.id" class="question-analysis">
        <div class="question-header">
          <div>
            <div class="question-title">{{ idx+1 }}. {{ q.title }}</div>
            <div class="question-meta">
              <span>题型：{{ typeText(q.type) }}</span>
            </div>
          </div>
        </div>
        <div v-if="q.type==='single' || q.type==='multi'">
          <el-table :data="q.options.map((opt,i)=>({option:opt,count:Math.floor(Math.random()*20+1)}))" style="width: 100%;">
            <el-table-column prop="option" label="选项" />
            <el-table-column prop="count" label="选择人数" />
          </el-table>
        </div>
        <div v-else-if="q.type==='rate'">
          <el-rate v-model="q.rateMax" :max="10" show-text text-color="#ff9900" disabled />
          <div style="font-size:12px;color:#888;">评分题，用户可打分</div>
        </div>
        <div v-else-if="q.type==='text'">
          <el-empty description="文本题答案统计略" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'SurveyResultsDialog',
  props: {
    visible: Boolean,
    surveyData: Object
  },
  methods: {
    typeText(type) {
      return { single: '单选题', multi: '多选题', text: '文本题', rate: '评分题' }[type] || type;
    }
  }
}
</script>
<style scoped>
.survey-dialog >>> .el-dialog__body { padding:0; }
.results-header { background: #fff; padding: 30px; border-bottom: 1px solid #e9ecef; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.header-content { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.survey-title { font-size: 28px; font-weight: 700; color: #2c3e50; margin-bottom: 12px; }
.survey-meta { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 20px; }
.meta-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #6c757d; }
.results-main { max-width: 1400px; margin: 0 auto; padding: 30px; }
.stats-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; border: 1px solid #e9ecef; }
.stat-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 20px; color: #fff; }
.stat-number { font-size: 32px; font-weight: 700; color: #2c3e50; margin-bottom: 4px; }
.stat-label { font-size: 14px; color: #6c757d; }
.question-analysis { background: #fff; border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.question-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #e9ecef; }
.question-title { font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 8px; }
.question-meta { display: flex; gap: 16px; font-size: 14px; color: #6c757d; }
</style>
