<template>
    <div class="p-2">
        <el-card shadow="never">
            <el-table v-loading="loading" border :data="diagnosisList" @selection-change="handleSelectionChange">
                <el-table-column label="营养诊断时间" align="center" prop="createTime" width="180" />
                <el-table-column label="营养诊断依据" align="center" prop="diagnosisBasis" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.diagnosisBasis ||'--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="营养诊断" align="center" prop="diagnosisLabelStr" />
                <el-table-column label="诊断医生" align="center" prop="createByUser" width="180" />
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>
    </div>
</template>

<script setup name="LevelDiagnosis" lang="ts">
    import { ref, watch, onMounted, onBeforeUnmount, getCurrentInstance, toRefs, reactive } from 'vue';
    import { listDiagnosis, } from '@/api/patients/diagnosis';
    import { DiagnosisVO, DiagnosisQuery, DiagnosisForm } from '@/api/patients/diagnosis/types';
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;

    const diagnosisList = ref < DiagnosisVO[] > ([]);
    const loading = ref(true);
    const ids = ref < Array < string | number >> ([]);
    const single = ref(true);
    const multiple = ref(true);
    const total = ref(0);
    const isUnmounted = ref(false);
    onBeforeUnmount(() => {
        isUnmounted.value = true;
    });

    // 声明接收的 props
    const props = defineProps({
        patientInfo: {
            type: Object,
            required: true,
            default: () => ({
                id: '',
                name: '',
                age: '',
                gender: ''
            })
        }
    });

    const initFormData: DiagnosisForm = {
        id: undefined,
        treatmentUserId: props.patientInfo ?.id,
        consultantTemplateId: undefined,
        diagnosisLableId: undefined,
        diagnosisBasisId: undefined,
        medicalOrder: undefined,
        consultantResult: undefined,
        consultantResultStr: undefined,
    }

    const data = reactive < PageData < DiagnosisForm,
        DiagnosisQuery >> ({
            form: { ...initFormData },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                treatmentUserId: props.patientInfo ?.id,
                params: {}
            },
            rules: {

            }
        });

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

    /** 查询营养诊断列表 */
    const getList = async () => {
        loading.value = true;
        const res = await listDiagnosis(queryParams.value);
        if (isUnmounted.value) return;
        diagnosisList.value = res.rows;

        total.value = res.total;
        loading.value = false;
    }
    watch(
        () => props.patientInfo.id,
        (newId) => {
            // form.value.treatmentUserId = newId;
            queryParams.value.treatmentUserId = newId;
            getList();
        }, { immediate: true }
    );

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