<!--
 * @Author: xiachao 958053195@qq.com
 * @Date: 2023-09-21 16:33:04
 * @LastEditors: xiachao 958053195@qq.com
 * @LastEditTime: 2024-06-26 20:44:32
 * @FilePath: \ruoyi-ui\src\components\LoadMoreSelect\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- @author zhengjie -->
<template>
  <el-select
    v-model="cloneQueryParams"
    remote
    :remote-method="skuNoFilter"
    v-selectLazyLoad="loadMoreData"
    filterable
    clearable
    popper-class="customDrop"
    placeholder="请输入商品名称或编码"
  >
    <el-option
      v-for="(item, index) in skuOptions"
      :key="index"
      :label="item.skuName + '/' + item.skuNo"
      :value="item.skuNo"
    >
    </el-option>
  </el-select>
</template>

<script>
import { skuList } from "@/api/procure/index";
export default {
  name: "LoadMoreSelect",
  props: {
    skuNo: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      skuOptions: [],
      timer: null,
      skuPageNum: 1,
      loadDataStatus: true,
      querySku: "",
      cloneQueryParams: "",
    };
  },
  watch: {
    querySku(n, _) {
      this.skuOptions = [];
      this.skuPageNum = 1;
      this.loadDataStatus = true;
    },
    cloneQueryParams(n, _) {
      this.$emit("queryParams", n);
      if (this.skuOptions.length != 0) {
        this.$emit("skuOptions", this.skuOptions);
      }
    },
    skuNo(n, _) {
      this.cloneQueryParams = n;
      if (n) {
        this.skuNoFilter(this.skuNo, false);
      } else {
        this.skuOptions = [];
      }
    },
  },
  created() {
    this.cloneQueryParams = this.skuNo;
    if (this.skuNo) {
      this.skuNoFilter(this.skuNo, true);
    }
  },
  methods: {
    loadMoreData() {
      if (this.loadDataStatus) {
        this.skuNoFilter(this.querySku, true);
      }
    },
    inputFocus() {
      this.skuOptions = [];
      this.skuPageNum = 1;
      this.loadDataStatus = true;
    },
    skuNoFilter(val, type) {
      // if (val == this.querySku && !type) {
      //   return false;
      // }
      this.querySku = val;
      //节流
      if (!this.timer) {
        this.timer = setTimeout(() => {
          skuList({
            content: this.querySku,
            pageSize: 20,
            pageNum: this.skuPageNum,
          }).then((res) => {
            this.skuOptions = this.skuOptions.concat(res.rows);
            if (this.skuPageNum * 20 < res.total) {
              this.skuPageNum++;
            } else {
              this.loadDataStatus = false;
            }
          });
          this.timer = null;
        }, 600);
      }
    },
  },
};
</script>

<style>
/* .customDrop {
  width: 220px;
}

.customDrop .el-select-dropdown__item {
  display: inline-block;
  width: 100%;
  overflow: initial;
} */
</style>
