<template>
  <el-select v-model="departId" placeholder="请选择计费部门" class="select_more" ref="select" @change="handleChange" filterable remote :remote-method="remoteMethod" suffix-icon="el-icon-search" @visible-change="onVisibleChange">
    <div class="infinite-list" ref="infinite-list" v-infinite-scroll="load" style="overflow:auto;max-height:260px">
      <el-option v-for="item in data.list" :key="item.accountDepartId" :value="item.accountDepartId" :label="item.accountDepartName">{{ item.accountDepartName }}</el-option>
      <p style="text-align: center" :hidden="!loading"><i class="el-icon-loading"></i></p>
    </div>
  </el-select>
</template>

<script>
export default {
  name: 'select-depart',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    loading: Boolean
  },
  mounted() {
    this.departId = this.data.departId;
    this.$refs['select'].$el.querySelector('.el-select-dropdown__wrap').style.overflow = 'inherit';
  },
  data() {
    return {
      departId: '',
      search: '',
      cacheSearch: ''
    };
  },
  methods: {
    load() {
      this.$emit('load');
    },
    handleChange() {
      this.cacheSearch = this.search;
      this.$emit('getDepartId', this.departId);
    },
    remoteMethod(val) {
      this.search = val;
      this.$refs['infinite-list'].scrollTop = 0;
      this.$emit('remote-search', val);
    },
    onVisibleChange(val) {
      if (!val) this.remoteMethod(this.cacheSearch);
    }
  }
};
</script>

<style lang="scss" scoped>
.select_more {
  display: inline-block;
  width: 160px;
  position: relative;
  &::before {
    content: '\e778';
    position: absolute;
    font-family: element-icons !important;
    color: #909399;
    right: 11px;
    top: 10px;
    z-index: 2;
  }
}
</style>
