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

        <transition name="ani-slide"
                    @after-leave="doDestroy">
            <div v-if="visible"
                 ref="popper"
                 :style="datePickerStyle"
                 :class="`${prefix}-date-picker__panel`"
                 @click.stop>
                <quick-bar v-if="quickBar"
                           :quickOptions="quickOptions"
                           @quick="handleQuick"></quick-bar>
                <picker v-model="viewDate">
                    <p slot="title"
                       class="cont">{{title}}</p>
                    <date-table :date="viewDate"
                                :range="range"
                                :selected="selectedDate"
                                @select="handleSelect"></date-table>
                </picker>
            </div>
        </transition>
    </div>
</template>

<script>
import Input from 'jdd-design/components/input';
import dayjs from 'dayjs';
import DateTable from './date-table';
import Picker from './picker';
import QuickBar from './quick-bar';
import pickerMixins from './mixins';
import { prefix, prefixMixins } 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';
import { on, off } from 'jdd-design/utils';
export default {
    name: 'date-picker',
    mixins: [prefixMixins, pickerMixins, poperMixins],
    directives: { clickoutside, transfer },
    components: {
        DateTable,
        jddInput: Input,
        QuickBar,
        Picker
    },
    data() {
        return {
            selectedDate: null, //选中的时间
            quickOptions: [
                {
                    title: '昨天',
                    getter: function() {
                        return [dayjs().add(-1, 'days')];
                    }
                },
                {
                    title: '今天',
                    getter: function() {
                        return [dayjs()];
                    }
                }
            ]
        };
    },
    provide() {
        return {
            jddDatePanel: this
        };
    },
    inject: {
        jddForm: {
            default: null
        },
        jddFormItem: {
            default: null
        }
    },
    props: {
        value: [Number, Date, String],
        size: {
            type: String,
            default: 'medium'
        },
        placeholder: String,
        range: [Array, Function]
    },
    computed: {
        title() {
            return dayjs(this.viewDate).format('YYYY年MM月');
        },
        displayValue: {
            get: function() {
                if (this.selectedDate) {
                    return dayjs(this.selectedDate).format(this.formatter);
                }
                return '';
            },
            set: function(val) {
                this.selectedDate = null;
                this.viewDate = this.fixTime();
                this.$emit('input', this.selectedDate);
                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) {
            if (val) {
                this.selectedDate = this.fixTime(val);
            }
            this.viewDate = this.fixTime(this.selectedDate || new Date());
        }
    },
    methods: {
        handleQuick(obj) {
            let quickDate = obj[0];
            let rangeType = Object.prototype.toString
                .apply(this.range)
                .toLowerCase();
            if (rangeType === '[object array]') {
                let disabledStart = this.fixTime(this.range[0]);
                let disabledEnd = this.fixTime(this.range[1]);

                if (quickDate < disabledStart || quickDate > disabledEnd) {
                    return;
                }
            } else if (rangeType === '[object function]') {
                if (!this.range.prototype.apply(this, quickDate)) {
                    return;
                }
            }
            this.selectedDate = this.viewDate = quickDate;
            this.$emit('input', this.selectedDate);
            this.change();
            this.close();
        },
        handleInputClick() {
            if (this.pickerDisabled) return;
            this.visible = true;
        },
        handleSelect(date) {
            this.viewDate = this.selectedDate = date;
            this.$emit('input', date);
            this.change();
            this.close();
        },
        initPopper() {
            this.referenceElm = this.$refs.ipt.$el;
            this.popperElm = this.$refs.popper;
            this.currentPlacement = 'bottom-start';
        }
    },
    mounted() {
        if (this.value) {
            this.selectedDate = this.fixTime(this.value);
        }
        this.viewDate = this.fixTime(this.selectedDate || new Date());
        let width = 322;
        !this.quickBar && (width -= 100);
        if (
            Object.prototype.toString.apply(this.quickBar) == '[object Array]'
        ) {
            this.quickOptions = [...this.quickBar];
        }
        this.datePickerStyle.width = `${width}px`;
        this.initPopper();
        on(window, 'wheel', this.mouseWheel);
    },
    beforeDestory() {
        off(window, 'wheel', this.mouseWheel);
    }
};
</script>
