<template>
  <div>
    <el-table ref="medicineRef" height="400" :data="deviceList" @cell-click="clickRow" border>
      <el-table-column label="项目名称" align="center" prop="name" width="200" />
      <el-table-column label="分类" align="center" prop="categoryCode_dictText" width="150" />
      <el-table-column label="种类" align="center" prop="typeCode_dictText" />
      <el-table-column label="规格" align="center" prop="size" />
      <el-table-column label="价格" align="right" prop="retailPrice">
        <template #default="scope">
          {{ scope.row.retailPrice.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="生产厂家" align="center" prop="supplyId_dictText" />
    </el-table>
  </div>
</template>
        
<script setup>
import { getFullDeviceList } from './api';
import { watch } from 'vue';
import { throttle } from 'lodash-es';

const props = defineProps({
  searchKey: {
    type: String,
    default: '',
  },
});
const emit = defineEmits(['selectRow']);
// 修改查询参数，添加searchKey字段以匹配搜索框输入
const queryParams = reactive({
  searchKey: '',
  pageNo: 1, // 新API使用pageNo而不是pageNum
  pageSize: 50
  // 移除categoryCode参数，避免任何可能的限制
});
const deviceList = ref([]);

// 节流函数
const throttledGetList = throttle(
  () => {
    getList();
  },
  300,
  { leading: true, trailing: true }
);

// 初始化时设置搜索关键字
queryParams.searchKey = props.searchKey;

watch(
  () => props.searchKey,
  (newValue) => {
    queryParams.searchKey = newValue;
    throttledGetList();
  },
  { immediate: true }
);

getList();
function getList() {
  // 使用新的不受限制的API，不设置任何会限制查询范围的参数
  getFullDeviceList(queryParams).then((res) => {
    deviceList.value = res.data.records;
  });
}

function clickRow(row) {
  emit('selectRow', row);
}
</script>
      
<style scoped>
</style>