'use strict';

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

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

var _datetimePickerView2 = _interopRequireDefault(_datetimePickerView);

var _popup = require('../popup');

var _popup2 = _interopRequireDefault(_popup);

var _transferDom = require('../directives/transfer-dom');

var _transferDom2 = _interopRequireDefault(_transferDom);

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

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

require('./index.less');

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

var DatetimePicker = {
    name: 'SnDatetimePicker',
    data: function data() {
        return {
            show: false,
            forceUpdate: false,
            currentValue: ''
        };
    },

    directives: { TransferDom: _transferDom2['default'] },
    props: {
        value: [String, Number, Array, Date],
        readonly: Boolean,
        mode: {
            type: String,
            'default': 'date'
        },
        displayFormat: {
            type: String,
            'default': 'YYYY/MM/DD'
        },
        disabledDate: Function,
        vertical: {
            type: Boolean,
            'default': true
        },
        minuteStep: [String, Number],
        placeholder: String,
        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,
        beforeOpen: Function
    },
    computed: {
        formatValue: function formatValue() {
            var mode = this.mode,
                currentValue = this.currentValue,
                use12Hours = this.use12Hours,
                noon = this.noon;


            if (!currentValue) return '';

            if (mode === 'date') {
                if (use12Hours) {
                    return (0, _dateUtil.dateFormat)(currentValue, this.displayFormat) + ' ' + noon;
                } else {
                    return (0, _dateUtil.dateFormat)(currentValue, this.displayFormat);
                }
            } else if (mode === 'datetime') {
                if (this.displayFormat.indexOf('HH:mm') > 0) {
                    return (0, _dateUtil.dateFormat)(currentValue, this.displayFormat);
                } else {
                    return (0, _dateUtil.dateFormat)(currentValue, this.displayFormat + ' HH:mm');
                }
            } else if (mode === 'year-month') {
                if (Array.isArray(currentValue)) {
                    if (currentValue.length === 0) {
                        return (0, _numberUtil.zeroComplete)(new Date().getFullYear()) + '-' + (0, _numberUtil.zeroComplete)(new Date().getMonth() + 1);
                    } else if (currentValue.length === 1) {
                        return (0, _numberUtil.zeroComplete)(currentValue[0]) + '-' + (0, _numberUtil.zeroComplete)(new Date().getMonth() + 1);
                    } else if (currentValue.length === 2) {
                        return (0, _numberUtil.zeroComplete)(currentValue[0]) + '-' + (0, _numberUtil.zeroComplete)(currentValue[1]);
                    } else {
                        console.error("[sinosun-ui] DatetimePicker 'year-month'模式下参数最多为2个的数组");
                    }
                } else {
                    console.error("[sinosun-ui] DatetimePicker 'year-month'模式下参数只能为数组");
                }
            } else if (mode === 'year' || mode === 'month') {
                if (Array.isArray(currentValue)) {
                    if (currentValue.length === 1) {
                        return '' + (0, _numberUtil.zeroComplete)(currentValue[0]);
                    } else {
                        console.error("[sinosun-ui] DatetimePicker 'year-month'模式下参数只能为包含1个或2个的数组");
                    }
                } else {
                    console.error("[sinosun-ui] DatetimePicker 'year'或者'month'模式下参数只能为数组");
                }
            } else if (mode === 'time') {
                if (Array.isArray(currentValue)) {
                    if (currentValue.length === 1) {
                        return (0, _numberUtil.zeroComplete)(currentValue[0]) + ':' + (0, _numberUtil.zeroComplete)(new Date().getMinutes());
                    } else if (currentValue.length === 2) {
                        return (0, _numberUtil.zeroComplete)(currentValue[0]) + ':' + (0, _numberUtil.zeroComplete)(currentValue[1]);
                    } else {
                        console.error("[sinosun-ui] DatetimePicker 'time'模式下参数只能为包含1个或2个的数组");
                    }
                } else {
                    console.error("[sinosun-ui] DatetimePicker 'time'模式下参数只能为数组");
                }
            } else {
                console.error("[sinosun-ui] DatetimePicker 'mode'模式不是有效模式");
            }
        }
    },
    created: function created() {
        this.currentValue = this.value;
    },
    mounted: function mounted() {},

    methods: {
        onInput: function onInput(val) {
            this.show = val;
        },
        onViewInput: function onViewInput() {
            var _this = this;

            this.show = false;
            setTimeout(function () {
                _this.forceUpdate = false;
            }, 150);

            for (var _len = arguments.length, val = Array(_len), _key = 0; _key < _len; _key++) {
                val[_key] = arguments[_key];
            }

            if (this.$listeners['change']) {
                this.$emit.apply(this, ['change'].concat((0, _toConsumableArray3['default'])(val)));
            } else {
                this.$emit.apply(this, ['input'].concat((0, _toConsumableArray3['default'])(val)));
            }
        },
        onOpen: function onOpen() {
            this.$emit('open');
        },
        onOpened: function onOpened() {
            this.$emit('opened');
        },
        onClose: function onClose() {
            this.$emit('close');
        },
        onClosed: function onClosed() {
            this.$emit('closed');
        },
        onClickOverlay: function onClickOverlay() {
            var _this2 = this;

            this.show = false;
            this.$emit('click-overlay');

            setTimeout(function () {
                _this2.forceUpdate = false;
            }, 150);
        },
        onClick: function onClick() {
            var _this3 = this;

            if (!this.readonly) {
                var invokeOpen = function invokeOpen() {
                    _this3.show = true;
                    _this3.forceUpdate = true;
                };
                if (typeof this.beforeOpen === 'function') {
                    this.beforeOpen(invokeOpen);
                } else {
                    invokeOpen();
                }
            }
        },
        onChange: function onChange() {
            for (var _len2 = arguments.length, val = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
                val[_key2] = arguments[_key2];
            }

            this.$emit.apply(this, ['value-change'].concat((0, _toConsumableArray3['default'])(val)));
        }
    },
    watch: {
        value: function value(newVal, oldVal) {
            this.currentValue = newVal;
        }
    },
    render: function render() {
        var h = arguments[0];
        var currentValue = this.currentValue,
            formatValue = this.formatValue,
            forceUpdate = this.forceUpdate,
            show = this.show,
            mode = this.mode,
            disabledDate = this.disabledDate,
            vertical = this.vertical,
            minuteStep = this.minuteStep,
            use12Hours = this.use12Hours,
            noon = this.noon,
            panelTitleFormat = this.panelTitleFormat,
            rangeHours = this.rangeHours,
            rangeMinutes = this.rangeMinutes;

        return h(
            'div',
            { 'class': 'sn-datetime-picker', on: {
                    'click': this.onClick
                }
            },
            [formatValue ? h(
                'span',
                { 'class': 'sn-datetime-picker-value' },
                [formatValue]
            ) : h(
                'span',
                { 'class': 'sn-datetime-picker-placeholder' },
                [this.placeholder || '请选择']
            ), h(
                'div',
                {
                    directives: [{
                        name: 'transfer-dom',
                        value: true
                    }]
                },
                [h(
                    _popup2['default'],
                    {
                        attrs: {
                            value: show
                        },
                        on: {
                            'input': this.onInput,
                            'open': this.onOpen,
                            'opened': this.onOpened,
                            'close': this.onClose,
                            'closed': this.onClosed,
                            'click-overlay': this.onClickOverlay
                        },

                        style: 'background: transparent;'
                    },
                    [forceUpdate ? h(
                        'div',
                        { 'class': 'sn-datetime-picker-content' },
                        [h(_datetimePickerView2['default'], {
                            attrs: {
                                value: currentValue,
                                mode: mode,
                                disabledDate: disabledDate,
                                vertical: vertical,
                                minuteStep: minuteStep,
                                use12Hours: use12Hours,
                                noon: noon,
                                panelTitleFormat: panelTitleFormat,
                                rangeHours: rangeHours,
                                rangeMinutes: rangeMinutes
                            },
                            on: {
                                'input': this.onViewInput,
                                'change': this.onChange
                            }
                        })]
                    ) : null]
                )]
            )]
        );
    }
};

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

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