<template>
    <div class="selection-container">
        <span class="selection-main" @click="openCloseDropdown()">
            <span class="selection-main-text {{disabled?'selection-disabled':''}}">{{showSelectedData}}</span>
            <span class="selection-main-arrow"><b class="{{isOpen?'up':''}}"></b></span>
        </span>

        <div v-show="isOpen" class="selection-dropdown">
            <div class="selection-dropdown-input form-group">
                <input type="text" class="form-control" v-model="searchText" style="height: 30px">
            </div>
            <ul class="selection-dropdown-option">
                <li value="-1" class="{{-1==selectedData.id?'selected':''}}" @click="selectOption({id:-1,text:''})">{{placeholder}}</li>
                <li v-for="data in seachList" value="{{data.id}}" class="{{data.id==selectedData.id?'selected':''}}" @click="selectOption(data)">
                    {{data.text}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            selectedData:{type: Object, default: {id:-1}},//默认选中选项
            url: {type: String, default: ""},
            options: {type: Array, default: []},
            placeholder: {type: String, default: "请选择"},
            disabled:{type: Boolean, default: false}
        },
        data() {
            return {
                isOpen:false,
                searchText:'',
                dataList:[],
                seachList:[]
            }
        },
        computed:{
            showSelectedData(){
                return this.selectedData.id < 0 ? this.placeholder : this.selectedData.text;
            }
        },
        ready() {
            this.getData();
            this.blindEvent();
        },
        watch:{
            'dataList': function (val,oldval) {
                this.getSearchData();
            },
            'searchText': function (val,oldval) {
                this.getSearchData();
            }
        },
        methods: {
            //选择菜单内容
            selectOption(data){
                this.isOpen = false;
                this.searchText = '';
                this.selectedData = data;
                this.$dispatch('completeSelect', data);
            },
            //开关下拉菜单
            openCloseDropdown(){
                if(!this.disabled){
                    if(!this.isOpen){
                        this.isOpen = true;
                    }else{
                        this.isOpen = false;
                    }
                }
            },
            //下拉数据筛选
            getSearchData(){
                var list = [];
                for(var i=0;i<this.dataList.length;i++){
                    if(this.dataList[i].text.indexOf(this.searchText) > -1){
                        list.push(this.dataList[i]);
                    }
                }
                this.seachList = list;
            },
            //获取数据
            getData(){
                if(this.url && this.url != ''){
                    this.$http.post(this.url).then(function (res) {
                        this.dataList = res.data.data;
                    })
                }else if(this.options && this.options != ''){
                    this.dataList = this.options;
                }
            },
            //点击空白处弹层关闭
            blindEvent(){
                var self = this;
                $(document).on("click", function () {
                    self.isOpen = false;
                });

                $(".selection-container").on("click", function (event) {
                    event.stopPropagation();//阻止事件向上冒泡
                });
            }
        }
    }
</script>

<style>
    .selection-container {
        box-sizing: border-box;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        float: left;
        margin: 0 5px 0 0;
        width: 320px;
    }
    .selection-main{
        box-sizing: border-box;
        background-color: #fff;
        border: 1px solid #aaa;
        border-radius: 4px;
        cursor: pointer;
        display: block;
        height: 39px;
        line-height: 37px;
    }
    .selection-main-text{
        display: block;
        padding-left: 10px;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .selection-disabled{
        background-color: #DDDDDD;
    }
    .selection-main-arrow{
        height: 36px;
        position: absolute;
        top: 1px;
        right: 1px;
        width: 20px;
    }
    .selection-main-arrow b{
        border-color: #888 transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0;
        height: 0;
        left: 50%;
        margin-left: -4px;
        margin-top: -2px;
        position: absolute;
        top: 50%;
        width: 0;
    }
    .selection-main-arrow b.up{
        border-color: transparent transparent #888 transparent;
        border-width: 0 4px 5px;
    }
    .selection-dropdown{
        position: absolute;
        top:40px;
        width: 100%;
        background-color: #fff;
        border: 1px solid #aaa;
        border-radius: 4px;
        box-sizing: border-box;
        display: block;
        position: absolute;
        z-index: 998;
    }
    .selection-dropdown-input{
        margin-bottom: 0;
        padding: 5px 5px;
    }
    .selection-dropdown-option{
        margin: 0;
        padding: 0;
        list-style: none;
        max-height: 200px;
        max-width: 100%;
        overflow-y: auto;
    }
    .selection-dropdown-option li{
        font-size: 13px;
        padding: 5px 10px;
        cursor: pointer;
    }
    .selection-dropdown-option li.selected{
        background-color: #5897fb;
        color: #FFFFFF;
    }
    .selection-dropdown-option li:hover{
        background-color: #ddd;
    }
    .selection-dropdown-option li.selected:hover{
        background-color: #5897fb;
    }
</style>