<template>
  <el-select
    v-model="selected"
    v-bind="$attrs"
    :loading="loading"
    class="autoWidth"
    filterable
    clearable
    remote
    :remote-method="searchMaterialNo"
    @change="change"
  >
    <el-option
      v-for="item in options"
      :key="item.wmsPurchaseOrderDetailId"
      :label="item.materialNo"
      :value="item.wmsPurchaseOrderDetailId"
    >
      <!-- {{ item.materialNo }} -->
      <el-row :gutter="20">
        <el-col :span="6" class="long-text" :title="item.materialNo">{{
          item.materialNo
        }}</el-col>
        <el-col :span="8" class="long-text" :title="item.materialName">{{
          item.materialName
        }}</el-col>
        <el-col
          :span="5"
          class="text-right long-text"
          :title="item.shouldReceiveQty"
          >{{ item.shouldReceiveQty }}</el-col
        >
        <el-col :span="5" class="long-text" :title="item.storageEnvironment">{{
          item.storageEnvironment
        }}</el-col>
      </el-row>
    </el-option>
  </el-select>
</template>

<script>
import { getMaterialDropDownList } from "@/api/wms/base/material";
export default {
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    // inStockId: {
    //   type: [String],
    //   default: () => ''
    // }
  },
  data() {
    return {
      loading: false,
      options: [],
      inStockId: "",
      outSourceId: "",
    };
  },
  computed: {
    selected: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit("input", v);
      },
    },
  },
  watch: {
    inStockId(val) {
      if (val) {
        const params = {
          pageNo: 1,
          pageSize: 100,
          inStockId: val,
        };
        getMaterialDropDownList(params)
          .then(({ data }) => {
            this.options = data || [];
          })
          .finally(() => {
            // this.loading = false;
          });
      }
    },
    outSourceId(val) {
      if (val) {
        const params = {
          pageNo: 1,
          pageSize: 100,
          outSourceId: val,
        };
        getMaterialDropDownList(params)
          .then(({ data }) => {
            this.options = data || [];
          })
          .finally(() => {
            // this.loading = false;
          });
      }
    },
  },
  created() {},
  methods: {
    searchMaterialNo(v) {
      const val = v.trim();
      if (val && val.length > 3) {
        this.loading = true;
        // 根据outSourceId或inStockId决定使用哪个参数
        const params = {
          pageNo: 1,
          pageSize: 100,
          materialNo: val,
        };
        // 如果outSourceId存在，使用outSourceId参数
        if (this.outSourceId) {
          params.outSourceId = this.outSourceId;
        } else {
          // 否则使用inStockId参数
          params.inStockId = this.inStockId;
        }
        getMaterialDropDownList(params)
          .then(({ data }) => {
            this.options = data || [];
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    change(value) {
      const item = this.options.find(
        (item) => item.wmsPurchaseOrderDetailId === value
      );
      this.$emit("change", item);
    },
  },
};
</script>

<style scoped>
/* 在您的全局或组件CSS文件中 */
.long-text {
  overflow: hidden; /* 隐藏超出部分的内容 */
  text-overflow: ellipsis; /* 当内容溢出时显示省略号 */
  white-space: nowrap; /* 禁止文本换行 */
}
</style>
