<template>
    <div class="monthly-add-form">
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="auto"
            size="large"
            class="month-form"
        >
            <el-row :gutter="12" align="middle">
                <el-col :span="8">
                    <el-form-item label="计划执行月份" prop="month">
                        <el-date-picker
                            v-model="formData.month"
                            type="month"
                            value-format="YYYY-MM"
                            placeholder="请选择月份"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-form-item prop="keyword" class="keyword-item">
            <el-input
                placeholder="输入关键字"
                clearable
                v-model.trim="formData.keyword"
                @keyup.enter="onSearch"
                style="width: 240px"
            >
                <template #suffix>
                    <el-icon @click="onSearch" style="cursor: pointer">
                        <Search />
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>
        <!-- 任务列表 -->
        <el-table
            border
            :data="tableData"
            v-loading="loading"
            @selection-change="onSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column align="center" prop="projectName" label="项目名称" min-width="260" />
            <el-table-column align="center" prop="workTask" label="工作任务" min-width="360" />
        </el-table>
    </div>
</template>

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

const props = defineProps({
    // 初始查询参数（比如从父页面传入当前月份）
    defaultMonth: {
        type: String,
        default: '',
    },
    // 加载任务列表的方法，由父组件传入
    loadTaskList: {
        type: Function,
        default: null,
    },
})

const { proxy } = getCurrentInstance()

const formRef = ref(null)
const loading = ref(false)
const tableData = ref([])
const selectedRows = ref([])

const formData = ref({
    month: props.defaultMonth || '',
    keyword: '',
})

const rules = {
    month: [{ required: true, message: '请选择计划执行月份', trigger: 'change' }],
}

// 搜索 / 刷新列表
const fetchData = async () => {
    if (!props.loadTaskList) return
    await formRef.value.validate()
    loading.value = true
    try {
        const params = {
            month: formData.value.month,
            keyword: formData.value.keyword,
        }
        const res = await props.loadTaskList(params)
        tableData.value = res?.rows || res?.data?.rows || res?.data || []
    } catch (e) {
        console.error('加载计划任务列表失败:', e)
        tableData.value = []
    } finally {
        loading.value = false
    }
}

const onSearch = () => {
    fetchData()
}

const onSelectionChange = (rows) => {
    selectedRows.value = rows
}

// 默认月份变化时，同步到表单
watch(
    () => props.defaultMonth,
    (val) => {
        if (val) formData.value.month = val
    },
    { immediate: true },
)

// 暴露方法给父组件：获取选中任务、触发查询、校验
defineExpose({
    getSelectedTasks: () => selectedRows.value,
    search: fetchData,
    validate: () => formRef.value.validate(),
})
</script>

<style scoped lang="scss">
.monthly-add-form {
    .month-form {
        margin-bottom: 12px;
    }

    .keyword-item :deep(.el-form-item__content) {
        justify-content: flex-end;
    }
}
</style>
