<template>
  <!-- 运营主体选择 -->
  <el-select
    v-model="inputValue"
    :placeholder="placeholder"
    clearable
    style="width: 100%"
    @change="inputValueChange"
    filterable
    remote
    :filter-method="filterFunction"
    @visible-change="inputVisibleChange"
    :loading="listLoading"
    v-selectLoadMore="initMoreList"
    :disabled="disabled"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>
  
  <script>
  import request from "@/utils/request";
  import { getCompanyInfoList } from "@/api/baseData/company";
  export default {
    name: "el-company-select",
    computed: {},
    props: {
      value: {
        request: true,
        type: String,
        default: '',
      },
      isInput: { type: Boolean, default: false },
      placeholder: { type: String, default: '请选择' },
      disabled: { type: Boolean, default: false }
    },
   
    data() {
      return {
        inputValue: '',
        options: [],
        currentPage: 1,
        total: 0,
        listLoading: false,
        searchVal: '', // 输入查询内容
        searchVisibla: false, // 是否需要打开下拉时重新请求
        searchBlur: false, // 是否输入
        valid: true, // 防抖使用
        timer: null, // 节流
      }
    },
    created() {
      this.loadList(true);
    },
    watch:{
      value(val) {
        this.initInputValue()
      },
    },
    methods: {
      async initInputValue() {
        this.searchVisibla = true;
        if(!this.searchBlur) {
          this.listLoading = true;
          await this.loadList(true, this.value);
        };
        this.inputValue = this.value;
        this.searchBlur = false;
      },
      loadList(type, id) {
        // type: true-替换 false-添加
        if(!type && this.total < this.options.length) return;
        let obj = {
          currentPage: this.currentPage,
          pageSize: 20,
          sort: "desc",
          sidx: "",
          companyId: id,
          companyName: this.searchVal,
        }
        getCompanyInfoList(obj).then((res) => {
          let list = res.data.list.map(v => {
            return { label: v.companyName, id: v.id}
          })
          let allList = type ? list : [...this.options, ...list];
          this.options = _.uniqBy(allList, 'id');
          this.total = res.data.pagination.total;
          this.listLoading = false;
        });
      },
      inputValueChange(val) {
        this.inputValue = val;
        this.$emit('input', val, 'change');
        this.$emit('change', val, 'change');
      },
      inputValueBlur(val) {
        this.searchBlur = true;
        this.inputValue = val;
        this.$emit('input', val, 'blur');
        this.$emit('change', val, 'blur');
      },
      filterFunction(val) {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          !this.isInput && this.inputValueBlur(val)
          this.currentPage = 1;
          this.searchVal = val;
          this.loadList(true);
        }, 300);
      },
      async inputVisibleChange(val) {
        if(!val) return;
        console.log(this.searchVal);
        if(this.searchVal) {
          this.searchVal = '';
          this.currentPage = 1;
          await this.loadList(true);
        }
        if(this.searchVisibla) {
          await this.loadList(false);
          this.searchVisibla = false;
        }
      },
      initMoreList() {
        if (this.valid) {
          this.valid = false; // 关闭阀门
          // 如果阀门已经打开，就继续往下
          setTimeout(() => {
            ++this.currentPage;
            this.loadList(false);
            this.valid = true; // 执行完成后打开阀门
          }, 300);
        }
      }
    },
  }
  </script>