<template>
    <div class="Mta-InfiniteScrollInput3" :ref="currentRef">
        <el-input
                :placeholder="placeholder"
                :requestData="requestData"
                :clickInputName="clickInputName"
                v-model="inputValue"
                v-on:input="watchNum"
                @focus="handleOnFocus"
        ></el-input>
        <div class="Infinite-wrap-box">
            <div class="infinite-list" v-if="showUl">
                <ul  v-infinite-scroll="load"
                     infinite-scroll-disabled="busy"
                     :infinite-scroll-immediate="false"
                >
                    <li v-for="(item,index) in dataArr" :key="index" class="infinite-list-item" @click="chooseData(item)">
                        <span>{{item[structure[0]]}}</span>
                        <span class="mta-li-span2" v-if="structure[1] !== undefined">{{item[structure[1]]}}</span>
                    </li>
                </ul>
                <p v-if="noMore">没有更多了</p>
                <p v-if="noData">无符合标准记录</p>
            </div>
        </div>

    </div>
</template>

<script>
    //   describe: 模糊搜索公共方法 author: Wgy date:2019-07-25
    // :requestData 接口需要额外入参 使用   {默认入参为 page name size}
    // :dataSelect   选择数据
    // @loadData2="loadUserLists2"  下拉加载 配合requestData使用 增加额外入参
    import {fuzzySearch} from '@/api/exam'
    export default {
        name: "scrollInput",
        props: {
            placeholder: {
                type: String,
                default: '请选择用户'
            },
            requestData:{
                type: Object,
            },
            clickInputName:{
                type: String,
                default:'user'
            },
            currentRef: {
                require: true,
                type: String,
            },
            structure: {
                type: Array,
                default: () => ['userName', 'realName']
            },
        },
        watch: {
            inputValue(curVal, oldVal) {
                if(curVal===''){
                    this.showUl=false;
                    this.noMore = false;
                    this.busy = true;
                    this.pageNumber = 1;
                    this.chooseData(curVal)
                    return
                }
                if(curVal!==oldVal&&this.chooseFlag){
                    // 实现input连续输入，只发一次请求
                    this.noMore=false;
                    this.pageNumber=1;
                    clearTimeout(this.timeout);
                    //this.handleSearch(curVal);
                    this.timeout = setTimeout(() => {
                        if(curVal!==''){
                            this.handleSearch(curVal);
                        }
                    }, 100);
                }
            }
        },
        data() {
            return {
                inputValue: '',
                showUl: false,
                dataArr: [],
                noMore: false,// 下拉阀值显示
                noData: false,// 是否有值 flag
                chooseFlag: true,//  选择数据flag
                busy: true,//  下拉加载flag  true 为禁止
                pageNumber: 1,
                timeout: null,// 长轮循
                blurFlag: false,// 焦点flag
            }
        },
        computed: {

        },
        methods: {
            watchNum(val){
            },

            handleOnFocus(){
                this.chooseFlag = true;
                const data = {
                    user:'/admin/user/search',
                    kaoshi:'/admin/kaoshi/search',
                    kaoshiAll:'/admin/kaoshi/search/all',
                    supportUser:'/admin/user/search',
                    supportTenant:'/admin/tenant/search',
                    searchCourse:'/admin/kecheng/search',
                    searchCourseAll:'/admin/kecheng/search/all',
                    searchKaoshiCourse:'/admin/kecheng/kaoshi/search',
                };
                window.localStorage.setItem(`getFuzzySearchUrl_key`, JSON.stringify(data[this.clickInputName]));

            },

            handleSearch(inputval){
                let value = {name:this.inputValue,page:1,size:10};
                let req = Object.assign(value,this.requestData);
                if(req.name!==''){
                    fuzzySearch(req).then(res =>{
                        if(this.inputValue === inputval){
                            this.dataArr = [];
                            if(res.data.data.length===0){
                                this.noData = true;
                                this.noMore = false;
                                this.busy = true;
                            }else {
                                this.busy = false;
                                this.noData = false;
                                this.dataArr = res.data.data;
                            }
                            this.showUl = true;
                            this.blurFlag = false;

                        }
                    })
                }

            },
            //失去焦点
            handleOnBlur(e) {
                if (this.blurFlag === false) {
                    this.showUl = false;
                    this.noMore = false;
                    // this.chooseFlag = true;
                    this.noData = false;
                    this.pageNumber = 1;
                    this.inputValue = ''
                }else {
                    this.showUl = false;
                    this.noMore = false;
                    // this.chooseFlag = true;
                    this.noData = false;
                    this.pageNumber = 1;
                }
            },

            chooseData(data) {
                console.log(data);
                if(data===''){
                    this.$emit('dataSelect'+this.clickInputName, data)
                }else {
                    this.inputValue = data[this.structure[0]];
                    this.showUl = false;
                    this.chooseFlag = false;
                    this.blurFlag = true;
                    this.$emit('dataSelect'+this.clickInputName, data)
                }

            },

            load() {
                // if (this.inputValue === '') {
                //     return;
                // }
                this.$emit('loadData2')
                this.pageNumber = this.pageNumber+1;
                let value = {name:this.inputValue,page:this.pageNumber,size:10};
                let req = Object.assign(value,this.requestData);
                fuzzySearch(req).then(res =>{
                    if (req.page > Math.ceil(Number(res.data.total)/ 10)) {
                        this.noMore = true;
                        this.busy = true;
                        this.noData = false;
                        return
                    }
                    res.data.data.forEach(item => {
                        this.dataArr.push(item);
                    });

                })
            }
        },
        beforeMount() {
            document.addEventListener('click', this.handleOnBlur);
        },
        beforeDestroy() {
            document.removeEventListener('click', this.handleOnBlur);
        },
    }
</script>

<style lang="scss" scoped>
    .Mta-InfiniteScrollInput3 {
        /*width: 100%;
        margin: 0 20px 0 0px;*/
        position: relative;
        .show-Ul {
            height: 200px;

        }

        .Infinite-wrap-box {
            position: absolute;
            z-index: 99;
            width: 100%;
        }

        div.infinite-list {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
            border-radius: 4px;
            border: 1px solid #E4E7ED;
            box-sizing: border-box;
            background-color: #FFF;
            margin: 5px 0;
            display: flex;
            flex-direction: column;
            font-size: 14px;

            > ul {
                height: 180px;
                overflow: auto;
                margin: 0;
            }

            li {
                padding: 5px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                .mta-li-span2 {
                    font-size: 10px;
                    color: #ccc;
                }
            }

            li:hover {
                background-color: #ccc;
            }
        }

        p {
            text-align: center;
            font-size: 10px;
            color: #ccc;
            margin: 8px 0;
        }
        @media screen and (max-width: 1440px) {
            div.infinite-list {
                font-size: 13px;
            }
            p {
                margin: 5px 0;
            }
        }
    }
</style>
