<template>
    <el-card shadow="never" class="card-section">
        <template #header>
            <div class="card-header">投入的资源情况（项目部）</div>
        </template>
        <el-form
            ref="formRef"
            :model="formData"
            :rules="!isDetail ? rules : {}"
            size="large"
            label-width="auto"
            :disabled="isDetail"
        >
            <!-- 项目部类型的表单字段，稍后完善 -->
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="计划工作量" prop="planWorkload">
                        <el-input-number
                            :model-value="formData.planWorkload"
                            @update:model-value="(val) => updateField('planWorkload', val)"
                            :min="0"
                            :precision="2"
                            placeholder="请输入计划工作量"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="拟投入作业人员" prop="planPersonnelList">
                        <el-input
                            :model-value="selectedManagerNames"
                            placeholder="请选择作业人员"
                            readonly
                            @click="onOpenPersonPicker"
                            class="clickable-suffix"
                        >
                            <template #suffix>
                                <el-icon class="clickable-suffix">
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="拟投入长租车" prop="planLongRentCar">
                        <el-input-number
                            :model-value="formData.planLongRentCar"
                            @update:model-value="(val) => updateField('planLongRentCar', val)"
                            :min="0"
                            placeholder="请输入长租车数量"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="拟投入临租车" prop="planTempRentCar">
                        <el-input-number
                            :model-value="formData.planTempRentCar"
                            @update:model-value="(val) => updateField('planTempRentCar', val)"
                            :min="0"
                            placeholder="请输入临租车数量"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</template>

<script setup name="ProjectForm">
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'

const props = defineProps({
    formData: {
        type: Object,
        required: true,
    },
    isDetail: {
        type: Boolean,
        default: false,
    },
    selectedManagerNames: {
        type: String,
        default: '',
    },
})

const emit = defineEmits(['open-person-picker', 'update:formData'])

const formRef = ref(null)

// 更新表单字段
const updateField = (field, value) => {
    emit('update:formData', {
        ...props.formData,
        [field]: value,
    })
}

// 表单校验规则
const rules = computed(() => ({
    planWorkload: [{ required: true, message: '请输入计划工作量', trigger: 'blur' }],
    planPersonnelList: [{ required: true, message: '请选择拟投入作业人员', trigger: 'change' }],
    planLongRentCar: [{ required: true, message: '请输入拟投入长租车数量', trigger: 'blur' }],
    planTempRentCar: [{ required: true, message: '请输入拟投入临租车数量', trigger: 'blur' }],
}))

const onOpenPersonPicker = () => {
    emit('open-person-picker')
}

// 暴露方法给父组件
defineExpose({
    validate: () => formRef.value?.validate(),
    clearValidate: () => formRef.value?.clearValidate(),
})
</script>

<style scoped lang="scss">
.card-section {
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.3s ease;

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    :deep(.el-card__header) {
        padding: 16px 20px;
        background-color: #fafbfc;
        border-bottom: 1px solid #f0f2f5;
    }

    :deep(.el-card__body) {
        padding: 24px 20px;
    }
}

.card-header {
    font-weight: 600;
    font-size: 15px;
    color: #1f2937;
    position: relative;
    padding-left: 12px;
    display: flex;
    align-items: center;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: linear-gradient(180deg, #1677ff 0%, #4096ff 100%);
        border-radius: 2px;
    }
}

.clickable-suffix {
    cursor: pointer;
}
</style>
