<template>
    <el-card shadow="never" class="section-card">
        <el-form ref="formRef" :model="basicInfoForm" label-width="180px" class="basic-info-form striped-form">
            <div class="section-block">
                <div class="section-header">
                    <span class="bar"></span>
                    <h3 class="section-title">{{ instructionTitle }}</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">
                            <el-input maxlength="255" v-model="instructionForm[field.key]" :placeholder="t('mixedRegister.placeholder.input')" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>

            <div class="section-block">
                <div class="section-header">
                    <span class="bar"></span>
                    <h3 class="section-title">{{ basicInfoTitle }}</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">
                            <!-- 日期时间选择器 -->
                            <el-date-picker
                                v-if="field.type && ['date', 'datetime'].includes(field.type)"
                                v-model="basicInfoForm[field.key]"
                                :type="field.type"
                                :placeholder="t('mixedRegister.placeholder.select')"
                                v-bind="field.fieldProps"
                            />
                            <!-- 选择器 -->
                            <el-select
                                v-else-if="field.type === 'select'"
                                v-model="basicInfoForm[field.key]"
                                :placeholder="t('mixedRegister.placeholder.select')"
                                v-bind="field.fieldProps"
                            >
                                <el-option
                                    v-for="item of field.fieldProps?.options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                            <div class="partner-name-cell w-full" v-else-if="isUpdate && field.key === 'projectName'">
                                <el-input v-model="basicInfoForm.projectName" maxlength="255"
                                    :placeholder="t('mixedRegister.placeholder.select')" readonly />
                                <el-button icon="OfficeBuilding" size="small" @click="librarySelectVisible = true" />
                                <LibrarySelect v-model="librarySelectVisible" @select="handleLibrarySelect" />
                            </div>
                            <!-- 输入框 -->
														<template v-else>
															<el-input-number v-if="field.type === 'number'" :length="field.length" v-model="basicInfoForm[field.key]"
																	 :controls="false" :min="0"/>
															<el-input v-else maxlength="255" v-model="basicInfoForm[field.key]" :placeholder="t('mixedRegister.placeholder.input')" />
														</template>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { useI18n } from 'vue-i18n';
import LibrarySelect from '/@/views/investment/mixedReformRegister/components/LibrarySelect.vue';
const { t } = useI18n();

type FieldConfig = {
    key: string;
    label: string;
    span?: number;
    type?: string;
    fieldProps?: any;
};

const props = defineProps<{
    instructionTitle: string;
    basicInfoTitle: string;
    instructionFields: FieldConfig[];
    instructionForm: Record<string, any>;
    basicInfoFields: FieldConfig[];
    basicInfoForm: Record<string, any>;
    isUpdate: boolean
}>();

const { instructionTitle, basicInfoTitle } = props;

// 处理专委会评审信息库选择事件
const librarySelectVisible = ref(false)
const handleLibrarySelect = (row: any) => {
    for (const field of props.instructionFields) {
        props.instructionForm[field.key] = row[field.key]
    }
    Object.assign(props.basicInfoForm, { ...row, id: '', parentId: row.id })
    librarySelectVisible.value = false
}

const formRef = ref<FormInstance|null>(null)
const validate = async () => {
    const isValid = await formRef.value?.validate()
    if (isValid) {
        return {
            ...props.instructionForm,
            ...props.basicInfoForm
        }
    }
    throw new Error('表单校验不通过')
}

defineExpose({ validate })
</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;
}

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

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