<template>
    <div class="mb-8 border-b border-[#e5e7eb]" v-loading="loading">
        <!-- 顶部操作按钮 -->
        <el-row class="mb10">
            <div class="flex items-center justify-end" style="width: 100%;">
                <div style="margin-left:auto;">
                    <el-button icon="View" @click="handleViewWorkflow">
                        {{ t('reserveRegistration.viewWorkflow') }}
                    </el-button>
                </div>
            </div>
        </el-row>

        <!-- 标题、描述、上传附件 -->
        <el-row class="mb10">
            <el-form label-width="80px" class="w-full">
                <el-form-item :label="t('reserveRegistration.formTitle')">
                    <el-input :value="flowForm.title" readonly />
                </el-form-item>
                <el-form-item :label="t('reserveRegistration.description')">
                    <el-input :value="flowForm.description" readonly />
                </el-form-item>
                <el-form-item :label="t('reserveRegistration.attachments')">
                    <UploadFile v-model="flowForm.attachments" :fileSize="20" type="simple" :limit="10" disabled />
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { useMessage } from '/@/hooks/message';
import { getFlowFormByProcessInstanceId } from '/@/api/flow/flow';

const { t } = useI18n();
const message = useMessage();
const loading = ref(false)

const props = defineProps({
    processInstanceId: {
        type: String,
        default: ''
    }
})
watch(() => props.processInstanceId, (newVal) => {
    if (newVal) {
        fetchFlowForm()
    }
})

const flowForm = ref({
    title: '',
    description: '',
    attachments: []
})
const fetchFlowForm = async () => {
    loading.value = true
    try {
        const res = await getFlowFormByProcessInstanceId(props.processInstanceId)
        flowForm.value = res.data ? {
            ...res.data,
            attachments: JSON.parse(res.data.attachments)
        } : flowForm.value
    } finally {
        loading.value = false
    }
}

const handleViewWorkflow = () => {
    message.info(t('reserveRegistration.viewWorkflowClicked'));
    // TODO: 实现查看流程逻辑
};

onMounted(() => {
    if (props.processInstanceId) {
        fetchFlowForm()
    }
})
</script>
