<!-- el-select远程搜索公共组件 -->
<template>
  <el-select
    :loading="loading"
    :disabled="disabled"
    style="width: 100%"
    ref="selectRef"
    v-loadmore="loadmore"
    filterable
    remote
    @focus="getList"
    :remote-method="remoteMethod"
    v-model="selectId"
    clearable
    placeholder="请输入关键词搜索"
    @change="onChange"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.selectLabel"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>

<script>
import { getData } from "@/api/public";
export default {
  props: {
    // 远程搜索的url
    url: {
      type: String,
      default: "",
    },
    // 搜索的字段
    field: {
      type: String,
      default: "",
    },
    value: {
      type: Number | String,
      default: "",
    },
    selectObj: {
      type: Object,
      default: () => {},
    },
    searchParams: {
      type: Object,
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      options: [],
      stopLoading: false, // 加载开关，加载所有后端数据后控制懒加载是否继续执行，通过后端返回数据来控制
      pageNum: 1,
      total: 0,
      selectId: null,
      loading: false,
    };
  },
  watch: {
    selectObj(newVal) {
      console.log(newVal);
      if (newVal) {
        this.selectId = newVal.id;
        this.options = [newVal];
      }
    },
  },
  // created() {
  //   this.getList();
  // },
  methods: {
    onChange() {
      this.$emit("input", this.selectId);
    },
    // 懒加载调用的方法
    loadmore() {
      if (this.options.length < this.total) {
        this.pageNum++;
        this.remoteMethod(this.$refs.selectRef.query, true);
      }

      // if (!this.stopLoading) {
      //   this.pageNum++; // 搜索下一页
      //   this.remoteMethod(this.$refs.selectRef.query, true); //调用后端接口获取下拉框数据，此时第二个参数必须传 true，懒加载方式调用后端接口函数
      // }
    },
    // 输入框没有值时默认请求第一页8条数据
    getList() {
      this.loading = true;
      let params = {
        ...this.searchParams,
        pageNum: 1,
        pageSize: 8,
      };
      getData(this.url, params)
        .then((res) => {
          this.options = res.rows.map((item) => {
            return {
              ...item,
              selectLabel: item[this.field],
            };
          });
          this.total = res.total;
        })
        .finally(() => (this.loading = false));
    },
    remoteMethod(query, lazy = false) {
      this.stopLoading = true;
      if (!lazy) {
        // 如果不是懒加载，
        this.options = []; // 把select选项数组重置为空
        this.pageNum = 1; // 设置查询第一页
      }
      let params = {
        pageNum: this.pageNum,
        pageSize: 8,
      };
      params[this.field] = query;
      getData(this.url, params).then((res) => {
        let arr = res.rows.map((item) => {
          return {
            ...item,
            selectLabel: item[this.field],
          };
        });
        this.options = this.options.concat(arr);
        this.total = res.total;
        this.stopLoading = false;
      });
    },
  },
};
</script>
