<template>
  <div>
    <el-table ref="medicineRef" height="400" :data="medicineList" @cell-click="clickRow">
      <el-table-column label="项目编码" align="center" prop="busNo" />
      <el-table-column label="项目名称" align="center" prop="name" />
      <el-table-column
        v-if="categoryEnum !== 26"
        label="当前进货价"
        align="center"
        prop="originBuyingPrice"
      />
      <el-table-column label="当前零售价" align="center" prop="originRetailPrice" />
      <el-table-column v-if="categoryEnum !== 26" label="规格" align="center" prop="volume" />
    </el-table>
  </div>
</template>
        
<script setup>
import { getMedicineListByMed, getMedicineListByDevice, getMedicineListByActivity } from './api';
import { watch } from 'vue';
import { throttle } from 'lodash-es';

const props = defineProps({
  searchKey: {
    type: String,
    default: '',
  },
  supplierId: {
    type: String,
    default: '',
  },
  categoryEnum: {
    type: Number,
    default: 24, // 默认值为0，表示药品类别
  },
});
// 选择药品
const emit = defineEmits(['selectRow']);
// 查询参数
const queryParams = ref({
  searchKey: props.searchKey,
  categoryEnum: props.categoryEnum, // 使用props传入的categoryCode
});
// 药品列表
const medicineList = ref([]);

// 是否正在请求中，防止重复请求
const isRequesting = ref(false);

const loadding = ref(false);
// 获取药品列表
const getList = async (query) => {
  // 防止重复请求
  if (isRequesting.value) {
    return;
  }

  const params = query || queryParams.value;
  console.log('queryParams', queryParams.value);
  loadding.value = true;
  isRequesting.value = true;

  let apiPromise;
  // 根据categoryEnum值选择不同的API函数
  if (params.categoryEnum === 24) {
    // 药品
    apiPromise = getMedicineListByMed(params);
  } else if (params.categoryEnum === 25) {
    // 耗材
    apiPromise = getMedicineListByDevice(params);
  } else if (params.categoryEnum === 26) {
    // 诊疗
    apiPromise = getMedicineListByActivity(params);
  }

  try {
    const res = await apiPromise;
    // 检查响应数据结构，API返回的data是直接数组而不是带records属性的对象
    medicineList.value = Array.isArray(res.data) ? res.data : res.data.data || [];
  } catch (error) {
    medicineList.value = [];
  } finally {
    loadding.value = false;
    isRequesting.value = false;
  }
};

// 节流函数 - 使用防抖更合适，避免频繁请求
const throttledGetList = throttle(
  () => {
    getList();
  },
  500,
  { leading: true, trailing: false }
);

// 点击行
const clickRow = (row) => {
  emit('selectRow', row);
};

// 监听搜索关键字和类别编码
watch(
  () => [props.searchKey, props.categoryEnum],
  ([newSearchKey, newCategoryEnum]) => {
    queryParams.value.searchKey = newSearchKey;
    queryParams.value.categoryEnum = newCategoryEnum; // 直接使用数字类型
    throttledGetList();
  },
  { immediate: true, deep: true }
);
</script>
      
<style scoped>
</style>