<template>
  <div>
    <el-table ref="medicineRef" height="400" :data="medicineList" @cell-click="clickRow">
      <el-table-column label="项目编码" align="center" prop="adviceDefinitionId" />
      <el-table-column label="项目名称" align="center" prop="adviceName" />
      <el-table-column label="当前价格" align="center" prop="retailPrice" />  
      <el-table-column label="规格" align="center" prop="volume" />
    </el-table>
  </div>
</template>
        
<script setup>
import { getMedicineList } from './api';
import { watch } from 'vue';
import { throttle } from 'lodash-es';

const props = defineProps({
  searchKey: {
    type: String,
    default: '',
  },
  supplierId: {
    type: String,
    default: '',
  },
});
// 选择药品
const emit = defineEmits(['selectRow']);
// 查询参数
const queryParams = ref({
  searchKey: props.searchKey,
  // supplierId: props.supplierId,
});
// 药品列表
const medicineList = ref([]);

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

// 获取药品列表
const getList = (query) => {
  getMedicineList(query || queryParams.value).then((res) => {
    medicineList.value = res.data.records;
  });
};

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

// 监听搜索关键字
watch(
  () => props,
  (newValue) => {
    queryParams.value.searchKey = newValue.searchKey;
    throttledGetList();
  },
  { immediate: true, deep: true }
);

// 获取药品列表
getList();
</script>
      
<style scoped>
</style>