<template>
    <div class="feedback-container">
        <h1>意见反馈</h1>
        <div class="feedback-form">
            <el-form :model="feedbackObj" label-width="auto" style="max-width: 600px">
                <el-form-item label="描述问题">
                    <el-input v-model="feedbackObj.describe" :rows="6" type="textarea" />
                </el-form-item>
                <el-form-item label="上传图片">
                    <el-upload ref="uploadRef" multiple :limit="3" list-type="picture-card" :http-request="uploadSubmit"
                        :auto-upload="false">
                        <el-icon class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="您的联系方式">
                    <el-input v-model="feedbackObj.contact" style="width: 200px;" />
                </el-form-item>
            </el-form>
            <el-button type="primary" size="default" @click="uploadRef.submit()">提交反馈</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { uploadFile } from '@/api/upload'; // 引入新的 API 方法

const feedbackObj = reactive({
    describe: '',
    img: '',
    contact: '',
});

const uploadRef = ref();

const uploadSubmit = ({ file }) => {
    const params = {
        // 可以在这里添加其他参数
    };
    uploadFile(file, params)
        .then(response => {
            console.log(response);
            // 处理上传成功的逻辑
        })
        .catch(error => {
            console.error(error);
            // 处理上传失败的逻辑
        });
};
</script>

<style lang="scss">
.feedback-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin: auto;
    h1 {
        margin: 30px 0px;
    }
}
</style>