<template>
    <div v-clickoutside="close"
         :class="`${prefix}-time-picker`">
        <jdd-input ref="ipt"
                   v-model="selectedTime"
                   :placeholder="placeholder"
                   clearable
                   readonly
                   :size="realSize"
                   :disabled="pickerDisabled"
                   :iconSuffix="`${prefix}-icon-time`"
                   @click="handleInputClick"
                   @clear="handleClear" />

        <transition name="ani-slide"
                    @after-leave="doDestroy">
            <div v-if="visible"
                 ref="popper"
                 :class="`${prefix}-time-picker__panel`"
                 :style="timePickerStyle"
                 @click.stop>
                <time-table v-model="selectedTime" />
            </div>
        </transition>
    </div>
</template>

<script>
import TimeTable from './time-table';
import Input from 'jdd-design/components/input';
import pickerMixins from './mixins';
import { prefixMixins, on, off } from 'jdd-design/utils';
import clickoutside from 'jdd-design/utils/directives/clickoutside';
import transfer from 'jdd-design/utils/directives/transfer-dom';
import poperMixins from 'jdd-design/utils/mixins/popper';
export default {
    name: 'TimePicker',
    directives: { clickoutside, transfer },
    components: {
        TimeTable,
        jddInput: Input
    },
    mixins: [prefixMixins, pickerMixins, poperMixins],
    props: {
        value: String,
        size: {
            type: String,
            default: 'medium'
        },
        placeholder: String
    },
    data() {
        return {
            selectedTime: null //选中的时间
        };
    },
    inject: {
        jddForm: {
            default: null
        },
        jddFormItem: {
            default: null
        }
    },
    computed: {
        realSize() {
            return this.size || (this.jddForm && this.jddForm.size) || 'medium';
        }
    },
    watch: {
        visible: function(val) {
            this.$nextTick(() => {
                if (val) {
                    this.initPopper();
                    this.updatePopper();
                }
            });
        },
        value: function(val) {
            this.selectedTime = val;
        },
        selectedTime: function(val) {
            this.$emit('input', val);
            this.change();
        }
    },
    methods: {
        handleInputClick() {
            if (this.pickerDisabled) return;
            this.visible = true;
        },
        initPopper() {
            this.referenceElm = this.$refs.ipt.$el;
            this.popperElm = this.$refs.popper;
            this.currentPlacement = 'bottom-start';
        },
        handleClear() {
            this.close();
        }
    },
    mounted() {
        this.selectedTime = this.value;
        this.initPopper();
        on(window, 'wheel', this.mouseWheel);
    },
    beforeDestory() {
        off(window, 'wheel', this.mouseWheel);
    }
};
</script>
