<template>
    <div class="container">
        <Breadcrumb :items="['售后服务', '提交工单']" />

        <a-card title="提交工单">
            <a-form :model="form" :rules="rules" layout="vertical" :style="{ width: '600px' }"
                @submit-success="handleSubmit">
                <a-form-item field="title" label="标题">
                    <a-input v-model="form.title" :max-length="25" allow-clear show-word-limit />
                </a-form-item>
                <a-form-item field="content" label="内容">
                    <a-textarea v-model="form.content" placeholder="请详细说明您遇到的问题，详细的阐述有助于我们快速为您解决问题..." :max-length="200"
                        :auto-size="{
                            minRows: 6,
                            maxRows: 20
                        }" allow-clear show-word-limit />
                </a-form-item>

                <a-form-item field="files" label="上传附件">
                    <a-upload action="/cloud/api.php" :file-list="form.files" @change="handleFileChange" />
                </a-form-item>

                <a-form-item field="email" label="通知邮箱">
                    <a-input v-model="form.email" :max-length="30" allow-clear placeholder="请填写您的邮箱，客服回复后会通过邮件通知您" />
                </a-form-item>

                <a-form-item>
                    <a-button html-type="submit" :loading="loading">提交</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { createOrder } from '@/api/workOrder'
import { useRouter } from 'vue-router'
import { Notification } from '@arco-design/web-vue'

const loading = ref(false)
const router = useRouter()

const rules = {
    title: [
        {
            required: true,
            message: '请输入工单标题',
        },
    ],
    content: [
        {
            required: true,
            message: '请详细说明您遇到的问题',
        },
    ],
    email: [
        {
            type: 'email',
            required: true,
            message: '请填写正确的通知邮箱',
        }
    ]
}

const form = reactive({
    title: '',
    content: '',
    email: '',
    files: [],
})

const handleSubmit = async () => {
    try {
        loading.value = true
        const res = await createOrder(form)
        if (!res || res.code !== 0)
            return Notification.error({
                title: '提交工单失败！',
                content: res?.msg ?? '请稍后再试'
            })
        Notification.success({
            title: '提交工单成功！'
        })
        router.push(`/service/orderDetail/${res.data}`)
    } catch (error) {
        Notification.error({
            title: '提交工单失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

const handleFileChange = (fileList) => {
    fileList.forEach(f => {
        if (f.status === 'done' && f.response?.downurl) {
            f.url = f.response?.viewurl ?? f.response.downurl
        }
    })

    form.files = fileList // 更新到表单数据中
}

</script>

<style scoped>
.container {
    padding: 0 20px 20px 20px;
}

.table {
    margin-top: 15px;
}
</style>