'use strict';

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

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

var _rangePickerView2 = _interopRequireDefault(_rangePickerView);

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

var _popup2 = _interopRequireDefault(_popup);

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

var _transferDom2 = _interopRequireDefault(_transferDom);

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

require('./index.less');

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

var RangePicker = {
    name: 'SnRangePicker',

    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'
        },
        separator: {
            type: String,
            'default': '-'
        },
        disabledDate: Function
    },
    computed: {
        formatValue: function formatValue() {
            var currentValue = this.currentValue,
                separator = this.separator;

            return (0, _dateUtil.dateFormat)(new Date(currentValue[0]), 'YYYY/MM/DD') + ' ' + separator + ' ' + (0, _dateUtil.dateFormat)(new Date(currentValue[1]), 'YYYY/MM/DD');
        }
    },
    created: function created() {
        this.currentValue = this.value || new Date();
    },
    mounted: function mounted() {},

    methods: {
        onInput: function onInput(val) {
            this.show = 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 _this = this;

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

            setTimeout(function () {
                _this.forceUpdate = false;
            }, 150);
        },
        onClick: function onClick() {
            if (!this.readonly) {
                this.show = true;
                this.forceUpdate = true;
            }
        },
        onChange: function onChange(val) {
            var _this2 = this;

            if (!this.$listeners['change']) {
                this.$emit('input', val);
            }

            this.show = false;
            setTimeout(function () {
                _this2.forceUpdate = false;
            }, 150);
            this.$emit('change', 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,
            disabledDate = this.disabledDate;


        return h(
            'div',
            { 'class': 'sn-range-picker', on: {
                    'click': this.onClick
                }
            },
            [h(
                'span',
                { 'class': 'sn-range-picker-value' },
                [formatValue]
            ), 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-range-picker-content' },
                        [h(_rangePickerView2['default'], {
                            attrs: {
                                value: currentValue,
                                disabledDate: disabledDate
                            },
                            on: {
                                'change': this.onChange
                            }
                        })]
                    ) : null]
                )]
            )]
        );
    }
};

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

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