<template>
    <div>
        <el-select
            v-model="selectValue"
            :loading="loading"
            popper-class="performance_other_select"
            class="select-multiple"
            placeholder="可多选"
            ref="select"
            collapse-tags
            multiple
            filterable
            :filter-method="filterMethod"
			 placement="bottom-start"
            v-el-select-loadmore="loadMore(rangeNumber)"
            @change="selectChange"
			@visible-change="visibleChange" >
				<el-input class="performance_source_name_ipt" clearable v-model="inputValue" @input="changeIpt"></el-input>
				<el-option v-for="(value,index) in sourceNamelist" :key="index" :value="value">
					<span v-html="value"></span>
				</el-option>
			</el-select>
    </div>
</template>

<script>
import api from '@/api/radar/radar.js';
var debounce = function(fn, delay = 300) {
	var timer = null;
	return function() {
		var _this = this;
		var args = arguments;
		if (timer) clearTimeout(timer);
		timer = setTimeout(function() {
			fn.apply(_this, args);
		}, delay);
	};
}
export default {
    data(){
        return{
            loading:false,
			rangeNumber: 1,
            selectValue:[],
            inputValue:"",
            oldInputValue:"",
            sourceNamelist:[],
        }
    },
    directives: {
        'el-select-loadmore': (el, binding) => {
            // 获取element-ui定义好的scroll盒子
            const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
            if (SELECTWRAP_DOM) {
                SELECTWRAP_DOM.addEventListener("scroll", function() {
                    /**
                     * scrollHeight 获取元素内容高度(只读)
                     * scrollTop 获取或者设置元素的偏移值,
                     *  常用于:计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                     * clientHeight 读取元素的可见高度(只读)
                     * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                     * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                     */
                    const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
                    if (condition) binding.value();
                });
            }
        },
		},
    methods:{
        selectChange(arr){
            this.$emit("getSelectValue",arr)
        },
        loadMore(n) {
			// n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
			// elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
			return () => {
                this.rangeNumber += 1;
                this.filterMethod(this.inputValue)
            }; // 每次滚动到底部可以新增条数  可自定义
		},
        changeIpt(){
            this.sourceNamelist = []
            this.rangeNumber = 1
            this.filterMethod()
        },
		// 筛选方法
		filterMethod: debounce(function(filterVal) {
            this.loading = true
            let params = {
                page:{
                    page:this.rangeNumber,
                    limit:10
                },
            }
            if(this.inputValue){
                params.keyword = this.inputValue;
            }
			api.bidSourceList(params).then(res => {
				// console.log(res);
				if(res.code==200){
				    this.sourceNamelist = this.sourceNamelist.concat(res.data.list);
				    if(this.sourceNamelist.length>0&&this.sourceNamelist[0]!='不限'){
				        this.sourceNamelist.unshift("不限")
				    }
				}
				this.loading = false
			}).catch(error => {
				this.loading = false
			});
		}, 500),
		// 下拉框出现时，调用过滤方法
		visibleChange(flag) {
			this.inputValue = ""
			if (flag) {
                this.sourceNamelist = []
                this.rangeNumber = 1
				this.filterMethod()
			}
		},
    }
}
</script>

<style>

</style>
