<template>
    <div class="project-basic-info-form">
        <div class="form-section-title">{{ t('reserveRegistration.basicInfo.title') }}</div>
        <el-form
            label-width="220px"
            class="project-form"
            ref="formRef"
        >
            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.applicant')">
                        {{ formData.applicant || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.applicationDate')">
                        {{ formData.applicationDate || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('reserveRegistration.basicInfo.applicationUnit')">
                        {{ formData.applicationUnit || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectName')">
                        {{ formData.projectName || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectMainUnit')">
                        {{ formData.projectMainUnit || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectOwnerUnit')">
                        {{ formData.projectOwnerUnit || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectStartDate')">
                        {{ formData.projectStartDate || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectEndDate')">
                        {{ formData.projectEndDate || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.investmentCategory')">
                        {{ investmentCategoryOptions.find(item => item.value === formData.investmentCategory)?.label || formData.investmentCategory || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectNature')">
                        {{ projectNatureOptions.find(item => item.value === formData.projectNature)?.label || formData.projectNature || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectManagerName')">
                        {{ formData.projectManagerName || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.contactNumber')">
                        {{ formData.contactNumber || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectSource')">
                        {{ projectSourceOptions.find(item => item.value === formData.projectSource)?.label || formData.projectSource || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.constructionNature')">
                        {{ constructionNatureOptions.find(item => item.value === formData.constructionNature)?.label || formData.constructionNature || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.keyProject')">
										   {{ projectImportantOptions.find(item => item.value === formData.keyProject)?.label || formData.keyProject || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.majorInvestmentProject')">
                        {{ yesOrNo.find(item => item.value === formData.majorInvestmentProject)?.label || formData.majorInvestmentProject || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('reserveRegistration.basicInfo.withinMainBusiness')">
                        {{ yesOrNo.find(item => item.value === formData.withinMainBusiness)?.label || formData.withinMainBusiness || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.mainBusinessType')">
                        {{ mainBusinessOptions.find(item => item.value === formData.mainBusinessType)?.label || formData.mainBusinessType || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.mainBusinessCode')">
                        {{ formData.mainBusinessCode || '--' }}
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectDirection')">
                        {{ projectDirectionOptions.find(item => item.value === formData.projectDirection)?.label || formData.projectDirection || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.directionSubdivision')">
                        {{ projectDirectionDetailsOptions.find(item => item.value === formData.directionSubdivision)?.label || formData.directionSubdivision || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.strategicEmergingIndustry')">
                        {{ yesOrNo.find(item => item.value === formData.strategicEmergingIndustry)?.label || formData.strategicEmergingIndustry || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.urbanStrategy')">
                        {{ cityStrategyOptions.find(item => item.value === formData.urbanStrategy)?.label || formData.urbanStrategy || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.isManufacturing')">
                        {{ yesOrNo.find(item => item.value === formData.isManufacturing)?.label || formData.isManufacturing || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.investmentRegion')">
                        {{ investmentAreaOptions.find(item => item.value === formData.investmentRegion)?.label || formData.investmentRegion || '--' }}
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectAddress')">
                        {{ formData.projectAddress || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectDetailedAddress')">
                        {{ formData.projectDetailedAddress || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.isControllingShareholder')">
                        {{ yesOrNo.find(item => item.value === formData.isControllingShareholder)?.label || formData.isControllingShareholder || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.ourShareholdingRatio')">
                        {{ formData.ourShareholdingRatio || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.totalInvestmentAmount')">
                        {{ formData.totalInvestmentAmount || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.cumulativeInvestmentLastYear')">
                        {{ formData.cumulativeInvestmentLastYear || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.ourTotalInvestmentAmount')">
                        {{ formData.ourTotalInvestmentAmount || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.basicInfo.ourCumulativeInvestmentLastYear')">
                        {{ formData.ourCumulativeInvestmentLastYear || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectOverview')">
                        {{ formData.projectDesc || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('reserveRegistration.basicInfo.progressDescription')">
                        {{ formData.progressDesc || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('reserveRegistration.basicInfo.projectProposal')">
                        <div v-for="file of formData.projectProposal" :key="file.url" class="mr-4">
                            <a :href="`${baseURL}${file.url}`" target="_blank">
                                <el-button link type="primary">
                                    {{ file.name }}
                                </el-button>
                            </a>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="sub-section-title">{{ t('reserveRegistration.investmentEstimate.title') }}</div>
            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.investmentEstimate.enterpriseSelfFund')">
                        {{ formData.enterpriseSelfFund || '0' }}
                        {{ t('reserveRegistration.investmentEstimate.unitWanYuan') }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.investmentEstimate.governmentInvestmentFund')">
                        {{ formData.governmentInvestmentFund || '0' }}
                        {{ t('reserveRegistration.investmentEstimate.unitWanYuan') }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.investmentEstimate.externalRaisedFund')">
                        {{ formData.externalRaisedFund || '0' }}
                        {{ t('reserveRegistration.investmentEstimate.unitWanYuan') }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.investmentEstimate.otherFunds')">
                        {{ formData.otherFunds || '0' }}
                        {{ t('reserveRegistration.investmentEstimate.unitWanYuan') }}
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="sub-section-title">{{ t('reserveRegistration.partnerInfo.title') }}</div>
            <el-form-item prop="partnerInfos" label-width="0">
                <el-table :data="formData.cooperationUnits" border style="width: 100%;" highlight-current-row>
                    <el-table-column type="index" :label="t('reserveRegistration.partnerInfo.table.index')" width="60" />
                    <el-table-column prop="cooperationName" :label="t('reserveRegistration.partnerInfo.table.name')" />
                    <el-table-column prop="cooperationNature" :label="t('reserveRegistration.partnerInfo.table.nature')" />
                    <el-table-column prop="cooperationController" :label="t('reserveRegistration.partnerInfo.table.controller')" />
                    <el-table-column readonly prop="shareholdingRatio" :label="t('reserveRegistration.partnerInfo.table.share')" width="100">
                        <template #default="scope">
                            {{ scope.row.shareholdingRatio }}%
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <div class="sub-section-title">{{ t('reserveRegistration.decisionInfo.title') }}</div>
            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.decisionInfo.decisionType')">
                        {{ decisionTypeOptions.find(item => item.value === formData.decisionType)?.label || formData.decisionType || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.decisionInfo.isCompleteEstablishmentProcedures')">
                        {{ yesOrNo.find(item => item.value === formData.isCompleteEstablishmentProcedures)?.label || formData.isCompleteEstablishmentProcedures || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.decisionInfo.establishmentDocumentNumber')">
                        {{ formData.establishmentDocumentNumber || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.decisionInfo.establishmentDocumentInfo')">
                        {{ formData.establishmentDocumentInfo || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.decisionInfo.isCompleteDecisionProcedures')">
                        {{ yesOrNo.find(item => item.value === formData.isCompleteDecisionProcedures)?.label || formData.isCompleteDecisionProcedures || '--' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('reserveRegistration.decisionInfo.decisionProgramDocumentNumber')">
                        {{ formData.decisionProgramDocumentNumber || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('reserveRegistration.decisionInfo.decisionDocumentInfo')">
                        {{ formData.decisionDocumentInfo || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- <div class="sub-section-title">{{ t('reserveRegistration.reviewOpinions.title') }}</div>
            <el-form-item :label="t('reserveRegistration.reviewOpinions.submitUnitOpinion')">
                {{ formData.reviewOpinions.submitUnitOpinion || '--' }}
            </el-form-item>
            <el-form-item :label="t('reserveRegistration.reviewOpinions.groupInvestmentDeptOpinion')">
                {{ formData.reviewOpinions.groupInvestmentDeptOpinion || '--' }}
            </el-form-item>
            <el-form-item :label="t('reserveRegistration.reviewOpinions.submitUnitLeadershipOpinion')">
                {{ formData.reviewOpinions.submitUnitLeadershipOpinion || '--' }}
            </el-form-item>
            <el-form-item :label="t('reserveRegistration.reviewOpinions.submitUnitMainLeadershipOpinion')">
                {{ formData.reviewOpinions.submitUnitMainLeadershipOpinion || '--' }}
            </el-form-item> -->

        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, watch, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import {
    projectNatureOptions,
    investmentCategoryOptions,
    projectSourceOptions,
    constructionNatureOptions,
    investmentAreaOptions,
    yesOrNo,
    decisionTypeOptions,
    projectImportantOptions,
    cityStrategyOptions,
    mainBusinessOptions,
    projectDirectionDetailsOptions,
    projectDirectionOptions
} from '/@/hooks/enums'
import type { ExternalCooperationUnitItemT } from '/@/api/investment/cooperationUnit'

const { t } = useI18n();

export interface ProjectBasicInfoFormData {
    applicant: string;
    applicationUnit: string;
    projectName: string;
    projectMainUnit: string;
    projectStartDate: string;
    investmentCategory: string;
    projectManagerName: string;
    projectSource: string;
    keyProject: string;
    withinMainBusiness: string;
    mainBusinessType: string;
    projectDirection: string;
    strategicEmergingIndustry: string;
    isManufacturing: string;
    projectAddress: string;
    isControllingShareholder: string;
    totalInvestmentAmount: string;
    ourTotalInvestmentAmount: string;
    projectDesc: string;
    progressDesc: string;
    projectProposal: any[];
    applicationDate: string;
    projectOwnerUnit: string;
    projectEndDate: string;
    projectNature: string;
    contactNumber: string;
    constructionNature: string;
    majorInvestmentProject: string;
    mainBusinessCode: string;
    directionSubdivision: string;
    urbanStrategy: string;
    investmentRegion: string;
    projectDetailedAddress: string;
    ourShareholdingRatio: string;
    cumulativeInvestmentLastYear: string;
    ourCumulativeInvestmentLastYear: string;
    enterpriseSelfFund: string;
    externalRaisedFund: string;
    governmentInvestmentFund: string;
    otherFunds: string;
    partnerInfos: PartnerInfo[];
    decisionType: string;
    isCompleteEstablishmentProcedures: string;
    establishmentDocumentNumber: string;
    establishmentDocumentInfo: string;
    decisionProgramDocumentNumber: string;
    decisionDocumentInfo: string;
    isCompleteDecisionProcedures: string;
    reviewOpinions: ReviewOpinions;
    processInstanceId: string;
    cooperationUnits?: ExternalCooperationUnitItemT[];
    parentId?: string;
    status: number;
    deptId: string;
}

export interface PartnerInfo {
    id?: string | number | null;
    name: string;
    nature: string;
    controller: string;
    share: string;
    cooperationController: string;
}

export interface ReviewOpinions {
    submitUnitOpinion: string;
    groupInvestmentDeptOpinion: string;
    submitUnitLeadershipOpinion: string;
    submitUnitMainLeadershipOpinion: string;
}

const props = withDefaults(defineProps<{
    modelValue?: ProjectBasicInfoFormData;
    mainTitle?: string;
}>(), {
    mainTitle: ''
});

const mainTitle = computed(() => props.mainTitle);
watch(mainTitle, () => undefined);

const defaultPartnerRow: PartnerInfo = {
    id: '',
    name: '',
    nature: '',
    controller: '',
    share: '',
};

const defaultFormData: ProjectBasicInfoFormData = {
    applicant: '',
    applicationUnit: '',
    projectName: '',
    projectMainUnit: '',
    projectStartDate: '',
    investmentCategory: '',
    projectManagerName: '',
    projectSource: '',
    keyProject: '',
    withinMainBusiness: '',
    mainBusinessType: '',
    projectDirection: '',
    strategicEmergingIndustry: '',
    isManufacturing: '',
    projectAddress: '',
    isControllingShareholder: '',
    totalInvestmentAmount: '',
    ourTotalInvestmentAmount: '',
    projectDesc: '',
    progressDesc: '',
    projectProposal: [],
    applicationDate: '',
    projectOwnerUnit: '',
    projectEndDate: '',
    projectNature: '',
    contactNumber: '',
    constructionNature: '',
    majorInvestmentProject: '',
    mainBusinessCode: '',
    directionSubdivision: '',
    urbanStrategy: '',
    investmentRegion: '',
    projectDetailedAddress: '',
    ourShareholdingRatio: '',
    cumulativeInvestmentLastYear: '',
    ourCumulativeInvestmentLastYear: '',
    enterpriseSelfFund: '',
    externalRaisedFund: '',
    governmentInvestmentFund: '',
    otherFunds: '',
    partnerInfos: [],
    decisionType: '',
    isCompleteEstablishmentProcedures: '',
    establishmentDocumentNumber: '',
    establishmentDocumentInfo: '',
    decisionProgramDocumentNumber: '',
    decisionDocumentInfo: '',
    isCompleteDecisionProcedures: '',
    processInstanceId: '',
    reviewOpinions: {
        submitUnitOpinion: '',
        groupInvestmentDeptOpinion: '',
        submitUnitLeadershipOpinion: '',
        submitUnitMainLeadershipOpinion: '',
    },
    parentId: '',
    status: 1,
    deptId: '',
    cooperationUnits: [],
};

const formData = reactive<ProjectBasicInfoFormData>({ ...defaultFormData });

watch(
    () => props.modelValue,
    newVal => {
        Object.assign(
            formData,
            newVal
        );
    },
    { immediate: true, deep: true },
);
</script>

<style scoped>
.project-basic-info-form {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
}

.form-main-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    color: var(--el-text-color-primary);
}

.form-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #409eff;
}

.project-form {
    width: 100%;
}

.form-row {
    margin-bottom: 16px;
}

.form-row:last-of-type {
    margin-bottom: 0;
}
/* 新增：确保el-form-item内容自动换行 */
:deep(.el-form-item) {
	word-wrap: break-word;
	word-break: break-all;
	overflow-wrap: break-word;
}
/* 对于表格中的内容也确保换行 */
:deep(.el-table .cell) {
	word-wrap: break-word;
	word-break: break-all;
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

:deep(.el-form-item__label) {
    font-weight: 500;
}

:deep(.is-required .el-form-item__label) {
    font-weight: 500;
    /* color: var(--el-color-danger); */
}

:deep(.is-required .el-form-item__label)::before {
    content: '*';
    /* color: var(--el-color-danger); */
    margin-right: 4px;
}

.sub-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin: 24px 0 12px;
    padding-left: 10px;
    border-left: 4px solid #409eff;
}

.partner-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.partner-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.partner-name-cell :deep(.el-input) {
    flex: 1;
}

:deep(.el-table th .cell) {
    font-weight: 500;
}
</style>