<template>
    <vxe-modal v-model="dialogVisible" :title="title" show-zoom resize show-footer destroy-on-close transfer @hide="close" :width="width">
        <template #default>
            <div class="d-flex flex-cln" style="height: 60vh;">
                <div class="flex1 ov-hd" style="height:50vh">
                    <vxe-table :loading="loading" border :data="list" height="auto">
                        <vxe-column type="seq" width="60" title="序号" align="center" />
                        <vxe-column title="检测项目" align="center" field="name" min-width="100" :formatter="colNoData" />
                        <vxe-column title="单价（元、批次）" align="center" field="price" min-width="100" :formatter="colNoData" />
                        <vxe-column title="备注" align="center" field="description" min-width="100" :formatter="colNoData" />
                    </vxe-table>
                </div>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
            </div>
        </template>
        <template #footer>
            <el-button type="primary" @click="close">知道了</el-button>
        </template>
    </vxe-modal>
</template>
<script setup name="rowItems" lang="ts">
import { getTestPackageItems } from '@/api/cdt/menus';
import { colNoData } from '@/utils/noData';
import { propTypes } from '@/utils/propTypes';
const emit = defineEmits(['update:show', 'close']);
const props = defineProps({
    packageId: propTypes.string.def(''),
    title: propTypes.string.def('检测项目明细'),
    width: propTypes.number.def(800),
    show: propTypes.bool.def(false)
})
const dialogVisible = ref(false);
const { query }: any = useRoute()
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const list = ref<any[]>([]);
const loading = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const data = reactive<any>({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    }
});
const { queryParams } = toRefs(data);

/** 查询会员信息列表 */
const getList = async () => {
    loading.value = true;
    const res = await getTestPackageItems({ ...queryParams.value, packageId: props?.packageId });
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = (level?: any) => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startDate = '';
    queryParams.value.endDate = '';
    handleQuery();
};

const close = () => {
    // formRef.value?.resetFields();
    emit('update:show', false);
    emit('close', false);
};


watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
    },
    { immediate: true }
);
onMounted(() => {
    getList();
});
</script>
