<template>
    <div>
        <el-row class="mb10 header-meta">
            <div class="meta-item">{{ t('cooperationUnit.reporterLabel') + displayReporter }}</div>
            <div class="meta-item">{{ t('cooperationUnit.reportingUnitLabel') + displayUnit }}</div>
            <div class="meta-item">{{ t('cooperationUnit.dateLabel') + displayDate }}</div>
            <div class="meta-item">{{ t('cooperationUnit.serialNumber') + '--' }}</div>
        </el-row>

        <!-- 动态明细表（按图示） -->
        <el-table :data="data" border style="width: 100%;">
            <el-table-column type="index" :label="t('cooperationUnit.index')" width="60" />
            <el-table-column prop="cooperationName" :label="t('cooperationUnit.cooperationName')" min-width="200" />
            <el-table-column prop="areaCode" :label="t('cooperationUnit.provinceCity')" min-width="240">
                <template #default="scope">
                    {{ scope.row.areaCode }}
                </template>
            </el-table-column>
            <el-table-column prop="cooperationNature" :label="t('cooperationUnit.cooperationNature')" min-width="140">
                <template #default="{ row }">
                    {{ cooperationPartnerNatureOptions.find(item => item.value === row.cooperationNature)?.label || row.cooperationNature || '--' }}
                </template>
            </el-table-column>
            <el-table-column prop="cooperationIndustry" :label="t('cooperationUnit.cooperationIndustry')" min-width="160" />
            <el-table-column prop="proposedBusinessCooperation" :label="t('cooperationUnit.proposedBusinessCooperation')" min-width="180" />
            <el-table-column prop="cooperationAdvantage" :label="t('cooperationUnit.cooperationAdvantage')" min-width="160" />
            <el-table-column prop="cooperationStatus" :label="t('cooperationUnit.cooperationStatus')" min-width="140" />
            <el-table-column prop="startTime" :label="t('cooperationUnit.startTime')" min-width="170" />
            <el-table-column prop="endTime" :label="t('cooperationUnit.endTime')" min-width="170" />
            <el-table-column prop="unitAddress" :label="t('cooperationUnit.unitAddress')" min-width="200" />
            <el-table-column prop="unitContactPerson" :label="t('cooperationUnit.unitContactPerson')" min-width="150" />
            <el-table-column prop="contactPersonDept" :label="t('cooperationUnit.contactPersonDept')" min-width="160" />
            <el-table-column prop="contactPersonPhone" :label="t('cooperationUnit.contactPersonPhone')" min-width="160" />
            <el-table-column prop="potentialCooperation" :label="t('cooperationUnit.potentialCooperation')" min-width="180" />
            <el-table-column prop="businessConnectionCompany" :label="t('cooperationUnit.businessConnectionCompany')" min-width="200" />
            <el-table-column prop="cooperationController" :label="t('cooperationUnit.actualController')" min-width="160" />
            <el-table-column prop="shareholdingRatio" :label="t('cooperationUnit.shareholdingRatio')" min-width="140" />
        </el-table>
    </div>
</template>

<script lang="ts" name="bizInvestmentCooperationUnit" setup>
import { useI18n } from 'vue-i18n';
import { useUserInfo } from '/@/stores/userInfo';
import { formatDate } from '/@/utils/formatTime';
import { cooperationPartnerNatureOptions } from '/@/hooks/enums'

const props = defineProps({
    isUpdate: {
        type: Boolean,
        default: false
    },
    data: {
        type: Array,
        default: () => ([])
    }
})

const { t } = useI18n();

// 头部摘要显示
const userInfoStore = useUserInfo();
const displayReporter = (userInfoStore.userInfos.user?.username || '');
const displayUnit = (userInfoStore.userInfos.user?.deptName || '');
const displayDate = formatDate(new Date(), 'YYYY-mm-dd');
</script>

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

.header-summary .title {
    margin: 0 auto;
    font-size: 18px;
    font-weight: 600;
}

.header-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    margin: 0 auto;
}

.header-meta .meta-item {
    color: var(--el-text-color-regular);
}

.required-star {
    color: var(--el-color-danger);
    margin-right: 2px;
}

.red-label {
    color: var(--el-color-danger);
}
</style>

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