<template>
    <div :class="classes" @mousedown.prevent>
        <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
            <div
                v-for="(shortcut, index) in shortcuts"
                :key="index"
                :class="[prefixCls + '-shortcut']"
                @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
        </div>
        <div :class="[prefixCls + '-body']">
            <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
                <span
                    :class="iconBtnCls('prev', '-double')"
                    @click="changeYear(-1)">
                    <Icon type="prev"/>
                </span>
                <span
                    v-if="pickerTable === 'date-table' || pickerTable === 'week-table'"
                    :class="iconBtnCls('prev')"
                    @click="changeMonth(-1)"
                    v-show="currentView === 'date' || pickerTable === 'week-table'">
                    <Icon type="arrow-left"/>
                </span>
                <DatePanelLabel
                    :date-panel-label="datePanelLabel"
                    :current-view="pickerTable.split('-').shift()"
                    :date-prefix-cls="datePrefixCls" />
                <span
                    :class="iconBtnCls('next', '-double')"
                    @click="changeYear(+1)">
                    <Icon type="next" />
                </span>
                <span
                    v-if="pickerTable === 'date-table' || pickerTable === 'week-table'"
                    v-show="currentView === 'date' || pickerTable === 'week-table'"
                    :class="iconBtnCls('next')"
                    @click="changeMonth(+1)">
                    <Icon type="arrow-right"/>
                </span>
            </div>
            <div :class="[prefixCls + '-content']">
                <component
                    :is="pickerTable"
                    ref="pickerTable"
                    v-if="currentView !== 'time'"
                    :table-date="panelDate"
                    :show-week-numbers="showWeekNumbers"
                    :value="dates"
                    :selection-mode="selectionMode"
                    :disabled-date="disabledDate"
                    :focused-date="focusedDate"
                    :weekStartDay="weekStartDay"
                    @on-pick="panelPickerHandlers"
                    @on-pick-click="handlePickClick"/>
            </div>
            <div :class="[prefixCls + '-content']" v-show="isTime">
                <TimePicker
                    ref="timePicker"
                    v-if="currentView === 'time'"
                    :value="dates"
                    :format="format"
                    :time-disabled="timeDisabled"
                    :disabled-date="disabledDate"
                    :focused-date="focusedDate"
                    :steps="steps"
                    v-bind="timePickerOptions"
                    @on-pick="handlePick"
                    @on-pick-click="handlePickClick"
                    @on-pick-clear="handlePickClear"
                    @on-pick-success="handlePickSuccess"
                    @on-pick-toggle-time="handleToggleTime"/>
            </div>
            <Confirm
                v-if="confirm"
                :show-time="showTime"
                :is-time="isTime"
                @on-pick-toggle-time="handleToggleTime"
                @on-pick-clear="handlePickClear"
                @on-pick-success="handlePickSuccess"/>
        </div>
    </div>
</template>
<script>
    import Icon from '../../../icon/icon'
    import DateTable from '../../base/date-table'
    import YearTable from '../../base/year-table'
    import MonthTable from '../../base/month-table'
    import WeekTable from '../../base/week-table'
    import TimePicker from '../Time/time'
    import Confirm from '../../base/confirm'
    import DatePanelLabel from './date-panel-label'

    import Mixin from '../panel-mixin'
    import DateMixin from './date-panel-mixin'
    import Locale from '../../../../../mixins/locale'

    import { siblingMonth, formatDateLabels } from '../../util'

    const prefixCls = 'yy-picker-panel'
    const datePrefixCls = 'yy-date-picker'
    export default {
        name: 'YYDatePickerPanel',
        mixins: [Mixin, Locale, DateMixin],
        components: {
            Icon,
            DateTable,
            YearTable,
            MonthTable,
            WeekTable,
            TimePicker,
            Confirm,
            DatePanelLabel
        },
        props: {
            multiple: {
                type: Boolean,
                default: false
            },
            steps: {
                type: Array,
                default: () => []
            },
            weekStartDay: Number
        },
        data() {
            const {
                selectionMode,
                value
            } = this

            const dates = value.slice().sort()
            return {
                prefixCls: prefixCls,
                datePrefixCls: datePrefixCls,
                currentView: selectionMode || 'date',
                pickerTable: this.getTableType(selectionMode),
                dates: dates,
                panelDate: this.startDate || dates[0] || new Date()
            }
        },
        computed: {
            classes() {
                return [
                    `${prefixCls}-body-wrapper`,
                    {
                        [`${prefixCls}-with-sidebar`]: this.shortcuts.length
                    }
                ]
            },
            panelPickerHandlers() {
                return this.pickerTable === `${this.currentView}-table` ? this.handlePick : this.handlePreSelection
            },
            datePanelLabel() {
                const locale = this.t('locale') || ''
                const datePanelLabel = this.t('datepicker.datePanelLabel') || ''
                const date = this.panelDate
                const {
                    labels,
                    separator
                } = formatDateLabels(locale, datePanelLabel, date)

                const handler = type => {
                    return () => this.pickerTable = this.getTableType(type)
                }

                return {
                    separator: separator,
                    labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
                }
            },
            timeDisabled() {
                return !this.dates[0]
            }
        },
        watch: {
            value(newVal) {
                this.dates = newVal
                const panelDate = this.multiple ? this.dates[this.dates.length - 1] : (this.startDate || this.dates[0])
                this.panelDate = panelDate || new Date()
            },
            currentView(currentView) {
                this.$emit('on-selection-mode-change', currentView)

                if (this.currentView === 'time') {
                    this.$nextTick(() => {
                        const spinner = this.$refs.timePicker.$refs.timeSpinner
                        spinner.updateScroll()
                    })
                }
            },
            selectionMode(type) {
                this.currentView = type
                this.pickerTable = this.getTableType(type)
            },
            focusedDate(date) {
                const isDifferentYear = date.getFullYear() !== this.panelDate.getFullYear()
                const isDifferentMonth = isDifferentYear || date.getMonth() !== this.panelDate.getMonth()
                if (isDifferentYear || isDifferentMonth) {
                    if (!this.multiple) this.panelDate = date
                }
            }
        },
        methods: {
            reset() {
                this.currentView = this.selectionMode
                this.pickerTable = this.getTableType(this.currentView)
            },
            changeYear(dir) {
                if (this.selectionMode === 'year' || this.pickerTable === 'year-table') {
                    this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1)
                } else {
                    this.panelDate = siblingMonth(this.panelDate, dir * 12)
                }
            },
            getTableType(currentView) {
                return currentView.match(/^time/) ? 'time-picker' : `${currentView}-table`
            },
            changeMonth(dir) {
                this.panelDate = siblingMonth(this.panelDate, dir)
            },
            handlePreSelection(value) {
                // 在picker.vue的clickoutside指令的handleClose方法中，判断是否点击外部的方法是判断父el.contains(e.target)
                // 如果这里不通过setTimeout延时直接刷新渲染，因为dom已经刷新，之前触发的clickoutside中的el.contains(e.target)为false，从而导致选完年直接关闭了picker
                setTimeout(() => {
                    this.panelDate = value
                    if (this.pickerTable === 'year-table') this.pickerTable = 'month-table'
                    else this.pickerTable = this.getTableType(this.currentView)
                }, 100)

            },
            handlePick(value, type) {
                const {
                    selectionMode,
                    panelDate
                } = this
                if (selectionMode === 'year') value = new Date(value.getFullYear(), 0, 1)
                else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1)
                else value = new Date(value)

                this.dates = [value]
                this.$emit('on-pick', value, false, type || selectionMode)
            },
        }
    }
</script>
