<template>
    <div v-clickoutside="close"
         :class="`${prefix}-time-picker`">
        <jdd-input ref="ipt"
                   v-model="displayValue"
                   readonly
                   :placeholders="placeholders"
                   clearable
                   :size="realSize"
                   mode="range"
                   :disabled="pickerDisabled"
                   :iconSuffix="`${prefix}-icon-time`"
                   @click="handleInputClick"
                   @clear="handleClear">
            <span slot="rangeSeperator">至</span>
        </jdd-input>

        <transition name="ani-slide"
                    @after-leave="doDestroy">
            <div v-if="visible"
                 ref="popper"
                 :class="`${prefix}-time-picker__panel`"
                 :style="timePickerStyle"
                 @click.stop>
                <div :class="`${prefix}-time-picker__panel__tables`">
                    <div :class="`${prefix}-time-picker__panel__tables__start`">
                        <p class="header">
                            开始时间
                        </p>
                        <time-table v-model="startTime"
                                    :end="endTime" />
                    </div>
                    <div :class="`${prefix}-time-picker__panel__tables__end`">
                        <p class="header">
                            结束时间
                        </p>
                        <time-table v-model="endTime"
                                    :start="startTime" />
                    </div>
                </div>
                <div :class="`${prefix}-time-picker__panel__actions`">
                    <a class="cancel"
                       @click="handleCancel">取消</a>
                    <a class="ok"
                       @click="handleOK">确定</a>
                </div>
            </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: 'TimeRangePicker',
    directives: { clickoutside, transfer },
    components: {
        TimeTable,
        jddInput: Input
    },
    mixins: [prefixMixins, pickerMixins, poperMixins],
    props: {
        value: Array,
        size: {
            type: String,
            default: 'medium'
        },
        placeholders: {
            type: Array,
            default: () => ['开始时间', '结束时间']
        }
    },
    data() {
        return {
            startTime: null,
            endTime: null,
            prevValue: []
        };
    },
    inject: {
        jddForm: {
            default: null
        },
        jddFormItem: {
            default: null
        }
    },
    computed: {
        displayValue: {
            get() {
                return [this.startTime, this.endTime];
            },
            set(val) {
                this.startTime = val[0];
                this.endTime = val[1];
                this.$emit('input', val);
                this.change();
            }
        },
        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.startTime = val[0];
            this.endTime = val[1];
        },
        startTime: function(val) {
            this.$emit('input', [this.startTime, this.endTime]);
            this.change();
        },
        endTime: function() {
            this.$emit('input', [this.startTime, this.endTime]);
            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';
        },
        handleCancel() {
            this.startTime = this.prevValue[0];
            this.endTime = this.prevValue[1];
            this.$emit('input', this.prevValue);
            this.change();
            this.close();
        },
        handleOK() {
            this.close();
        },
        handleClear() {
            this.close();
        }
    },
    mounted() {
        this.startTime = this.value[0];
        this.endTime = this.value[1];
        this.prevValue = this.value;
        this.initPopper();
        on(window, 'wheel', this.mouseWheel);
    },
    beforeDestory() {
        off(window, 'wheel', this.mouseWheel);
    }
};
</script>
