<template>
    <mx-popup-template ref="popup" title="问题纠错" right="提交" @left="close" @right="handleSubmit">
        <uv-form ref="form" :model="model" :rules="rules">
            <mx-form-item v-model="model.questionid" disabled label="问题编号"/>
            <uv-form-item prop="remark">
                <uv-textarea v-model="model.remark" count maxlength="200" placeholder="在这里填写问题描述"/>
            </uv-form-item>
        </uv-form>
    </mx-popup-template>
</template>

<script setup>
import {ref} from 'vue'
import {correctQuestion} from "@/api/webApi/front";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";

const popup = ref(null)
const form = ref(null)
const model = ref({questionid: '', remark: ''})
const loading = ref(false)
const rules = {
    remark: [{required: true, message: '问题描述不能为空'}, {max: 200, message: '问题描述不超过200字'}]
}

const open = (question) => {
    const id = question.questionId || question.id
    if (id != model.value.questionid) {
        // reset when question changed
        model.value.questionid = id
        model.value.remark = ''
    }
    popup.value.open()
}

const close = () => {
    popup.value.close()
}

const handleSubmit = async () => {
    await form.value.validate()
    await correctQuestion(model.value)
    toast('提交成功，等待工作人员处理')
    model.value.remark = '' // clean if success commit.
    close()
}
defineExpose({open, close})
</script>

<style scoped>

</style>