<template>
    <div class="p-2">
        <!-- 处方模板类型选择菜单 -->
        <el-card shadow="hover" class="mb-4">
            <el-radio-group v-model="queryParams.type" @change="handleTypeChange" class="prescription-type-selector">
                <el-radio-button :label="2">预包装处方模板</el-radio-button>
                <el-radio-button :label="3">配置处方模板</el-radio-button>
                <el-radio-button :label="4">长嘱处方模板</el-radio-button>
            </el-radio-group>
        </el-card>

        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div v-show="showSearch" class="mb-[10px]">
                <el-card shadow="hover">
                    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                        <el-form-item label="模板名称" prop="templateName">
                            <el-input v-model="queryParams.templateName" placeholder="请输入模板名称" clearable
                                @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="模板描述" prop="templateDescription">
                            <el-input v-model="queryParams.templateDescription" placeholder="请输入模板描述" clearable
                                @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="处方科室" prop="prescriptionDepartmentName">
                            <el-input v-model="queryParams.prescriptionDepartmentName" placeholder="请输入处方科室" clearable
                                @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </transition>

        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleAdd"
                            v-hasPermi="['system:enteralNutritionTemplate:add']">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
                            v-hasPermi="['system:enteralNutritionTemplate:edit']">修改</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
                            v-hasPermi="['system:enteralNutritionTemplate:remove']">删除</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="warning" plain icon="Download" @click="handleExport"
                            v-hasPermi="['system:enteralNutritionTemplate:export']">导出</el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
            </template>

            <el-table v-loading="loading" border :data="enteralNutritionTemplateList"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="ID" align="center" prop="id" v-if="true" />
                <el-table-column label="模板名称" align="center" prop="templateName" />
                <el-table-column label="模板描述" align="center" prop="templateDescription" />
                <el-table-column label="处方类型" align="center" prop="prescriptionType" />
                <el-table-column label="处方科室" align="center" prop="prescriptionDepartmentName" />
                <el-table-column label="状态" align="center" prop="status" />
                <el-table-column label="创建者" align="center" prop="createBy" />
                <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="更新者" align="center" prop="updateBy" />
                <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-tooltip content="修改" placement="top">
                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:enteralNutritionTemplate:edit']"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                                v-hasPermi="['system:enteralNutritionTemplate:remove']"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>
        <!-- 添加或修改肠内处方模板对话框 -->
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
            <el-form ref="enteralNutritionTemplateFormRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="模板名称" prop="templateName">
                    <el-input v-model="form.templateName" placeholder="请输入模板名称" />
                </el-form-item>
                <el-form-item label="模板描述" prop="templateDescription">
                    <el-input v-model="form.templateDescription" placeholder="请输入模板描述" />
                </el-form-item>
                <el-form-item label="处方科室ID" prop="prescriptionId">
                    <el-input v-model="form.prescriptionId" placeholder="请输入处方科室ID" />
                </el-form-item>
                <el-form-item label="营养产品信息">
                    <editor v-model="form.content" :min-height="192" />
                </el-form-item>
                <el-form-item label="删除标志" prop="delFlag">
                    <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="EnteralNutritionTemplate" lang="ts">
import { listEnteralNutritionTemplate, getEnteralNutritionTemplate, delEnteralNutritionTemplate, addEnteralNutritionTemplate, updateEnteralNutritionTemplate } from '@/api/parameter/basicPublicTemplate/enteralNutritionTemplate';
import { EnteralNutritionTemplateVO, EnteralNutritionTemplateQuery, EnteralNutritionTemplateForm } from '@/api/parameter/basicPublicTemplate/enteralNutritionTemplate/types';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const enteralNutritionTemplateList = ref<EnteralNutritionTemplateVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const enteralNutritionTemplateFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});

const initFormData: EnteralNutritionTemplateForm = {
    id: undefined,
    templateName: undefined,
    templateDescription: undefined,
    prescriptionType: undefined,
    prescriptionId: undefined,
    content: undefined,
    status: undefined,
    delFlag: undefined,
}
const data = reactive<PageData<EnteralNutritionTemplateForm, EnteralNutritionTemplateQuery>>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        templateName: undefined,
        templateDescription: undefined,
        type: 2,
        prescriptionType: undefined,
        prescriptionId: undefined,
        prescriptionDepartmentName: undefined,
        content: undefined,
        status: undefined,
        templateType: 1, // 设置为基础公共模板类型
        params: {
        }
    },
    rules: {
        id: [
            { required: true, message: "ID不能为空", trigger: "blur" }
        ],
    }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询肠内处方模板列表 */
const getList = async () => {
    loading.value = true;
    const res = await listEnteralNutritionTemplate(queryParams.value);
    enteralNutritionTemplateList.value = res.rows;
    total.value = res.total;
    loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
    reset();
    dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
    form.value = { ...initFormData };
    enteralNutritionTemplateFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    // 确保始终查询基础公共模板
    queryParams.value.templateType = 1;
    getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    // 确保重置后仍然查询基础公共模板
    queryParams.value.templateType = 1;
    handleQuery();
}

/** 处方模板类型变更处理 */
const handleTypeChange = (type: number) => {
    queryParams.value.type = type;
    queryParams.value.pageNum = 1;
    // 确保始终查询基础公共模板
    queryParams.value.templateType = 1;
    getList();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: EnteralNutritionTemplateVO[]) => {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
    // reset();
    // dialog.visible = true;
    // dialog.title = "添加肠内处方模板";
    router.push({
        path: '/argManage/enteralNutritionTemplateAdd',
        query: { type: queryParams.value.type, action: 'add' }
    });
}

/** 修改按钮操作 */
const handleUpdate = async (row?: EnteralNutritionTemplateVO) => {
    // reset();
    // const _id = row?.id || ids.value[0]
    // const res = await getEnteralNutritionTemplate(_id);
    // Object.assign(form.value, res.data);
    // dialog.visible = true;
    // dialog.title = "修改肠内处方模板";
    router.push({
        path: '/argManage/enteralNutritionTemplateAdd',
        query: {
            id: row?.id || ids.value[0],
            type: queryParams.value.type,
            action: 'update'
        }
    });
}

/** 提交按钮 */
const submitForm = () => {
    enteralNutritionTemplateFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            if (form.value.id) {
                await updateEnteralNutritionTemplate(form.value).finally(() => buttonLoading.value = false);
            } else {
                await addEnteralNutritionTemplate(form.value).finally(() => buttonLoading.value = false);
            }
            proxy?.$modal.msgSuccess("操作成功");
            dialog.visible = false;
            await getList();
        }
    });
}

/** 删除按钮操作 */
const handleDelete = async (row?: EnteralNutritionTemplateVO) => {
    const _ids = row?.id || ids.value;
    await proxy?.$modal.confirm('是否确认删除肠内处方模板编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
    await delEnteralNutritionTemplate(_ids);
    proxy?.$modal.msgSuccess("删除成功");
    await getList();
}

/** 导出按钮操作 */
const handleExport = () => {
    proxy?.download('system/enteralNutritionTemplate/export', {
        ...queryParams.value
    }, `enteralNutritionTemplate_${new Date().getTime()}.xlsx`)
}

// 初始化状态锁，防止重复初始化
const isInitializing = ref(false)

/** 页面初始化函数 */
const initializePage = async () => {
    // 防止重复初始化
    if (isInitializing.value) {
        console.log('页面正在初始化中，跳过重复初始化')
        return
    }

    try {
        isInitializing.value = true
        console.log('肠内处方模板列表页面初始化')

        // 重置选择状态
        ids.value = []
        single.value = true
        multiple.value = true

        // 重置分页到第一页（保持搜索条件和处方类型）
        queryParams.value.pageNum = 1

        // 显示加载状态
        loading.value = true

        // 重新获取数据
        await getList()

        console.log('页面初始化完成')
    } catch (error) {
        console.error('页面初始化失败:', error)
        // 确保加载状态被重置
        loading.value = false
    } finally {
        // 延迟重置锁，避免快速连续的路由变化
        setTimeout(() => {
            isInitializing.value = false
        }, 300)
    }
}

// 监听路由变化 - 检测从其他页面跳转回来
watch(() => route.fullPath, async (newFullPath, oldFullPath) => {
    // 当前页面的路径模式（假设列表页路径不包含Add/Edit）
    const isCurrentListPage = newFullPath.includes('enteralNutritionTemplate') &&
        !newFullPath.includes('Add') &&
        !newFullPath.includes('Edit')

    // 上一个页面是否为非列表页（包含Add/Edit或完全不同的页面）
    const wasNotListPage = !oldFullPath ||
        !oldFullPath.includes('enteralNutritionTemplate') ||
        oldFullPath.includes('Add') ||
        oldFullPath.includes('Edit')

    // 如果从非列表页跳转到列表页，则重新初始化
    if (newFullPath !== oldFullPath && isCurrentListPage && wasNotListPage) {
        console.log('检测到从其他页面跳转回列表页，重新初始化')
        console.log('旧路径:', oldFullPath)
        console.log('新路径:', newFullPath)
        await initializePage()
    }
}, { flush: 'post' })

onMounted(() => {
    getList();
});
</script>

<style scoped>
.prescription-type-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
}

.prescription-type-selector .el-radio-button {
    margin: 0 4px;
}

.prescription-type-selector .el-radio-button__inner {
    padding: 8px 20px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.prescription-type-selector .el-radio-button__inner:hover {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
}

.prescription-type-selector .el-radio-button.is-active .el-radio-button__inner {
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
    color: #fff;
    box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.mb-4 {
    margin-bottom: 16px;
}
</style>
