<template>
    <!-- style="margin-bottom: 16px" -->

    <div class="table-box">
        <div style="padding-bottom: 16px">
            <el-button @click="handleReset"> 重置 </el-button>
            <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
        </div>
        <div class="card table-main">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="基本信息" name="basicInfo">
                    <rulesForm
                        :ruleForm="dataStore.editRuleForm"
                        :formData="dataStore.editFormData"
                        :rules="dataStore.rules"
                        ref="formRef"
                    >
                    </rulesForm>
                </el-tab-pane>

                <el-tab-pane label="问答详细" name="third">
                    <div style="width: 1280px; margin: 0 auto">
                        <Editor v-model:content="dataStore.editRuleForm.answer" ref="editorRef" />
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts" name="QAManagementListEdit">
import rulesForm from "@/components/rulesForm/index.vue";
import { getQAListDetailsApi, getQAListEditUpApi, getQAListSaveApi } from "@/api/modules/QAList";
import { ref, reactive } from "vue";
// import { convertSpanToDiv } from "@/utils/convertSpanToDiv";
import Editor from "@/components/Editor/index.vue";
import { useMsg } from "@/hooks/useMsg";
import { EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
import { cloneDeep } from "lodash-es";
const $route = useRoute();
const activeName = ref("basicInfo");
//数据集合
const dataStore = reactive<any>({
    // value: "",
    editRuleForm: cloneDeep(EDIT_RULE_FORM),
    editFormData: cloneDeep(EDIT_FORM_DATA),
    rules: RULES
});
const formRef: any = ref(null);
const editorRef = ref<any>(null);
//详情
const getQAListDetails = async () => {
    let id = $route.query.id;
    if (!id) {
        return;
    }
    const result = await getQAListDetailsApi(id);
    if (result?.code === 0) {
        const { data } = result;
        //这里是传给基本信息组件的表单数据
        dataStore.editRuleForm = cloneDeep(data);
        if (!data.answer) {
            editorRef?.value?.clearEditor();
        }
        // dataStore.editRuleForm.answer = convertSpanToDiv(dataStore.editRuleForm.answer);

        dataStore.value = data.answer;
    }
};
getQAListDetails();

//更新
const getQAListEditUp = async () => {
    // dataStore.editRuleForm.answer = dataStore.value;
    const result: any = await getQAListEditUpApi(dataStore.editRuleForm);
    if (result?.code === 0) {
        useMsg("success", result?.msg);
        // dataStore.editRuleForm = result?.data;
    }
};
//新增 getQAListSaveApi
const getQAListSave = async () => {
    // dataStore.editRuleForm.answer = dataStore.value;
    const result: any = await getQAListSaveApi(dataStore.editRuleForm);
    if (result?.code === 0) {
        useMsg("success", result?.msg);
    }
};
const handleReset = () => {
    if ($route.query.id) {
        getQAListDetails();
    } else {
        resetFields();
    }
};
//重置验证状态
const resetFields = () => {
    if (!formRef.value!.ruleFormRef) return;
    formRef!.value!.ruleFormRef.resetFields();
    editorRef?.value?.clearEditor();
    for (let key in dataStore.editRuleForm) {
        dataStore.editRuleForm[key] = "";
    }
    dataStore.editRuleForm.sort = 0;
    // dataStore.value = "";
};

const handleSubmit = () => {
    if (!formRef.value!.ruleFormRef) return;
    formRef!.value!.ruleFormRef!.validate((valid: any) => {
        if (valid) {
            $route.query.id ? getQAListEditUp() : getQAListSave();
            console.log("submit!");
        } else {
            console.log("error submit!");
            return false;
        }
    });
};
</script>

<style scoped></style>
