<template>
    <div class="input-dialog">
        <el-popover
                style="width: 100%"
                ref="popover"
                placement="bottom"
                v-model="visiable"
                trigger="manual">
            <ul class="list-wrapper">
                <li v-for="(item, index) in getTableData"
                    ref="item"
                    tabindex="1"
                    :class="{'select': index === selectIndex}"
                    @click="doSelect(item)">{{item[prop]}}</li>
            </ul>
        </el-popover>
        <el-input
                ref="input"
                :disabled="disabled"
                :placeholder="placeholder"
                @keyup.native="onKeyup($event)"
                @keydown.native="onKeyDown($event)"
                @clear="onClear"
                @blur="onBlur"
                :clearable="clearable"
                v-model="innerValue"></el-input>
        <i class="el-icon-more more" @click="doDialogShow" :style="{'cursor': disabled ? 'not-allowed' : 'pointer'}"></i>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: 'ElInputDialog',
        props: {
            disabled: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: '请输入'
            },
            value: {
                type: Object,
                default: {}
            },
            data: {
                type: Function,
                default: () => {}
            },
            prop: {
                type: String,
                default: 'name'
            },
            clearable: {
                type: Boolean,
                default: false
            },
            focus: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                clickFlag: false,
                visiable: false,
                innerValue: '',
                tableData: [],
                timer: 0,
                selectIndex: -1
            }
        },
        methods: {
            doDialogShow() {
                if (this.disabled) {
                    return
                }
                this.$emit('visiable')
            },
            doSelect(item) {
                this.$emit('select', item)
                this.$emit('input', item)
                this.clickFlag = true
                this.innerValue = item[this.prop]
                this.visiable = false
            },
            onKeyup(event) {
                if (event.which === 38 || event.which === 40 || event.which === 13) {
                    return
                }
                clearTimeout(this.timer)
                if (!this.innerValue) {
                    this.visiable = false
                    return
                }
                this.timer = setTimeout(() => {
                    this.tableData = this.data()
                    this.visiable = true
                    this.selectIndex = -1
                }, 500)
            },
            onKeyDown(event) {
                console.log(event.which)
                if (!this.visiable) {
                    return
                }
                if (event.which === 38) {
                    --this.selectIndex
                    if (this.selectIndex <= -1) {
                        this.selectIndex = -1
                        console.log(this.$refs.input)
                        this.$nextTick(() => {
                            this.$refs.input.focus()
                            this.$refs.input.select()
                        })
                    }
                    console.log(this.selectIndex)
                }

                if (event.which === 40) {
                    ++this.selectIndex
                    if (this.selectIndex === this.getTableData.length) {
                        this.selectIndex = this.getTableData.length - 1
                    }
                    console.log(this.selectIndex)
                }
                if (event.which === 13) {
                    if (this.selectIndex > -1) {
                        this.innerValue = this.getTableData[this.selectIndex][this.prop]
                        this.visiable = false
                        this.$emit('input', this.getTableData[this.selectIndex])
                        this.$emit('select', this.getTableData[this.selectIndex])
                    }
                }
            },
            onBlur() {
                // this.visiable = false
            },
            onClear() {
                this.visiable = false
                this.$emit('input', null)
                this.$emit('clear')
            }
        },
        watch: {
            value(value) {
                if (value) {
                    this.clickFlag = true
                    this.innerValue = value[this.prop]
                }
            }
        },
        destroyed: function() {
            clearTimeout(this.timer)
            this.timer = null
        },
        computed: {
            getTableData() {
                return this.data()
            }
        },
        mounted() {
            if (this.focus) {
                this.$refs.input.focus()
            }
        }
    }
</script>

<style>

</style>