<template>
  <el-select
    :value="value"
    :disabled="disabled"
    filterable
    remote
    clearable
    reserve-keyword
    placeholder="请输入关平台名称"
    :remote-method="search"
    v-loadMore="nextList"
    :loading="loading"
    @change="onChange"
    @clear="clearHandle"
    @focus="search"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
import { getInfoList } from "@/api/baseData/info";
export default {
  name: "SelsctLoad",
  props: ['value', 'disabled'],
  computed: {
    noMore() {
      return this.total == this.options.length;
    },
  },
  data() {
    return {
      loading: false,
      searchList: {
        pageIndex: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      total: 0,
      options: [],
    };
  },
  mounted() {},
  methods: {
    selectFocus() {
      this.loadList();
    },
    nextList() {
      if (this.loading || this.noMore) return;
      this.searchList.pageIndex++;
      getInfoList({ ...this.searchList, keyword: query }).then(({ data }) => {
        let list = [];
        data.list.length &&
          data.list.forEach((item) => {
            list.push({
              label: item.SysytemInfo.SystemName,
              value: item.SysytemInfo.Id,
            });
          });
        this.options = [...this.options, ...list];
      });
    },
    search(query) {
      this.options = [];
      this.searchList = {
        pageIndex: 1,
        pageSize: 10,
        sort: "desc",
        sidx: "",
      };
      this.loadList(query);
    },
    loadList(query) {
      this.loading = true;
      getInfoList({ ...this.searchList, keyword: query }).then(({ data }) => {
        let list = [];
        data.list.length &&
          data.list.forEach((item) => {
            list.push({
              label: item.SysytemInfo.SystemName,
              value: item.SysytemInfo.Id,
            });
          });
        this.options = [...this.options, ...list];
        this.total = data.totalCount;
        this.loading = false;
      });
    },
    // 清除选中
    clearHandle() {
      this.value = "";
      this.$emit("input", "");
      this.$emit("change", "");
    },

    onChange(v) {
      this.value = v;
      this.$emit("input", this.options.map((item) => item.value == v).label);
      this.$emit("change", v);
    },
  },
  watch: {
    value(val) {
      this.search();
    },
  },
};
</script>

<style lang="scss" scoped>
.NCC-selectTree {
  width: 100%;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}
.el-select-dropdown__item.selected {
  font-weight: normal;
}
ul li::-webkit-scrollbar-track {
  border-radius: 0;
  background-color: #fff;
}
ul li >>> .el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
}
.el-tree-node__label {
  font-weight: normal;
}
.el-tree.single >>> .is-current .el-tree-node__label {
  color: #409eff;
  font-weight: 700;
}
.el-tree.single >>> .is-current .el-tree-node__content .custom-tree-node {
  color: #409eff;
  font-weight: 700;
}
.el-tree.single >>> .is-current .el-tree-node__children .custom-tree-node {
  color: #606266;
  font-weight: normal;
}
.el-tree.single >>> .is-current .el-tree-node__children .el-tree-node__label {
  color: #606266;
  font-weight: normal;
}
.empty-text {
  margin: 0;
  text-align: center;
  color: #999;
  font-size: 14px;
  background: #fff;
  cursor: auto;
  padding: 0;
  line-height: 24px;
}
</style>
