/**
 * @author xiufu.wang
 */
import ElScrollbar from 'mars-pro/packages/scrollbar';
import ElInput from 'mars-pro/packages/input';
import ElButton from 'mars-pro/packages/button';

export default {
    name: 'ProSelectPanel',
    componentName: 'ProSelectPanel',
    inheritAttrs: false,
    components: {
        ElInput,
        ElScrollbar,
        ElButton
    },
    inject: ['proselect', 'select'],
    data() {
        return {
            query: null,
            initVisible: false
        }
    },
    watch: {
        'select.visible': {
            immediate: true,
            handler: function (v) {
                if (v) {
                    this.initVisible = true
                }
            }
        }
    },
    props: {},
    methods: {
        handleInputSearch(v) {
            this.query = v
            this.$emit('search', this.query)
        }
    },
    render() {
        if (this.initVisible === false) {
            return null
        }
        const isShowSearch = this.proselect.isShowSearch
        const isLoading = this.proselect.isLoading
        const emptryText = this.proselect.emptryText
        const _searchDatas = {
            props: {
                size: this.proselect.selectSize,
                lazy: false,
                value: this.query,
                clearable: true,
                suffixIcon: 'el-icon-search',
                layout:false
            },
            attrs: {
                placeholder: '输入查询'
            },
            on: {
                input: this.handleInputSearch
            },
            key: 'search'
        }
        return (
            <div class="pro-select-panel-waper">
                {
                    isShowSearch && (
                        <div class="pro-select-panel--search" key="search">
                            <ElInput {..._searchDatas}></ElInput>
                        </div>
                    )
                }
                <div key="empty" {...{ directives: [{name: 'show', value: emptryText}] }} class="el-select-dropdown__empty">{emptryText}</div>
                <div key="list" {...{ directives: [{name: 'show', value: !emptryText}] }}>{this.$slots.default}</div>
            </div>
        )
    }
}