<template>
    <div class="app-container">
        <el-card class="top-radio">
            <el-radio-group v-model="tableType">
                <el-radio-button label="运行" value="运行" />
                <el-radio-button label="检修" value="检修" />
                <el-radio-button label="项目部" value="项目部" />
            </el-radio-group>

            <ComButton type="info" plain icon="Download"> 下载统计表 </ComButton>
        </el-card>
        <!-- 日计划填报管理列表 -->
        <ComTable
            ref="comTableRef"
            :key="tableType"
            :show-toolbar="true"
            :show-action="true"
            :load-data="listPlanAPI"
            :form-columns="formColumns"
            :table-columns="initTableColumns"
            :action-columns="actionColumns"
        >
            <template #toolbar>
                <ComButton type="primary" icon="Plus" @click="onHandleAdd">新增日计划</ComButton>
                <ComButton
                    plain
                    type="info"
                    icon="Download"
                    v-if="['检修', '项目部'].includes(tableType)"
                >
                    下载工作量统计表
                </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 { listPlanAPI, delPlanAPI } from '@/api/planMange/plan.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, tableColumns_1, tableColumns_2, dialogConfig, buildFormColumns } = config

const comTableRef = ref(null)
const addFormRef = ref(null)
const tableType = ref('运行')

// 搜索表单配置（当前月计划场景暂不依赖下拉接口，直接使用静态配置）
const formColumns = computed(() => buildFormColumns())
const initTableColumns = computed(() => {
    if (tableType.value === '运行') return [...tableColumns, ...tableColumns_1]
    if (tableType.value !== '运行') return [...tableColumns, ...tableColumns_2]
})

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

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

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

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

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

<style scoped lang="scss">
.top-radio {
    margin-bottom: 10px;
    :deep(.el-card__body) {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 20px !important;
    }
}
</style>
