<template>
    <div class="hc-task-html-form-body">
        <hc-table-form v-if="detailInfo.opinionType === 1 && tableHtml" ref="htmlRef" :form="htmlForm" :html="tableHtml" :loading="htmlLoading" @render="htmlRender" />
        <hc-pdf v-else-if="detailInfo.opinionType === 2 && HtmlPdfUrl" :src="HtmlPdfUrl" />
        <hc-empty v-else-if="detailInfo.opinionType === 3" :src="nullPng" title="当前暂无审计咨询意见" />
        <hc-empty v-else :src="noDataPng" />
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { deepClone, getObjValue } from 'js-fast-way'
import nullPng from '~src/assets/view/null.svg'
import noDataPng from '~src/assets/view/no-data.svg'

const props = defineProps({
    detail: {
        type: Object,
        default: () => ({}),
    },
})

//监听数据
const detailInfo = ref(props.detail)
watch(() => props.detail, (detail) => {
    setTaskInfo(detail)
}, { deep: true })

//渲染完成
const opinionType = ref(0)
onMounted(() => {
    setTaskInfo(props.detail)
})

//设置任务信息
const tableHtml = ref('')
const HtmlPdfUrl = ref('')
const setTaskInfo = (info) => {
    const form = getObjValue(info.tableData)
    htmlLoading.value = true
    detailInfo.value = info
    opinionType.value = info.opinionType
    tableHtml.value = info.tableHtml
    htmlForm.value = deepClone(form)
    HtmlPdfUrl.value = info.pdfUrl
}

//填写的表单
const htmlRef = ref(null)
const htmlForm = ref({})
const htmlLoading = ref(false)
const htmlRender = (form) => {
    htmlForm.value = form
    htmlLoading.value = false
}

//获取表单数据
const getTableForm = () => {
    const res = htmlRef.value?.getFormData()
    return getObjValue(res)
}

defineExpose({
    getTableForm,
})
</script>

