<template>
    <div class="main">
        <Common />
        <div class="bg">
            <img src="http://yyfiles.mrny365.com/static/banner.png" alt="">
        </div>
        <div class="formContent">
            <el-form 
                ref="ruleFormRef" 
                :model="ruleForm" 
                :rules="rules" 
                label-width="120px" 
                class="demo-ruleForm"
                size="default" 
            >
                <el-form-item label="诉求类型" prop="goodsType">
                    <el-select v-model="ruleForm.goodsType" placeholder="请选择诉求类型">
                        <el-option
                        v-for="item in typeOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="ruleForm.title" clearable />
                </el-form-item>
                <el-form-item label="内容" prop="intro">
                    <el-input v-model="ruleForm.intro" :rows="8" type="textarea" />
                </el-form-item>
                <el-form-item label="上传附件" prop="fileUrls">
                    <el-upload
                        v-model:file-list="fileList"
                        class="upload-demo"
                        action="/prod-api/resource/file/upload"
                        :multiple="false"
                        :limit="2"
                        :headers="uploadHeader"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                    >
                        <el-button type="primary">选择文件</el-button>
                        <template #tip>
                        <div class="el-upload__tip">
                            选择文件,允许的文件类型：png，jpg，gif，jpeg，pdf，doc，txt，avi，mp4且不超过50MB
                        </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="是否公开" prop="openType">
                    <el-radio-group v-model="ruleForm.openType" class="ml-4">
                        <el-radio label="0" size="large">是</el-radio>
                        <el-radio label="1" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        提交
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <Footer />
    </div>
</template>
    
<script setup lang='ts'>
import { ref, reactive, inject } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { getToken } from "@/utils/auth";
import { ElMessage } from "element-plus";

    const $http:any = inject("$http");


    const uploadHeader = {
        Authorization: "Bearer " + getToken()
    }

    const typeOptions = reactive([
        {
            id: 1,
            name: '产品推广'
        },
        {
            id: 2,
            name: '产品建设'
        },
        {
            id: 3,
            name: '信息化建设'
        },
    ])

    const fileList = ref<any>([]);

    const ruleFormRef = ref<FormInstance>()

    const ruleForm = ref<any>({
        goodsType: '',
        title: '',
        intro: '',
        fileUrls: [],
        openType: '0',
    })

    const rules = reactive<FormRules>({
        goodsType: [
            {required: true, message: '请选择诉求类型', trigger: 'blur'}
        ],
        title: [
            {required: true, message: '请输入标题', trigger: 'blur'}
        ],
        intro: [
            {required: true, message: '请输入内容', trigger: 'blur'}
        ],
        fileUrls: [
            {required: true, message: '请上传附件'}
        ],
        openType: [
            {required: true, message: '请选择是否公开', trigger: 'change'}
        ],
    })

    const submitForm = async (formEl: FormInstance | undefined) => {
        console.log(formEl)
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                $http.post('/mall/preciseHelp', ruleForm.value)
                .then((res:any)=> {
                    console.log(res)
                    if (res.code === 200) {
                        ruleForm.value = {
                            goodsType: '',
                            title: '',
                            intro: '',
                            fileUrls: [],
                            openType: '0',
                        }
                        fileList.value = []; // 清空上传的文件
                        ElMessage({
                            message: '提交成功',
                            type: "success",
                        });
                    }
                })
            } else {
                console.log('error submit!', fields)
            }
        })
    }

    
    const handlePreview = (uploadFile: any) => {
        console.log(uploadFile)
    }
    const handleSuccess = (res: any, uploadFile: any, uploadList: any) => {
        ruleForm.value.fileUrls.push(res.data.url);
    }
    const handleRemove = (uploadFile: any, uploadFiles: any) => {
        ruleForm.value.fileUrls = [];
        uploadFiles.forEach((item: any)=> {
            ruleForm.value.fileUrls.push(item.response.data.url);
        })
    }
</script>
    
<style lang="less" scoped>
.main {
    width: 100%;
    background-color: #f5f5f5;
}

.bg {
    width: 100%;
    height: 100px;

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.formContent {
    margin: 55px auto;
    width: 1200px;
    background-color: #fff;
    padding: 100px 150px;
    box-sizing: border-box;
    .el-select {
        width: 100%;
    }
    .el-button {
        width: 130px;
        background-color: @baseColor;
        color: #fff;
    }
}
</style>