<template>
    <div :class="classes" @mousedown.prevent>
        <div :class="[prefixCls + '-body']">
            <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
                <div :class="[timePrefixCls + '-header']">
                    <template v-if="showDate">{{ leftDatePanelLabel }}</template>
                    <template v-else>{{ t('datepicker.startTime') }}</template>
                </div>
                <TimeSpinner
                    ref="timeSpinner"
                    :steps="steps"
                    :show-seconds="showSeconds"
                    :hours="value[0] && dateStart.getHours()"
                    :minutes="value[0] && dateStart.getMinutes()"
                    :seconds="value[0] && dateStart.getSeconds()"
                    :disabled-hours="disabledHours"
                    :disabled-minutes="disabledMinutes"
                    :disabled-seconds="disabledSeconds"
                    :hide-disabled-options="hideDisabledOptions"
                    @on-change="handleStartChange"
                    @on-pick-click="handlePickClick"/>
            </div>
            <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
                <div :class="[timePrefixCls + '-header']">
                    <template v-if="showDate">{{ rightDatePanelLabel }}</template>
                    <template v-else>{{ t('datepicker.endTime') }}</template>
                </div>
                <TimeSpinner
                    ref="timeSpinnerEnd"
                    :steps="steps"
                    :show-seconds="showSeconds"
                    :hours="value[1] && dateEnd.getHours()"
                    :minutes="value[1] && dateEnd.getMinutes()"
                    :seconds="value[1] && dateEnd.getSeconds()"
                    :disabled-hours="disabledHours"
                    :disabled-minutes="disabledMinutes"
                    :disabled-seconds="disabledSeconds"
                    :hide-disabled-options="hideDisabledOptions"
                    @on-change="handleEndChange"
                    @on-pick-click="handlePickClick"/>
            </div>
            <Confirm
                v-if="confirm"
                @on-pick-clear="handlePickClear"
                @on-pick-success="handlePickSuccess"/>
        </div>
    </div>
</template>
<script>
    import TimeSpinner from '../../base/time-spinner'
    import Confirm from '../../base/confirm'
    import Options from '../../time-mixins'
    import Mixin from '../panel-mixin'
    import Locale from '../../../../../mixins/locale'
    import { getLang } from '../../../../../locale/'
    import { initTimeDate, formatDateLabels } from '../../util'
    import { formatTime } from '../../../../../utils/utils'
    const capitalize = (str) => str[0].toUpperCase() + str.slice(1)

    const prefixCls = 'yy-picker-panel'
    const timePrefixCls = 'yy-time-picker'
    export default {
        name: 'YYRangeTimePickerPanel',
        mixins: [Mixin, Locale, Options],
        components: {
            TimeSpinner,
            Confirm
        },
        props: {
            steps: {
                type: Array,
                default: () => []
            },
            format: {
                type: String,
                default: 'HH:mm'
            },
            value: {
                type: Array,
                required: true
            }
        },
        data() {
            const [dateStart, dateEnd] = this.value.slice()
            return {
                prefixCls: prefixCls,
                timePrefixCls: timePrefixCls,
                showDate: false,
                dateStart: dateStart || initTimeDate(),
                dateEnd: dateEnd || initTimeDate()
            }
        },
        computed: {
            classes() {
                return [
                    `${prefixCls}-body-wrapper`,
                    `${timePrefixCls}-with-range`,
                    {
                        [`${timePrefixCls}-with-seconds`]: this.showSeconds
                    }
                ]
            },
            showSeconds() {
                return !(this.format || '').match(/mm$/)
            },
            leftDatePanelLabel() {
                return this.panelLabelConfig(this.dateStart)
            },
            rightDatePanelLabel() {
                return this.panelLabelConfig(this.dateEnd)
            }
        },
        watch: {
            value(dates) {
                const [dateStart, dateEnd] = dates.slice()
                this.dateStart = dateStart || initTimeDate()
                this.dateEnd = dateEnd || initTimeDate()
            }
        },
        methods: {
            panelLabelConfig(date) {
                return formatTime(date, getLang() === 'en' ? 'MM/DD/YYYY' : 'YYYY年MM月DD日')
            },
            handleChange(start, end, emit = true) {

                const dateStart = new Date(this.dateStart)
                let dateEnd = new Date(this.dateEnd)

                Object.keys(start).forEach(type => {
                    dateStart[`set${capitalize(type)}`](start[type])
                })

                Object.keys(end).forEach(type => {
                    dateEnd[`set${capitalize(type)}`](end[type])
                })

                if (dateEnd < dateStart) dateEnd = dateStart

                if (emit) this.$emit('on-pick', [dateStart, dateEnd], 'time')
            },
            handleStartChange(date) {
                this.handleChange(date, {})
            },
            handleEndChange(date) {
                this.handleChange({}, date)
            },
            updateScroll() {
                this.$refs.timeSpinner.updateScroll()
                this.$refs.timeSpinnerEnd.updateScroll()
            }
        },
        mounted() {
            try {
                const name = this.$parent && this.$parent.$parent && this.$parent.$parent.$parent &&
                this.$parent.$parent.$parent.$options.name
                if (name === 'YYDatePicker' || name === 'yy-date-picker' || name === 'y-y-date-picker') {
                    this.showDate = true
                }
            } catch (error) {
                
            }
        }
    }
</script>
