<template>
  <div>
    <el-table ref="medicineRef" height="400" :data="medicineList" @cell-click="clickRow">
      <el-table-column label="项目编码" align="center" prop="busNo" width="150" />
      <el-table-column label="项目名称" align="center" prop="name" width="180" />
      <el-table-column label="进货价" align="center" prop="price" />
      <el-table-column label="零售价" align="center" prop="retailPrice" />
      <el-table-column label="包装单位" align="center" prop="unitCode_dictText" />
      <el-table-column label="最小单位" align="center" prop="minUnitCode_dictText" />
      <el-table-column label="规格" align="center" prop="totalVolume" />
      <el-table-column label="规格库存" align="center" prop="specificationInventory" />
      <el-table-column label="生产厂家" align="center" prop="manufacturerText" />
      <el-table-column label="批准文号" align="center" prop="approvalNumber" />
    </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: '',
  },
});
// 选择药品
const emit = defineEmits(['selectRow']);
//
const queryParams = ref({
  pageNum: 1,
  pageSize: 50,
  searchKey: props.searchKey,
  // 13 药品
  typeEnum: 13,
});
// 药品列表
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();
  },
  { immdiate: true, deep: true }
);

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