<template>
  <el-dialog v-model="visible" title="反馈详情与处理" width="600px" destroy-on-close>
    <!-- 详情展示 -->
    <el-descriptions border :column="1" class="mb-20">
      <el-descriptions-item label="反馈编号">FK{{ currentFeedback?.id }}</el-descriptions-item>
      <el-descriptions-item label="提交时间">{{ currentFeedback?.createTime }}</el-descriptions-item>
      <el-descriptions-item label="反馈人">{{ currentFeedback?.studentName }}</el-descriptions-item>
      <el-descriptions-item label="类型">
        <el-tag>{{ getTypeLabel(currentFeedback?.type) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="内容">{{ currentFeedback?.content }}</el-descriptions-item>
    </el-descriptions>

    <!-- 已回复展示 -->
    <div v-if="currentFeedback?.status === 'replied'" class="reply-section mb-20">
      <div class="section-title">处理结果</div>
      <el-card shadow="never" class="bg-gray">
        <div class="reply-content">
          <span class="font-bold">管理员回复：</span>
          {{ currentFeedback?.reply }}
        </div>
        <div class="reply-time text-xs text-gray mt-5">回复时间：{{ currentFeedback?.replyTime || '2026-01-24 15:00' }}</div>
      </el-card>

      <!-- 评价展示 -->
      <div class="evaluation mt-10" v-if="currentFeedback?.rate">
        <span class="font-bold">学生评价：</span>
        <el-rate v-model="currentFeedback.rate" disabled show-score text-color="#ff9900" />
        <div class="text-gray text-sm">{{ currentFeedback?.comment || '无文字评价' }}</div>
      </div>
      <div v-else class="text-gray text-sm mt-5">暂无评价</div>
    </div>

    <!-- 处理操作区 -->
    <div v-if="currentFeedback?.status === 'pending'" class="action-section">
      <div class="section-title">处理操作</div>
      <el-tabs v-model="actionType">
        <el-tab-pane label="直接回复" name="reply">
          <el-input v-model="form.replyContent" type="textarea" rows="4" placeholder="请输入回复内容..." />
        </el-tab-pane>
        <el-tab-pane label="任务流转" name="transfer">
          <el-form label-width="80px">
            <el-form-item label="流转部门">
              <el-select v-model="form.targetDept" style="width: 100%">
                <el-option label="后勤维修部" value="repair" />
                <el-option label="安全保卫部" value="security" />
                <el-option label="学生工作处" value="student" />
              </el-select>
            </el-form-item>
            <el-form-item label="流转备注">
              <el-input v-model="form.transferRemark" type="textarea" rows="2" placeholder="请说明流转原因..." />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>

    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
      <el-button 
        v-if="currentFeedback?.status === 'pending'" 
        type="primary" 
        @click="handleSubmit"
      >
        {{ actionType === 'reply' ? '确认回复' : '确认流转' }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['success'])

const visible = ref(false)
const currentFeedback = ref(null)
const actionType = ref('reply')
const form = reactive({
  replyContent: '',
  targetDept: '',
  transferRemark: ''
})

const getTypeLabel = (type) => {
  const map = { complaint: '投诉', suggestion: '建议', consult: '咨询' }
  return map[type] || type
}

const open = (row) => {
  currentFeedback.value = { ...row }
  // Mock rate if replied
  if (row.status === 'replied' && !row.rate) {
    currentFeedback.value.rate = 5
    currentFeedback.value.comment = '回复很及时，满意！'
  }
  form.replyContent = ''
  form.targetDept = ''
  form.transferRemark = ''
  actionType.value = 'reply'
  visible.value = true
}

const handleSubmit = () => {
  if (actionType.value === 'reply') {
    if (!form.replyContent) return ElMessage.warning('请输入回复内容')
    ElMessage.success('回复成功')
    emit('success', { 
      id: currentFeedback.value.id, 
      status: 'replied', 
      reply: form.replyContent,
      replyTime: new Date().toLocaleString()
    })
  } else {
    if (!form.targetDept) return ElMessage.warning('请选择流转部门')
    ElMessage.success(`已流转至${getDeptName(form.targetDept)}`)
    // Mock transfer logic
    emit('success', { id: currentFeedback.value.id, status: 'transferred' }) // Or keep pending but change handler
  }
  visible.value = false
}

const getDeptName = (val) => {
  const map = { repair: '后勤维修部', security: '安全保卫部', student: '学生工作处' }
  return map[val]
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mb-20 { margin-bottom: 20px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.bg-gray { background: #f5f7fa; }
.text-gray { color: #909399; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.font-bold { font-weight: bold; }

.section-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
  border-left: 3px solid var(--el-color-primary);
  padding-left: 8px;
}
</style>
