<template>
  <div>
    <el-table ref="medicineRef" height="400" :data="medicineList" @cell-click="clickRow">
      <el-table-column
        label="项目名称"
        align="center"
        prop="name"
        width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="项目类型"
        align="center"
        prop="itemType_enumText"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="包装单位"
        align="center"
        prop="unitCode_dictText"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="最小单位"
        align="center"
        prop="minUnitCode_dictText"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="规格" align="center" prop="volume" :show-overflow-tooltip="true" />
      <el-table-column label="产品批号" align="center" prop="lotNumber" />
      <el-table-column
        label="包装单位"
        align="center"
        prop="unitCode_dictText"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column label="用法" align="center" prop="methodCode_dictText" />
      <el-table-column label="单次剂量" align="center" prop="dose" />
      <el-table-column
        label="剂量单位"
        align="center"
        prop="doseUnitCode_dictText"
      /> -->
      <el-table-column label="生产厂家" align="center" prop="manufacturerText" />
      <el-table-column label="编码" align="center" prop="ybNo" />
    </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: '',
  },
  itemType: {
    type: String,
    default: '',
  },
  /** 表头所选出库仓库：传入后药品列表只含该仓有库存的行，避免选到别仓批号导致 inventory-item-info 一直为 0 */
  orgLocationId: {
    type: [String, Number],
    default: undefined,
  },
});
const emit = defineEmits(['selectRow']);
const queryParams = ref({
  // pageNum: 1,
  // pageSize: 50,
  itemType: props.itemType,
  purchaseFlag: 0,
  // sourceLocationId: props.sourceLocationId,
  // purposeLocationId:props.purposeLocationId
});
const medicineList = ref([]);

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

watch(
  () => props,
  (newValue) => {
    queryParams.value.searchKey = newValue.searchKey;
    queryParams.value.itemType = newValue.itemType;
    queryParams.value.purchaseFlag = 0;
    if (newValue.orgLocationId != null && newValue.orgLocationId !== '') {
      queryParams.value.orgLocationId = newValue.orgLocationId;
    } else {
      delete queryParams.value.orgLocationId;
    }
    throttledGetList();
  },
  { immediate: true, deep: true }
);

getList();
function getList() {
  getMedicineList(queryParams.value).then((res) => {
    medicineList.value = res.data;
  });
}

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

<style scoped>
:deep(.hover_row) {
  width: 100vw !important;
}
</style>
