<template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
            <el-row class="mb10">
                <div class="form-header-actions" style="width: 100%;">
                    <div>
                        <el-button type="primary" icon="Check" @click="handleInitiateApproval" :loading="submitLoading">
                            {{ t('projectExitFeedback.actions.initiateApproval') }}
                        </el-button>
                        <el-button icon="Document" @click="handleSaveDraft">
                            {{ t('projectExitFeedback.actions.saveDraft') }}
                        </el-button>
                        <el-button icon="FolderOpened" @click="handleLoadTemplate">
                            {{ t('projectExitFeedback.actions.loadTemplate') }}
                        </el-button>
                        <el-button icon="FolderAdd" @click="handleSaveTemplate">
                            {{ t('projectExitFeedback.actions.saveTemplate') }}
                        </el-button>
                    </div>
                    <div style="margin-left:auto;">
                        <el-button icon="View" @click="handleViewWorkflow">
                            {{ t('projectExitFeedback.actions.viewWorkflow') }}
                        </el-button>
                    </div>
                </div>
            </el-row>

            <el-row class="mb10">
                <el-form :model="headerForm" label-width="80px" class="w-full">
                    <el-form-item :label="t('projectExitFeedback.headerForm.title')">
                        <el-input v-model="headerForm.title"
                            :placeholder="t('projectExitFeedback.headerForm.titlePlaceholder')" />
                    </el-form-item>
                    <el-form-item :label="t('projectExitFeedback.headerForm.description')">
                        <el-input v-model="headerForm.description"
                            :placeholder="t('projectExitFeedback.headerForm.descriptionPlaceholder')" />
                    </el-form-item>
                    <el-form-item :label="t('projectExitFeedback.headerForm.attachments')">
                        <UploadFile :modelValue="headerForm.attachments" @change="uploadChange" :fileSize="20" type="simple" :limit="10" />
                    </el-form-item>
                </el-form>
            </el-row>

            <ProjectExitFeedbackForm v-model="formData" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage } from '/@/hooks/message';
import ProjectExitFeedbackForm from '/@/components/investment/common/ProjectExitFeedbackForm.vue';
import { ProjectExitFeedback } from '/@/views/invMid/projectExitFeedback/interface/type';
import {addProjectExitPlanFeedback} from "/@/api/investment/projectExitPlan";
import UploadFile from "/@/components/Upload/index.vue";
import {flowFn} from "/@/utils/flowFn";
import {addFlowForm} from "/@/api/flow/flow";
import {flowNameOptions} from "/@/hooks/enums";
const { t } = useI18n();
const message = useMessage();

const headerForm = reactive<{ title: string, description: string, attachments: any[] | string}>({
    title: '',
    description: '',
    attachments: [] as any[],
});
const formData = ref<ProjectExitFeedback>({
    exitTime: '',
    exitExecutor: '',
	exitRemark: '',
	exitAttachment: '',
});
const submitLoading = ref(false);
const handleInitiateApproval = async () => {
	if (!formData.value.projectId){
		message.error('项目名称必填');
		return
	}
	submitLoading.value = true;
	const attachments = JSON.stringify(headerForm.attachments);
	const {processInstanceId} = await flowFn('VITE_FLOWID_36',{
		paramMap:{
			// miu0ilc1tfa61_assignee_select: [
			// 	{
			// 		"type": "user",
			// 		"id": "1",
			// 		"name": "admin",
			// 		"avatar": "/admin/sys-file/local/2a14ae08150e483c93e12ac8934173e2.png"
			// 	}
			// ]
		}
	})
	const flowNameObj = flowNameOptions.filter(item => item.label === 'exitFeedback')[0]
	await addFlowForm({
		title: headerForm.title,
		description: headerForm.description,
		attachments,
		processInstanceId,
		flowType: flowNameObj.value
	})
	formData.value.processInstanceId = processInstanceId;
	const exitAttachment = JSON.stringify(formData.value.exitAttachment);
    const params = { ...formData.value, exitAttachment }
	addProjectExitPlanFeedback(params).then(()=>{
		message.success(t('common.success'));
	}).catch((err: any) => {
		message.error(err.msg);
	}).finally(() => {
		submitLoading.value = false;
	});
};

const handleSaveDraft = () => {
    message.info(t('projectExitFeedback.messages.saveDraft'));
};

const handleLoadTemplate = () => {
    message.info(t('projectExitFeedback.messages.loadTemplate'));
};

const handleSaveTemplate = () => {
    message.info(t('projectExitFeedback.messages.saveTemplate'));
};

const handleViewWorkflow = () => {
    message.info(t('projectExitFeedback.messages.viewWorkflow'));
};
const uploadChange = (_:any,data:any[]) =>{
	if (!data || Object.prototype.toString.call(data) !== '[object Array]' || data.length === 0){
		headerForm.attachments = [];
		return;
	}
	headerForm.attachments = data.map((item:any) => {
		return {
			name: item.name,
			url: item.url
		}
	})
}
</script>

<style scoped>
.layout-container .layout-padding {
    height: auto;
    overflow: auto;
}

.form-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
