<template>
    <div class="app-container">
        <!-- 月计划填报管理列表 -->
        <ComTable
            ref="comTableRef"
            :form-columns="formColumns"
            :table-columns="tableColumns"
            :load-data="listMonthlyPlanAPI"
            :show-toolbar="true"
            :show-action="true"
            :action-columns="actionColumns"
        >
            <template #toolbar="{ formData }">
                <ComButton type="primary" icon="Plus" @click="onHandleAdd">新增月计划</ComButton>
                <ComButton
                    type="info"
                    plain
                    icon="UploadFilled"
                    @click="onExportPersonArrange(formData)"
                >
                    导出人员安排表
                </ComButton>
                <ComButton
                    type="info"
                    plain
                    icon="UploadFilled"
                    @click="onExportOverallSummary(formData)"
                >
                    导出整体汇总表
                </ComButton>
                <ComButton
                    type="info"
                    plain
                    icon="UploadFilled"
                    @click="onExportWorkloadSummary(formData)"
                >
                    导出工作量汇总表
                </ComButton>
            </template>
        </ComTable>

        <ComDialog :dialog-config="dialogConfig" @closeDialogOuter="onCloseDialogOuter">
            <template #outerContent>
                <AddForm ref="addFormRef" />
                <el-row class="common-btn-row">
                    <ComButton plain type="info" @click="onHandleCancel">取消</ComButton>
                    <ComButton @click="onHandleSave">保存</ComButton>
                </el-row>
            </template>
        </ComDialog>
    </div>
</template>

<script setup name="MonthlyPlan">
import { ref, computed, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import {
    listMonthlyPlanAPI,
    addMonthlyPlanAPI,
    delMonthlyPlanAPI,
} from '@/api/planMange/monthlyPlan.js'
import config from './config'
import ComTable from '@/components/ComTable/index.vue'
import ComButton from '@/components/ComButton/index.vue'
import ComDialog from '@/components/ComDialog/index.vue'
import AddForm from './addForm.vue'

const router = useRouter()
const { proxy } = getCurrentInstance()

const { tableColumns, dialogConfig, buildFormColumns } = config

const comTableRef = ref(null)
const addFormRef = ref(null)

// 搜索表单配置（当前月计划场景暂不依赖下拉接口，直接使用静态配置）
const formColumns = computed(() => buildFormColumns())

// 操作列
const actionColumns = [
    {
        label: '详情',
        type: 'primary',
        link: true,
        handler: (row) => {
            router.push({
                path: '/plan/monthlyPlanEdit/index',
                query: { id: row.planId, mode: 'detail' },
            })
        },
    },
    {
        label: '编辑',
        type: 'primary',
        link: true,
        handler: (row) => {
            const {
                monthlyPlanId,
                inspectionStationName,
                projectName,
                workContent,
                plannedStartTime,
                plannedEndTime,
            } = row
            router.push({
                path: '/plan/monthlyPlanEdit/index',
                query: {
                    monthlyPlanId,
                    inspectionStationName,
                    projectName,
                    workContent,
                    plannedStartTime,
                    plannedEndTime,
                },
            })
        },
    },
    {
        label: '删除',
        type: 'danger',
        link: true,
        handler: (row) => {
            proxy.$modal.confirm('是否确认删除该月计划？').then(async () => {
                const result = await delMonthlyPlanAPI({ monthlyPlanId: row.monthlyPlanId })
                if (result.code === 200) {
                    proxy.$modal.msgSuccess('删除成功')
                    comTableRef.value?.refresh()
                }
            })
        },
    },
]

// 新增
const onHandleAdd = () => {
    dialogConfig.outerVisible = true
}

// 取消
const onHandleCancel = () => {
    dialogConfig.outerVisible = false
}

// 保存
const onHandleSave = async () => {
    addFormRef.value.validate()

    const paramsList = addFormRef.value.getSelectedTasks().map((item) => ({
        planManagementId: item.planManagementId,
        planManagementMonth: item.planManagementMonth,
        inspectionStationId: item.inspectionStationId,
        inspectionStationName: item.inspectionStationName,
        projectName: item.projectName,
        workContent: item.workContent,
        planManagementMonth: item.planManagementMonth,
        plannedStartTime: item.stareDate,
        plannedEndTime: item.endDate,
        riskLevel: item.riskLevel,
    }))

    const result = await addMonthlyPlanAPI(paramsList)
    if (result.code === 200) {
        proxy.$modal.msgSuccess('保存成功')
        dialogConfig.outerVisible = false
        comTableRef.value?.refresh()
    }
}

// 关闭弹框统一处理
const onCloseDialogOuter = (visible) => {
    dialogConfig.outerVisible = visible
}

// 导出人员安排表
const onExportPersonArrange = (queryParams) => {
    console.log('queryParams', queryParams)
    // proxy.download(
    //     'xxx/xxx',
    //     {
    //         ...queryParams.value,
    //     },
    //     `job_${new Date().getTime()}.xlsx`,
    // )
}

// 导出整体汇总表
const onExportOverallSummary = (queryParams) => {
    console.log('queryParams', queryParams)
}

// 导出工作量汇总表
const onExportWorkloadSummary = (queryParams) => {
    console.log('queryParams', queryParams)
}
</script>

<style scoped></style>
