'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _carousel = require('../carousel');

var _carousel2 = _interopRequireDefault(_carousel);

var _carouselItem = require('../carousel-item');

var _carouselItem2 = _interopRequireDefault(_carouselItem);

var _pickerView = require('../picker-view');

var _pickerView2 = _interopRequireDefault(_pickerView);

var _button = require('../button');

var _button2 = _interopRequireDefault(_button);

var _util = require('../calendar/util');

var _dateUtil = require('../utils/dateUtil');

var _numberUtil = require('../utils/numberUtil');

var _event = require('../_utils/dom/event');

var _raf = require('../_utils/dom/raf');

require('./index.less');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var DateTimePickerView = {
    name: 'SnDatetimePickerView',
    data: function data() {
        return {
            height: 0,
            panelTitle: '',
            times: [],
            noons: [],
            selectedDate: [],
            selectedTime: [],
            weekList: ['日', '一', '二', '三', '四', '五', '六'],
            yearAndMonthList: [],
            showCalender: true,
            showMonthSelect: false,
            showTimeSelect: false,
            showNoonSelect: false,
            year: 0,
            month: 0,
            today: (0, _dateUtil.dateFormat)(new Date(), 'YYYY/MM/DD'),
            currentValue: '',
            currentDate: '',
            currentTime: '08:30',
            currentNoon: '上午',
            swiperList: [],
            swiperItemIndex: 0,
            minDate: false,
            maxDate: false
        };
    },

    props: {
        value: [String, Number, Array, Date],
        /** 时间控件模式
         * 1) 'date':         选择日期
         * 2) 'datetime':     选择时间
         * 3) 'year-month':   选择年月
         * 4）'year':         选择年份
         * 5）'month':        选择月份
         * 6) 'time':         选择时分
         */
        mode: {
            type: String,
            'default': 'date',
            validator: function validator(value) {
                return ['date', 'datetime', 'year-month', 'year', 'month', 'time'].indexOf(value) > -1;
            }
        },
        disabledDate: Function,
        vertical: {
            type: Boolean,
            'default': true
        },
        showLastMonth: {
            type: Boolean,
            'default': false
        },
        showNextMonth: {
            type: Boolean,
            'default': false
        },
        workDate: {
            type: Array,
            'default': function _default() {
                return [];
            }
        },
        infoDate: {
            type: Array,
            'default': function _default() {
                return [];
            }
        },
        touchable: {
            type: Boolean,
            'default': true
        },
        mouseable: {
            type: Boolean,
            'default': true
        },
        minuteStep: [String, Number],
        use12Hours: Boolean,
        noon: {
            type: String,
            'default': '上午',
            validator: function validator(value) {
                return ['上午', '下午'].indexOf(value) > -1;
            }
        },
        panelTitleFormat: {
            type: String,
            'default': 'YYYY年MM月DD日'
        },
        rangeHours: Array,
        rangeMinutes: Array
    },
    computed: {
        styleHeight: function styleHeight() {
            return this.height + 'px';
        }
    },
    watch: {
        value: function value(val) {
            this.currentValue = val;
        },
        currentValue: function currentValue(val) {
            var mode = this.mode,
                currentValue = this.currentValue,
                selectedDate = this.selectedDate,
                use12Hours = this.use12Hours,
                noon = this.noon,
                panelTitleFormat = this.panelTitleFormat;

            if (mode === 'date' || mode === 'datetime' || mode === 'year-month') {
                if (mode === 'date') {
                    this.panelTitle = (0, _dateUtil.dateFormat)(currentValue, panelTitleFormat);
                } else if (mode === 'datetime') {
                    this.panelTitle = (0, _dateUtil.dateFormat)(currentValue, panelTitleFormat);
                } else {
                    this.panelTitle = selectedDate[0] + '\u5E74' + selectedDate[1] + '\u6708';
                }
            } else if (mode === 'year') {
                this.panelTitle = selectedDate[0] + '\u5E74';
            } else if (mode === 'month') {
                this.panelTitle = selectedDate[0] + '\u6708';
            }
        },
        selectedDate: function selectedDate(val) {
            var mode = this.mode;

            if (mode === 'date' || mode === 'datetime' || mode === 'year-month') {
                var now = new Date();

                if (parseInt(val[0]) === 1980 && parseInt(val[1]) === 1) {
                    this.minDate = true;
                }
                if (parseInt(val[0]) === now.getFullYear() + 20 && parseInt(val[1]) === 12) {
                    this.maxDate = true;
                }

                if (mode === 'year-month') {
                    this.panelTitle = val[0] + '\u5E74' + val[1] + '\u6708';
                }
            }
        },
        selectedTime: function selectedTime(val) {
            var mode = this.mode;

            if (mode === 'time') {
                this.panelTitle = val[0] + '\u65F6' + val[1] + '\u5206';
            }
        }
    },
    created: function created() {
        this.currentValue = this.value;
        var mode = this.mode;
        var date = void 0,
            year = void 0,
            month = void 0;
        if (Array.isArray(this.currentValue)) {
            if (mode === 'year-month') {
                if (this.currentValue.length === 0) {
                    year = new Date().getFullYear();
                    month = new Date().getMonth();
                } else if (this.currentValue.length === 1) {
                    year = Number(this.currentValue[0]);
                    month = new Date().getMonth();
                } else if (this.currentValue.length === 2) {
                    year = Number(this.currentValue[0]);
                    month = Number(this.currentValue[1]) - 1;
                }
            } else if (mode === 'year') {
                if (this.currentValue.length === 0) {
                    year = new Date().getMonth();
                } else if (this.currentValue.length === 1) {
                    year = Number(this.currentValue[0]);
                }
            } else if (mode === 'month') {
                if (this.currentValue.length === 0) {
                    month = new Date().getMonth();
                } else if (this.currentValue.length === 1) {
                    month = Number(this.currentValue[0]) - 1;
                }
            }
        } else {
            date = this.currentValue && new Date(this.currentValue) || new Date();
            year = date.getFullYear();
            month = date.getMonth();
        }
        var fullYear = '' + year,
            fullMonth = (0, _numberUtil.zeroComplete)(month + 1);
        if (mode === 'date') {
            this.currentValue = (0, _dateUtil.dateFormat)(date, 'YYYY/MM/DD');
            this.selectedDate = [fullYear, fullMonth];
            this.render(year, month);
            this.renderYearAndMonth(year, month);

            if (this.use12Hours) {
                this.renderNoon(this.noon);
            }
        } else if (mode === 'datetime') {
            try {
                this.currentDate = (0, _dateUtil.dateFormat)(date, 'YYYY/MM/DD');
            } catch (e) {
                throw Error('[sinosun-ui] datetimePickerView 时间格式不正确');
            }
            this.currentValue = (0, _dateUtil.dateFormat)(date, 'YYYY/MM/DD');
            this.selectedDate = [fullYear, fullMonth];
            this.render(year, month);
            this.renderYearAndMonth(year, month);
            this.renderTime(date.getHours(), date.getMinutes());
        } else if (mode === 'year-month') {
            this.showCalender = false;
            this.showMonthSelect = true;
            this.selectedDate = [fullYear, fullMonth];
            this.renderYearAndMonth(year, month);
        } else if (mode === 'year') {
            this.showCalender = false;
            this.showMonthSelect = true;
            this.selectedDate = [fullYear];
            this.renderYearAndMonth(year);
        } else if (mode === 'month') {
            this.showCalender = false;
            this.showMonthSelect = true;
            this.selectedDate = [fullMonth];
            this.renderYearAndMonth(null, month);
        } else if (mode === 'time') {
            this.showCalender = false;
            this.showMonthSelect = false;
            this.showTimeSelect = true;
            if (this.currentValue) {
                if (Array.isArray(this.currentValue)) {
                    this.renderTime(this.currentValue[0], this.currentValue[1]);
                } else {
                    console.error('[sinosun-ui] DatetimePickerView 模式为time时，value值必须为数组。');
                }
            } else {
                this.renderTime(date.getHours(), date.getMinutes());
            }
        }

        /* 动态计算swiper高度 */
        this.getHeight();
    },
    mounted: function mounted() {
        if (['year-month', 'year', 'month'].indexOf(this.mode) > -1) {
            this.$refs.datePicker.setValues(this.selectedDate);
        }
        if (['time'].indexOf(this.mode) > -1) {
            this.$refs.timePicker.setValues(this.selectedTime);
        }
    },

    methods: {
        /* 获取高度 */
        getHeight: function getHeight() {
            var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            this.height = windowWidth < 480 ? windowWidth * 0.94 : 360;
        },

        /* 渲染入口 */
        render: function render(year, month) {
            var force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

            var value = this.currentValue;

            this.year = year;
            this.month = month;

            /* 注入滑动数组 */
            this.renderCarousel(year, month, value);
        },

        /* 渲染日历数据 */
        renderCarousel: function renderCarousel(year, month, value) {
            var _this = this;

            var disabledDate = this.disabledDate;

            /* 生成总共需要的四个月数据 */

            var prevTime = (0, _util.getPrevTime)(year, month);
            var nextTime = (0, _util.getNextTime)(year, month);
            var prevMonth = (0, _util.getDays)((0, _extends3['default'])({}, prevTime, { value: value, disabledDate: disabledDate }));
            var curMonth = (0, _util.getDays)({ year: year, month: month, value: value, disabledDate: disabledDate });
            var nextMonth = (0, _util.getDays)((0, _extends3['default'])({}, nextTime, { value: value, disabledDate: disabledDate }));

            this.$refs.carousel && this.$refs.carousel.swipeTo(0, { immediate: true });
            this.swiperItemIndex = 0;
            (0, _raf.doubleRaf)(function () {
                _this.swiperList = [];
                _this.swiperList = [curMonth, nextMonth, prevMonth];
            });
        },

        /* 根据指定日期生成上下20年年月数据 */
        renderYearAndMonth: function renderYearAndMonth(year, month) {
            var mode = this.mode;
            var _date = new Date();
            var _year = _date.getFullYear();
            var yearList = [],
                monthList = [];
            // 加载自1980至当前后20年数据
            for (var i = 1980; i <= _year + 20; i++) {
                yearList.push('' + i);
            }
            // 加载12个月份
            for (var _i = 1; _i <= 12; _i++) {
                var _month2 = (0, _numberUtil.zeroComplete)(_i);
                monthList.push('' + _month2);
            }

            if (mode === 'date' || mode === 'datetime' || mode === 'year-month') {
                this.yearAndMonthList = [{
                    values: yearList,
                    defaultIndex: 0
                }, {
                    values: monthList,
                    defaultIndex: 1
                }];
                this.selectedDate = ['' + year, '' + (0, _numberUtil.zeroComplete)(month + 1)];
            } else if (mode === 'year') {
                this.yearAndMonthList = [{ values: yearList }];
                this.selectedDate = ['' + year];
            } else if (mode === 'month') {
                this.yearAndMonthList = [{ values: monthList }];
                this.selectedDate = ['' + (0, _numberUtil.zeroComplete)(month + 1)];
            }
        },

        /* 渲染时分选择 */
        renderTime: function renderTime(hour, min) {
            var now = new Date();

            var hours = [];
            var minutes = [];
            for (var i = 0; i < 60; i++) {
                if (i < 24) {
                    hours.push('' + (0, _numberUtil.zeroComplete)(i));
                }

                if (this.minuteStep !== undefined) {
                    i % this.minuteStep === 0 && minutes.push('' + (0, _numberUtil.zeroComplete)(i));
                } else {
                    minutes.push('' + (0, _numberUtil.zeroComplete)(i));
                }
            }

            // 如果存在自定义小时，则以自定义为准
            if (Array.isArray(this.rangeHours) && this.rangeHours.length) {
                hours = [];
                for (var _i2 = 0; _i2 < this.rangeHours.length; _i2++) {
                    hours.push('' + (0, _numberUtil.zeroComplete)(this.rangeHours[_i2]));
                }
            }

            // 如果存在自定义分钟，则以自定义为准
            if (Array.isArray(this.rangeMinutes) && this.rangeMinutes.length) {
                minutes = [];
                for (var _i3 = 0; _i3 < this.rangeMinutes.length; _i3++) {
                    minutes.push('' + (0, _numberUtil.zeroComplete)(this.rangeMinutes[_i3]));
                }
            }

            this.times = [{
                values: hours,
                defaultIndex: 0
            }, {
                values: minutes,
                defaultIndex: 1
            }];

            this.selectedTime = [(0, _numberUtil.zeroComplete)(!isNaN(hour) ? hour : now.getHours()), (0, _numberUtil.zeroComplete)(!isNaN(min) ? min : now.getMinutes())];

            // 如果有自定义时分，默认选中为首项
            if (Array.isArray(this.rangeHours) && this.rangeHours.length) {
                this.selectedTime[0] = (0, _numberUtil.zeroComplete)(this.value && this.rangeHours.includes(hour) ? hour : this.rangeHours[0]);
            }
            if (Array.isArray(this.rangeMinutes) && this.rangeMinutes.length) {
                this.selectedTime[1] = (0, _numberUtil.zeroComplete)(this.value && this.rangeMinutes.includes(min) ? min : this.rangeMinutes[0]);
            }

            this.currentTime = this.selectedTime.join(':');
        },

        /* 渲染上下午选择 */
        renderNoon: function renderNoon(noon) {
            this.noons = [{
                values: ['上午', '下午']
            }];
            this.currentNoon = noon;
        },

        /* 上一页 */
        prev: function prev() {
            if (!this.minDate) {
                var swiperItemIndex = this.swiperItemIndex;
                var goIndex = swiperItemIndex - 1 >= 0 ? swiperItemIndex - 1 : 2;
                this.$refs.carousel.swipeTo(goIndex, { immediate: true });
            }
        },

        /* 下一页 */
        next: function next() {
            if (!this.maxDate) {
                var swiperItemIndex = this.swiperItemIndex;
                var goIndex = swiperItemIndex + 1 <= 2 ? swiperItemIndex + 1 : 0;
                this.$refs.carousel.swipeTo(goIndex, { immediate: true });
            }
        },

        /* 跳转页 */
        go: function go(year, month) {
            this.render(year, month, true);
        },

        /* 选择日期 */
        select: function select(event, k1, k2, data) {
            (0, _event.preventDefault)(event, true);
            var mode = this.mode,
                showLastMonth = this.showLastMonth,
                showNextMonth = this.showNextMonth,
                use12Hours = this.use12Hours;


            if (data.isDisabled) {
                return;
            }
            if (!showLastMonth && data.isLastMonth) {
                return;
            }
            if (!showNextMonth && data.isNextMonth) {
                return;
            }
            var _currentValue = data.formatedDate;
            if ((!data.isLastMonth || showLastMonth) && (!data.isNextMonth || showNextMonth)) {
                var index = this.swiperItemIndex;
                var month = this.swiperList[index];
                var days = month.days;
                for (var row = 0; row < days.length; row++) {
                    for (var day = 0; day < days[row].length; day++) {
                        if (row === k1 && day === k2) {
                            days[k1][k2].isCurrent = true;
                        } else {
                            days[row][day].isCurrent = false;
                        }
                    }
                }
                if (showLastMonth && data.isLastMonth) this.prev();
                if (showNextMonth && data.isNextMonth) this.next();
            }
            this.currentValue = _currentValue;
            this.currentDate = _currentValue;

            if (mode === 'date') {
                if (use12Hours) {
                    this.onViewChange('noon');
                    this.$emit('change', this.currentValue, this.currentNoon);
                } else {
                    this.$emit('input', this.currentValue);
                    this.$emit('change', this.currentValue);
                }
            } else if (mode === 'datetime') {
                this.onViewChange('time');
                this.$emit('change', this.currentDate + ' ' + this.currentTime);
            }

            if (this.renderOnValueChange) {
                this.render(null, null);
            }
        },

        /* 选择当天 */
        setToday: function setToday(event) {
            (0, _event.preventDefault)(event, true);
            var now = new Date();
            var todayFormat = (0, _dateUtil.dateFormat)(now, 'YYYY/MM/DD');

            if (this.disabledDate && typeof this.disabledDate === 'function' && this.disabledDate(+new Date(todayFormat))) {
                return;
            }

            var year = now.getFullYear(),
                month = now.getMonth();
            this.swiperItemIndex = 0;
            this.$refs.carousel.swipeTo(0);
            this.currentValue = todayFormat;
            this.selectedDate = ['' + year, '' + (0, _numberUtil.zeroComplete)(month + 1)];
            this.render(year, month);

            this.$emit('input', this.currentValue);
        },

        /* 设置选中的天 */
        setSelectedDay: function setSelectedDay() {
            var currentDate = new Date(this.currentValue);
            var day = currentDate.getDate();
            /* 当前月最大日期 */
            var selectedMonthMaxDate = new Date(this.year, this.month + 1, 0).getDate();
            var selectedDay = (0, _dateUtil.dateFormat)(new Date(this.year, this.month, day < selectedMonthMaxDate ? day : selectedMonthMaxDate), 'YYYY/MM/DD');
            this.currentValue = selectedDay;
            this.currentDate = selectedDay;
            for (var t = 0; t < this.swiperList.length; t++) {
                var month = this.swiperList[t];
                var days = month.days;
                for (var row = 0; row < days.length; row++) {
                    for (var _day = 0; _day < days[row].length; _day++) {
                        if (days[row][_day].formatedDate === selectedDay) {
                            this.swiperList[t].days[row][_day].isCurrent = true;
                        } else {
                            this.swiperList[t].days[row][_day].isCurrent = false;
                        }
                    }
                }
            }

            if (this.mode === 'date') {
                this.$emit('change', this.currentValue);
            } else if (this.mode === 'datetime') {
                this.$emit('change', this.currentDate + ' ' + this.currentTime);
            }
        },

        /* 确认日期 */
        submit: function submit(event) {
            (0, _event.preventDefault)(event, true);
            var mode = this.mode;
            if (mode === 'datetime') {
                this.currentValue = this.currentDate + ' ' + this.currentTime;
            } else if (mode === 'year-month') {
                this.currentValue = this.selectedDate;
            } else if (mode === 'year' || mode === 'month') {
                this.currentValue = this.selectedDate;
            } else if (mode === 'time') {
                this.currentValue = this.selectedTime;
            }
            if (this.use12Hours) {
                this.$emit('input', this.currentValue, this.currentNoon);
            } else {
                this.$emit('input', this.currentValue);
            }
        },

        /* 日历onChange回调 */
        onCalendarChange: function onCalendarChange(currentIndex) {
            var _this2 = this;

            /* 滑动结束后执行选中滑动前选中的天 */
            if (currentIndex !== this.swiperItemIndex) {
                this.$nextTick(function () {
                    (0, _raf.doubleRaf)(function () {
                        var disabledDate = _this2.disabledDate;

                        var _year = _this2.year,
                            _month = _this2.month,
                            _currentValue = _this2.currentValue;

                        _this2.year = _this2.swiperList[currentIndex].year;
                        _this2.month = _this2.swiperList[currentIndex].month;
                        _this2.selectedDate = ['' + _this2.year, '' + (0, _numberUtil.zeroComplete)(_this2.month + 1)];
                        var prevTime = (0, _util.getPrevTime)(_year, _month);
                        var prev2Time = (0, _util.getPrevTime)(prevTime.year, prevTime.month);
                        var nextTime = (0, _util.getNextTime)(_year, _month);
                        var next2Time = (0, _util.getNextTime)(nextTime.year, nextTime.month);

                        var prev2Month = (0, _util.getDays)((0, _extends3['default'])({}, prev2Time, {
                            value: _currentValue,
                            disabledDate: disabledDate
                        }));
                        var next2Month = (0, _util.getDays)((0, _extends3['default'])({}, next2Time, {
                            value: _currentValue,
                            disabledDate: disabledDate
                        }));

                        /*  数据防抖动原理：初始化时，当前处于第一页，考虑有下滑，上滑动作，那么下滑对应的页面是第二页，
                            即设置下一月的数据，上滑对应的页面是第三页，即设置上一月的数据；在滑动完时，立马修改当前
                            所对应的下一页，上一页的数据，循环利用当前数组，那么无论上滑还是下滑，数据都是提前修改好
                            的，对于用户来说，数据则不会产生抖动。
                            eg:
                            当前页为第一页
                                下滑，进入第二页; 开始顺序 => [cur, next, prev], 结束顺序 => [cur, next, next2]
                                上滑，进入第三页; 开始顺序 => [cur, next, prev], 结束顺序 => [cur, prev2, prev]
                            当前页为第二页
                                下滑，进入第三页; 开始顺序 => [prev, cur, next], 结束顺序 => [next2, cur, next]
                                上滑，进入第一页; 开始顺序 => [prev, cur, next], 结束顺序 => [prev, cur, prev2]
                            当前页为第三页
                                下滑，进入第一页; 开始顺序 => [next, prev, cur], 结束顺序 => [next, next2, cur]
                                上滑，进入第二页; 开始顺序 => [next, prev, cur], 结束顺序 => [prev2, prev, cur]
                        */

                        if (_this2.swiperItemIndex === (currentIndex + 2) % 3) {
                            // 下滑
                            _this2.$set(_this2.swiperList, (_this2.swiperItemIndex + 2) % 3, next2Month);
                        } else {
                            // 上滑
                            _this2.$set(_this2.swiperList, (currentIndex + 2) % 3, prev2Month);
                        }

                        _this2.swiperItemIndex = currentIndex;

                        _this2.setSelectedDay();
                        _this2.$emit('calendar-change', _this2.currentValue);
                    });
                });
            }
        },

        /* 年月onChange回调 */
        onYearAndMonthChange: function onYearAndMonthChange(picker, value, index) {
            this.selectedDate = value;
            if (Array.isArray(value)) {
                var mode = this.mode;

                if (mode === 'date' || mode === 'datetime' || mode === 'year-month') {
                    var year = value[0];
                    var month = value[1];

                    if (mode !== 'year-month') {
                        var day = new Date(this.currentValue).getDate();
                        /* 当前月最大日期 */
                        var selectedMonthMaxDate = new Date(year, month, 0).getDate();
                        var selectedDay = (0, _dateUtil.dateFormat)(new Date(year, month - 1, day < selectedMonthMaxDate ? day : selectedMonthMaxDate), 'YYYY/MM/DD');
                        this.currentValue = selectedDay;
                        this.currentDate = selectedDay;
                        this.render(parseInt(year), parseInt(month - 1), true);
                    }
                } else if (mode === 'year') {
                    var _year2 = value[0];
                    this.panelTitle = _year2 + '\u5E74';
                } else if (mode === 'month') {
                    var _month3 = value[0];
                    this.panelTitle = _month3 + '\u6708';
                }

                this.$emit('change', value);
            }
        },

        /* 时间onChange回调 */
        onTimeChange: function onTimeChange(picker, value, index) {
            this.selectedTime = value;
            this.currentTime = value[0] + ':' + value[1];
        },
        onNoonChange: function onNoonChange(picker, value, index) {
            this.currentNoon = value[0];
        },

        /* 切换视图 */
        onViewChange: function onViewChange(type) {
            if (this.mode === 'date' || this.mode === 'datetime') {
                if (this.showMonthSelect) {
                    this.showMonthSelect = false;
                    this.showCalender = true;
                } else if (this.showTimeSelect) {
                    this.showCalender = true;
                    this.showTimeSelect = false;
                } else if (this.showNoonSelect) {
                    this.showCalender = true;
                    this.showNoonSelect = false;
                } else {
                    this.showCalender = false;
                    if (type === 'date') {
                        this.showMonthSelect = true;
                        this.$refs.datePicker.setValues(this.selectedDate);
                    } else if (type === 'time') {
                        this.showTimeSelect = true;
                        this.$refs.timePicker.setValues(this.selectedTime);
                    } else if (type === 'noon') {
                        this.showNoonSelect = true;
                        this.$refs.noonPicker.setValues([this.currentNoon]);
                    }
                }
            }
        },

        /* 渲染头部 */
        renderHeader: function renderHeader() {
            var _this3 = this;

            var h = this.$createElement;
            var mode = this.mode,
                use12Hours = this.use12Hours,
                panelTitle = this.panelTitle,
                currentTime = this.currentTime,
                currentNoon = this.currentNoon,
                showMonthSelect = this.showMonthSelect,
                showCalender = this.showCalender,
                showTimeSelect = this.showTimeSelect,
                showNoonSelect = this.showNoonSelect;


            return h(
                'div',
                { 'class': 'sn-datetime-picker-view-header' },
                [h(
                    'div',
                    { 'class': 'sn-datetime-picker-view-tabs' },
                    [h(
                        'div',
                        {
                            'class': {
                                'sn-datetime-picker-view-tabs-item': true,
                                active: (mode === 'date' || mode === 'datetime') && showMonthSelect
                            },
                            on: {
                                'click': function click() {
                                    return _this3.onViewChange('date');
                                }
                            }
                        },
                        [panelTitle]
                    ), mode === 'datetime' ? h(
                        'div',
                        {
                            'class': {
                                'sn-datetime-picker-view-tabs-item': true,
                                active: showTimeSelect,
                                'replace-arrow-seat': showMonthSelect || showTimeSelect
                            },
                            on: {
                                'click': function click() {
                                    return _this3.onViewChange('time');
                                }
                            }
                        },
                        [currentTime]
                    ) : null, use12Hours ? h(
                        'div',
                        {
                            'class': {
                                'sn-datetime-picker-view-tabs-item': true,
                                active: showNoonSelect,
                                'replace-arrow-seat': showMonthSelect || showNoonSelect
                            },
                            on: {
                                'click': function click() {
                                    return _this3.onViewChange('noon');
                                }
                            }
                        },
                        [currentNoon]
                    ) : null]
                ), h(
                    _button2['default'],
                    {
                        'class': 'sn-datetime-picker-view-btn',
                        attrs: { type: 'link'
                        },
                        directives: [{
                            name: 'show',
                            value: mode === 'date' && showCalender && use12Hours || mode !== 'date' && showCalender || ['year-month', 'year', 'month', 'time'].indexOf(mode) > -1
                        }],
                        on: {
                            'click': this.submit
                        }
                    },
                    ['\u786E\u5B9A']
                ), ['date', 'datetime'].indexOf(mode) > -1 && !showCalender ? h(
                    _button2['default'],
                    {
                        'class': 'sn-datetime-picker-view-btn',
                        attrs: { type: 'link'
                        },
                        on: {
                            'click': function click() {
                                return _this3.onViewChange(showMonthSelect ? 'date' : 'time');
                            }
                        }
                    },
                    ['\u786E\u5B9A']
                ) : null]
            );
        },

        /* 渲染日历月份 */
        renderCalendarWeekday: function renderCalendarWeekday() {
            var h = this.$createElement;
            var showCalender = this.showCalender,
                weekList = this.weekList;


            return h(
                'div',
                {
                    'class': 'sn-calendar-weekday',
                    style: { visibility: showCalender ? 'visible' : 'hidden' }
                },
                [weekList.map(function (week) {
                    return h(
                        'div',
                        { 'class': 'sn-calendar-weekday-item' },
                        [h('div', [week])]
                    );
                })]
            );
        },

        /* 渲染日历月份 */
        renderCalendarMonth: function renderCalendarMonth(month) {
            var _this4 = this;

            var h = this.$createElement;

            return h(
                'div',
                { 'class': 'sn-calendar-month' },
                [month.days.map(function (row, k1) {
                    return h(
                        'div',
                        { 'class': 'month-row' },
                        [row.map(function (item, k2) {
                            return _this4.renderCalendarDay(item, k1, k2);
                        })]
                    );
                })]
            );
        },

        /* 渲染日历日期 */
        renderCalendarDay: function renderCalendarDay(item, k1, k2) {
            var _this5 = this;

            var h = this.$createElement;
            var showLastMonth = this.showLastMonth,
                showNextMonth = this.showNextMonth,
                workDate = this.workDate,
                infoDate = this.infoDate;


            var workingDay = void 0,
                infoDay = void 0;
            if (Array.isArray(workDate) && workDate.length) {
                for (var i in workDate) {
                    if (workDate[i].date === item.formatedDate) {
                        workingDay = workDate[i];
                    }
                }
            }
            if (Array.isArray(infoDate) && infoDate.length) {
                var _iteratorNormalCompletion = true;
                var _didIteratorError = false;
                var _iteratorError = undefined;

                try {
                    for (var _iterator = infoDate[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
                        var infoItem = _step.value;

                        if (infoItem && typeof infoItem === 'string') {
                            if (infoItem === item.formatedDate) {
                                infoDay = {
                                    date: infoItem
                                };
                            }
                        } else {
                            if (infoItem.date === item.formatedDate) {
                                infoDay = infoItem;
                            }
                        }
                    }
                } catch (err) {
                    _didIteratorError = true;
                    _iteratorError = err;
                } finally {
                    try {
                        if (!_iteratorNormalCompletion && _iterator['return']) {
                            _iterator['return']();
                        }
                    } finally {
                        if (_didIteratorError) {
                            throw _iteratorError;
                        }
                    }
                }
            }

            // 日期头部（适用于工作日历）
            var renderDayHeader = h(
                'div',
                { 'class': 'header' },
                [workingDay ? workingDay.isWorking ? h(
                    'span',
                    { 'class': 'working' },
                    ['\u73ED']
                ) : h(
                    'span',
                    { 'class': 'rest' },
                    ['\u4F11']
                ) : null]
            );

            // 日期尾部（适用于节假日）
            var renderDayFooter = h(
                'div',
                { 'class': 'footer' },
                [infoDay ? h('span', {
                    'class': (0, _defineProperty3['default'])({
                        'info-dot': true
                    }, infoDay['class'], infoDay['class']),
                    style: {
                        borderColor: infoDay.color ? infoDay.color : ''
                    }
                }) : null]
            );

            return h(
                'div',
                {
                    'class': {
                        day: true,
                        'day-in-last-month': item.isLastMonth,
                        'day-in-next-month': item.isNextMonth
                    }
                },
                [item.isCurMonth || item.isLastMonth && showLastMonth || item.isNextMonth && showNextMonth ? h(
                    'div',
                    {
                        'class': 'day-pack',
                        on: {
                            'click': function click(event) {
                                return _this5.select(event, k1, k2, item);
                            }
                        }
                    },
                    [h(
                        'div',
                        {
                            'class': {
                                today: item.isToday,
                                active: item.isCurrent,
                                disabled: item.isDisabled
                            }
                        },
                        [h(
                            'div',
                            { 'class': 'day-pack-cell' },
                            [renderDayHeader, h(
                                'div',
                                {
                                    'class': {
                                        middle: true,
                                        isHoliday: item.isHoliday,
                                        hidden: item.dayHide
                                    }
                                },
                                [item.isToday ? '今' : item.day]
                            ), renderDayFooter]
                        )]
                    )]
                ) : null]
            );
        }
    },

    render: function render() {
        var _this6 = this;

        var h = arguments[0];
        var mode = this.mode,
            vertical = this.vertical,
            touchable = this.touchable,
            mouseable = this.mouseable,
            styleHeight = this.styleHeight,
            showMonthSelect = this.showMonthSelect,
            showNoonSelect = this.showNoonSelect,
            swiperList = this.swiperList,
            yearAndMonthList = this.yearAndMonthList,
            times = this.times,
            noons = this.noons,
            showCalender = this.showCalender,
            showTimeSelect = this.showTimeSelect;


        return h(
            'div',
            { 'class': 'sn-datetime-picker-view' },
            [this.renderHeader(), this.renderCalendarWeekday(), h(
                'div',
                { 'class': 'sn-calendar-panel', style: { height: styleHeight } },
                [h(
                    _carousel2['default'],
                    {
                        ref: 'carousel',
                        attrs: { 'show-indicators': false,

                            vertical: vertical,
                            touchable: touchable,
                            mouseable: mouseable,
                            threshold: 0
                        },
                        on: {
                            'change': this.onCalendarChange
                        },
                        directives: [{
                            name: 'show',
                            value: showCalender
                        }],

                        style: { height: styleHeight }
                    },
                    [swiperList.map(function (month) {
                        return h(
                            _carouselItem2['default'],
                            { style: { height: styleHeight } },
                            [h('div', [h(
                                'div',
                                { 'class': 'sn-calendar-date' },
                                [month.year + '-' + month.month_str]
                            ), _this6.renderCalendarMonth(month)])]
                        );
                    })]
                ), h(
                    'div',
                    {
                        'class': {
                            'date-select': true,
                            'single-col': mode === 'year' || mode === 'month'
                        },
                        directives: [{
                            name: 'show',
                            value: showMonthSelect
                        }]
                    },
                    [h(_pickerView2['default'], {
                        ref: 'datePicker',
                        attrs: { visibleItemCount: 7,
                            columns: yearAndMonthList
                        },
                        on: {
                            'change': this.onYearAndMonthChange
                        }
                    })]
                ), h(
                    'div',
                    { 'class': 'time-select', directives: [{
                            name: 'show',
                            value: showTimeSelect
                        }]
                    },
                    [h(_pickerView2['default'], {
                        ref: 'timePicker',
                        attrs: { visibleItemCount: 7,
                            columns: times
                        },
                        on: {
                            'change': this.onTimeChange
                        }
                    })]
                ), h(
                    'div',
                    { 'class': 'ampm-select', directives: [{
                            name: 'show',
                            value: showNoonSelect
                        }]
                    },
                    [h(_pickerView2['default'], {
                        ref: 'noonPicker',
                        attrs: { visibleItemCount: 7,
                            columns: noons
                        },
                        on: {
                            'change': this.onNoonChange
                        }
                    })]
                )]
            )]
        );
    }
};

DateTimePickerView.install = function (Vue) {
    Vue.component(DateTimePickerView.name, DateTimePickerView);
};

exports['default'] = DateTimePickerView;
module.exports = exports.default;