<template>
  <div class="complaint-container">
    <PageTitle title="投诉与建议" />
    
    <el-form :model="form" label-position="top" class="complaint-form">
      <!-- 反馈类型 -->
      <el-form-item label="反馈类型">
        <div class="type-tags">
          <el-tag
            v-for="item in feedbackTypes"
            :key="item.value"
            :type="form.feedbackType === item.value ? 'danger' : 'info'"
            :effect="form.feedbackType === item.value ? 'dark' : 'plain'"
            class="type-tag"
            @click="form.feedbackType = item.value"
          >
            {{ item.label }}
          </el-tag>
        </div>
      </el-form-item>

      <!-- 问题和建议 -->
      <el-form-item label="问题和建议">
        <el-input
          v-model="form.content"
          type="textarea"
          placeholder="请输入"
          :rows="5"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>

      <!-- 上传照片 -->
      <el-form-item label="上传照片">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :limit="5"
        >
          <el-icon><Plus /></el-icon>
          <template #tip>
            <div class="upload-tip">上传</div>
          </template>
        </el-upload>
      </el-form-item>

      <!-- 联系方式 -->
      <el-form-item label="联系方式">
        <el-input v-model="form.contact" placeholder="请输入" style="width: 400px" />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="danger" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { PageTitle } from '@/components'

// 反馈类型选项
const feedbackTypes = [
  { label: '功能建议', value: '1' },
  { label: '客服问题', value: '2' },
  { label: '库存与价格', value: '3' },
  { label: '配送问题', value: '4' },
  { label: '售后质量问题', value: '5' },
  { label: '账款票问题', value: '6' },
  { label: '其他', value: '7' }
]

// 表单数据
const form = reactive({
  feedbackType: '1',
  content: '',
  contact: ''
})

// 提交
const handleSubmit = () => {
  if (!form.content) {
    ElMessage.warning('请输入问题和建议')
    return
  }
  ElMessage.success('提交成功')
}
</script>

<style scoped lang="scss">
.complaint-container {
  padding: 20px;
  background: #fff;
  min-height: 100%;
}

.complaint-form {
  max-width: 600px;
}

.type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  
  .type-tag {
    cursor: pointer;
    border-radius: 4px;
    
    &:hover {
      opacity: 0.8;
    }
  }
}

:deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 100px;
  height: 100px;
}

.upload-tip {
  font-size: 12px;
  color: #999;
  text-align: center;
}
</style>
