<template>
  <div class="complaint-container">
    <PageTitle title="投诉与建议" />

    <el-form :model="form" :rules="rules" label-position="top" class="complaint-form">
      <!-- 反馈类型 -->
      <el-form-item label="反馈类型">
        <div class="tag-group">
          <div
            v-for="item in feedbackTypes"
            :key="item.value"
            :class="['tag-item', { active: form.feedbackType === item.value }]"
            @click="form.feedbackType = item.value"
          >
            {{ item.label }}
          </div>
        </div>
      </el-form-item>

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

      <!-- 上传照片 -->
      <el-form-item label="上传照片">
        <el-upload
          class="avatar-uploader"
          :action="action"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <img class="upload-img" v-if="form.relatedPictures" :src="form.relatedPictures" />
      </el-form-item>

      <!-- 联系方式 -->
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="form.phone" 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';
import { addComplaintsSuggestions } from '@/api/pc/valueAdded';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { complaints_suggestion_type } = toRefs<any>(proxy?.useDict('complaints_suggestion_type'));
const action = import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload';
import type { UploadProps } from 'element-plus';

// 反馈类型选项
const feedbackTypes = computed(() => complaints_suggestion_type.value || []);

// 表单数据
const form = reactive({
  feedbackType: '0',
  feedbackContent: '',
  relatedPictures: '',
  phone: ''
});
const rules = {
  feedbackContent: [{ required: true, message: '请输入投诉建议内容', trigger: 'blur' }],
  phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]
};

// 上传图片
const handleUploadChange = (file, fileList) => {};

//上传成功
const handleAvatarSuccess = (res: any) => {
  if (res.code == 200) {
    form.relatedPictures = res.data.url;
  } else {
    ElMessage({
      message: res.msg,
      type: 'warning'
    });
  }
  console.log(res);
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('不能大于2MB!');
    return false;
  }
  return true;
};
// 提交
const handleSubmit = async () => {
  if (!form.feedbackContent) {
    ElMessage.warning('请输入问题和建议');
    return;
  }
  try {
    await addComplaintsSuggestions(form);
    ElMessage.success('提交成功');
  } catch (error) {
    ElMessage.error('提交失败');
  }
};
</script>

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

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

.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;
}
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  .tag-item {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    transition: all 0.2s;
    &:hover {
      border-color: #e60012;
      color: #e60012;
    }
    &.active {
      border-color: #e60012;
      color: #e60012;
      background: #fff5f5;
    }
  }
}
</style>
