import Vue from 'vue'

/**
 * 封裝el-selectt懶加載指令
 * */
Vue.directive('customizeFocus',{
  bind(el,binding){
    let SELECT_DOM = el.querySelector(
      ".el-select-dropdown .el-select-dropdown__wrap"
    );
    SELECT_DOM.addEventListener("scroll", function () {
      let condition = this.scrollHeight - this.scrollTop <= this.clientHeight;

      if (condition) {
        binding.value();
      }
    });
  }
});

<template>
    <div>
        <el-select v-model="value1" collapse-tags :multiple="isMultiple" filterable :placeholder="placeholder"
                   v-customizeFocus="lazyloading" @change="submit()">
            <el-option v-for="item in stationOptions" :key="item.id" :label="item.label" :value="item.vBindValue">
                <span style="float: left;padding-right: 30px;">{{ item.label }}</span>
                <span style="float: left;padding-right: 30px;">id:-{{ item.id }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.describe }}</span>
            </el-option>
        </el-select>
    </div>
</template>

<script>
/**
 * cur：每頁(yè)顯示多少條, 默認(rèn)值: 10, 類(lèi)型: number
 * stationDataList: 已選擇的數(shù)據(jù), 默認(rèn)值: [], 類(lèi)型: array
 * isMultiple: 是否多選, 默認(rèn)值: false, 類(lèi)型: boolean
 * returnValue: 返回值內(nèi)容, 默認(rèn)值: 數(shù)據(jù)id, 類(lèi)型: string
 * placeholder: 提示, 默認(rèn)值: 請(qǐng)選擇, 類(lèi)型: string
 * */
export default {
    name: "selectModel",
    data() {
        return {
            value1: null,
            // el-select展示的數(shù)據(jù)
            stationOptions: [],
            // 全部數(shù)據(jù)
            stationAll: [],
            // 測(cè)點(diǎn)懶加載分頁(yè)
            stationLazy: {
                startCur: 0,
                // 當(dāng)前頁(yè)碼數(shù)據(jù)
                pageNum: 1,
            },
            stationData: this.stationDataList
        }
    },
    props: {
        isMultiple: {
            default: false,
            type: Boolean
        },
        stationDataList: {
            default: Array,
            type: Array
        },
        placeholder: {
            default: '請(qǐng)選擇',
            type: String
        },
        returnValue: {
            default: 'id',
            type: String
        },
        cur: {
            default: 10,
            type: Number
        }
    },
    mounted() {
        this.getStationAll();
    },
    methods: {
        /**
         * 獲取全部測(cè)點(diǎn)數(shù)據(jù)
         * */
        getStationAll() {
        	let returnValue = this.returnValue;
        
            for (let i = 0; i < 100; i++) {
                let obj = {
                    label: 'test_tag' + i+1,
                    id: i+1,
                    describe: 'test_tag' + i+1 + '描述'
                };
                this.stationAll.push(obj);
            }

			// 設(shè)置el-option的value綁定值
            if (this.stationAll && this.stationAll.length){
                this.stationAll.forEach(item=>{
                    item['vBindValue'] = item[returnValue]
                })
                
				this.stationOptions = this.stationAll.slice(this.stationLazy.startCur, this.cur);
	
	            // 查看
	            this.matchingData();
            }
            
        },

        /**
         * 匹配stationData里的數(shù)據(jù),將其顯示到下拉列表中
         * */
        matchingData(){
            if (this.stationData && this.stationData.length){
                this.value1 = [];
                let returnValue = this.returnValue;
                // 1.先查看當(dāng)前顯示的option里是否存在,如果不存在,從全部數(shù)據(jù)里獲取
                this.stationData.forEach(eachItem=>{
                    let stationIndex = this.stationOptions.map(mapItem=>mapItem[returnValue]).indexOf(eachItem);
                    if (stationIndex !== -1){
                        this.value1.push(this.stationOptions[stationIndex][returnValue]);
                    } else {
                        let stationAllIndex = this.stationAll.map(mapItem=>mapItem[returnValue]).indexOf(eachItem);
                        if (stationAllIndex !== -1){
                            this.stationOptions.push(this.stationAll[stationAllIndex]);
                            this.value1.push(this.stationAll[stationAllIndex][returnValue]);
                        }
                    }
                })
            }
        },

        /**
         * 滾動(dòng)條觸底時(shí)觸發(fā)此方法
         * */
        lazyloading() {
            if (this.stationAll.length > 0){
                // 計(jì)算總數(shù)據(jù)共有多少頁(yè)
                let total = Math.ceil(this.stationAll.length / this.cur);
                // 如果計(jì)算總頁(yè)碼數(shù)小于等于當(dāng)前頁(yè)碼數(shù)證明已到最后一頁(yè)
                if (total <= this.stationLazy.pageNum){
                    return console.log('已加載全部數(shù)據(jù)');
                }

                this.stationLazy.pageNum ++;
                this.stationOptions = this.stationAll.slice(this.stationLazy.startCur, this.cur * this.stationLazy.pageNum);
                this.matchingData();
            }
        },

        /**
         * 提交
         * */
        submit(){
            this.stationData = JSON.parse(JSON.stringify(this.value1));
            this.$emit('callBackData',this.stationData)
        },
    }
}
</script>

<style scoped>

</style>

<template>
  <div>
    <selectModel :stationDataList="stationDataList" v-if="stationDataList.length" :isMultiple="true" @callBackData="callBackData"></selectModel>
  </div>
</template>

<script>
  import selectModel from '../../components/select/index'
  export default {
    name: "index",
    components:{
      selectModel
    },
    data(){
      return {
        stationDataList: [1,2,3,50,100], // 模擬獲取出來(lái)的數(shù)據(jù),數(shù)據(jù)id
      }
    },
    mounted(){
    },
    methods:{
        /**
         * 返回值
         * */
        callBackData(e){
            console.log(e,'eeeeeeeeeee')
        }
    }
  }
</script>

<style scoped>

</style>