<script setup lang="ts">
import {ref} from "vue";
import {post} from "@/utils/request.ts";

const state = ref([])
const options = ref([])
const selectRef = ref();
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  post("goods/goods/search", {keyword: queryString}).then((res: any) => {
    options.value = res;
    let list = res;
    for (let i = 0; i < list.length; i++) {
      list[i].value = list[i].name;
    }
    // cb(res)
  })
}
const emit = defineEmits(['selectCallBack'])
const handleSelect = (item: any) => {
  console.log(item,'item')
  let goods = JSON.parse(JSON.stringify(item));
  console.log("goods",goods)
  let inventory = {
    hilistCode: goods.hilistCode,
    unitPrice: goods.unitPrice,
    packagingUnit: goods.packagingUnit,
    minPackagingUnit: goods.minPackagingUnit,
    idCode: (goods.idCode&&goods.idCode != "")?goods.idCode.split(","):[],
    goodId: goods.id,
    name: goods.name,
    traceabilityCodeList:[],
    wholeNumber: 0,
    purchaseUnitPrice: goods.purchaseUnitPrice,
    disassemblyPrice : goods.disassemblyPrice
  }
  if (selectRef.value) {
    (selectRef.value as HTMLElement).blur();
  }
  emit('selectCallBack', inventory);
  state.value = []

}
</script>

<template>
  <div class="search_box">
    <el-select-v2
        v-model="state"
        style="width: 500px;height: 100%"
        filterable
        remote
        ref="selectRef"
        :remote-method="querySearchAsync"
        :options="options"
        placeholder="输入关键字搜索药品"
    >
      <template #prefix>
        <span class="iconfont icon-RectangleCopy"></span>
      </template>
      <template #header>
        <div class="header">
          <div class="text">药品</div>
          <div class="text">规格</div>
          <div class="text">库存</div>
          <div class="text">厂家</div>
          <div class="text">最近供应商</div>
        </div>
      </template>
      <template #default="{ item }">
        <div class="row" @click="handleSelect(item)">
          <div class="text" style="margin-left: 0px">{{ item.name }}</div>
          <div class="text">{{item.minPackagingNumber}}*{{item.minPackagingUnit}}/{{ item.packagingUnit }}</div>
          <div class="text">
            {{ item.inventoryWholeNumber }}{{ item.packagingUnit }}
            <template v-if="item.inventoryFragmentNumber > 0">
              {{ item.inventoryFragmentNumber }}{{ item.minPackagingUnit }}
            </template>
          </div>
          <div class="text">{{ item.producer }}</div>
          <div class="text" style="margin-left: 15px">无</div>
        </div>
      </template>
      <template #footer>
      </template>
    </el-select-v2>
  </div>
</template>

<style scoped lang="scss">
.search_box {
  //background-color: rgb(148.6, 212.3, 117.1);
  background-color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 10px;
}
.header {
  display: flex;

  .text {
    font-size: 16px;
    width: 200px;
    color: #6a6a6a;
  }
}
.row {
  display: flex;
  max-height: 500px;

  .text {
    font-size: 12px;
    width: 150px;
    margin-left: 10px;
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
    white-space: nowrap; /* 防止换行 */
  }
}
:deep(.el-select__wrapper.is-filterable){
  height: 42px;
}
</style>