<template>
    <el-form label-width="180px" class="p-8 basic-info-form striped-form">
        <div class="section-block">
            <div class="section-header">
                <span class="bar"></span>
                <h3 class="section-title">{{ t('mixedRegister.sections.instruction') }}</h3>
            </div>
            <el-row :gutter="20" class="instruction-grid">
                <el-col v-for="field in instructionFields" :key="field.key" :span="field.span || 8">
                    <el-form-item :label="field.label" label-width="80px">
                        {{ instructionForm[field.key] || '--' }}
                    </el-form-item>
                </el-col>
            </el-row>
        </div>

        <div class="section-block">
            <div class="section-header">
                <span class="bar"></span>
                <h3 class="section-title">{{ t('mixedRegister.sections.basic') }}</h3>
            </div>
            <el-row :gutter="12">
                <el-col v-for="field in basicInfoFields" :key="field.key" :span="field.span || 12" class="mb-4">
                    <el-form-item :label="field.label">
                        <div v-if="field.type === 'select'">
                            {{ field.fieldProps?.options?.find((item: any) => item.value === basicInfoForm[field.key])?.label || basicInfoForm[field.key] || '--' }}
                        </div>
                        <div v-else>{{ basicInfoForm[field.key] || '--' }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
    </el-form>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import {
    cooperationPartnerNatureOptions,
    industryChainCategoryOptions,
    mixedCompanyCategoryOptions,
    mixedCompanyFieldOptions,
    mixedCompanyIndustryOptions,
    mixedReformMethodOptions,
    mixedReformTypeOptions
} from '/@/hooks/enums';
const { t } = useI18n();

const props = defineProps<{
    instructionForm: Record<string, any>;
    basicInfoForm: Record<string, any>;
}>();


const instructionFields = computed<Array<{ key: string; label: string, [key: string]: any }>>(() => [
    { key: 'reportingUnit', label: t('mixedRegister.instructionFields.reportUnit') },
    { key: 'contactPerson', label: t('mixedRegister.instructionFields.contact') },
    { key: 'contactPhone', label: t('mixedRegister.instructionFields.contactMethod') },
]);

const basicInfoFields = computed<Array<{ key: string; label: string, [key: string]: any }>>(() => [
    { key: 'groupBelonging', label: t('mixedRegister.basicFields.groupName') },
    { key: 'projectYear', label: t('mixedRegister.basicFields.year') },
    { key: 'projectName', label: t('mixedRegister.basicFields.projectName') },
    { key: 'implementEnterprise', label: t('mixedRegister.basicFields.companyFullName') },
    { key: 'enterpriseCreditCode', label: t('mixedRegister.basicFields.creditCode') },
    { key: 'partnerNature', label: t('mixedRegister.basicFields.partnerNature'), type: 'select', fieldProps: { options: cooperationPartnerNatureOptions } },
    { key: 'partnerName', label: t('mixedRegister.basicFields.partnerName') },
    { key: 'progressStatus', label: t('mixedRegister.basicFields.progressStatus') },
    { key: 'estimatedCompletionTime', label: t('mixedRegister.basicFields.expectedFinishTime') },
    { key: 'mixedReformMethod', label: t('mixedRegister.basicFields.mixedMode'), type: 'select', fieldProps: { options: mixedReformMethodOptions } },
    { key: 'isIndustryLeader', label: t('mixedRegister.basicFields.isIndustryBenchmark') },
    { key: 'mixedReformType', label: t('mixedRegister.basicFields.mixedType'), type: 'select', fieldProps: { options: mixedReformTypeOptions } },
    { key: 'projectStartTime', label: t('mixedRegister.basicFields.projectStartTime') },
    { key: 'actualCompletionTime', label: t('mixedRegister.basicFields.completionTime') },
    { key: 'reformProgress', label: t('mixedRegister.basicFields.reformProgress'), span: 24 },
    { key: 'mixedCompanyCategory', label: t('mixedRegister.basicFields.mixedCompanyCategory'), type: 'select', fieldProps: { options: mixedCompanyCategoryOptions } },
    { key: 'mixedCompanyIndustry', label: t('mixedRegister.basicFields.mixedCompanyIndustry'), type: 'select', fieldProps: { options: mixedCompanyIndustryOptions } },
    { key: 'mixedCompanyField', label: t('mixedRegister.basicFields.mixedCompanyField'), type: 'select', fieldProps: { options: mixedCompanyFieldOptions } },
    { key: 'industryChainCategory', label: t('mixedRegister.basicFields.industryChainCategory'), type: 'select', fieldProps: { options: industryChainCategoryOptions } }
]);
</script>

<style scoped>
.section-block {
    margin-bottom: 24px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.section-header .bar {
    width: 4px;
    height: 18px;
    background-color: var(--el-color-primary);
    border-radius: 2px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}
</style>
