'use strict';

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

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

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

var _button2 = _interopRequireDefault(_button);

var _classnames = require('../_utils/classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _commonUtil = require('../utils/commonUtil');

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

var Modal = {
    name: 'SnModal',

    mixins: [_popup.PopupMixin],

    props: {
        title: String,
        width: [Number, String],
        message: String,
        className: null,
        callback: Function,
        beforeClose: Function,
        messageAlign: {
            type: String,
            validator: function validator(value) {
                return ['left', 'right'].indexOf(value) > -1;
            }
        },
        cancelButtonText: {
            type: String,
            'default': '取消'
        },
        cancelButtonColor: String,
        confirmButtonText: {
            type: String,
            'default': '确认'
        },
        confirmButtonColor: String,
        showCancelButton: Boolean,
        transition: {
            type: String,
            'default': 'sn-modal-bounce'
        },
        showConfirmButton: {
            type: Boolean,
            'default': true
        },
        overlay: {
            type: Boolean,
            'default': true
        },
        closeOnClickOverlay: {
            type: Boolean,
            'default': false
        }
    },

    data: function data() {
        return {
            currentValue: null,
            loading: {
                confirm: false,
                cancel: false
            },
            height: null,
            multiLine: false
        };
    },


    watch: {
        value: function value(val) {
            var _this = this;

            if (val) {
                var activeTagName = window.activeTagName || '';

                if (!(0, _commonUtil.isPC)() && activeTagName.toUpperCase() === 'INPUT' || activeTagName.toUpperCase() === 'TEXTAREA') {
                    setTimeout(function () {
                        _this.currentValue = true;
                    }, 500);
                } else {
                    this.currentValue = true;
                }
            } else {
                this.currentValue = false;
            }
        },
        message: function message() {
            var _this2 = this;

            this.$nextTick(function () {
                var $message = _this2.$refs.message;
                if ($message && $message instanceof HTMLElement) {
                    var height = parseInt(window.getComputedStyle($message).height);
                    _this2.multiLine = height > 30;

                    _this2.updateModal();
                }
            });
        }
    },

    created: function created() {
        this.currentValue = this.value;
    },


    methods: {
        onClickOverlay: function onClickOverlay() {
            this.handleAction('overlay');
        },
        handleAction: function handleAction(action) {
            var _this3 = this;

            this.$emit(action);

            if (this.beforeClose) {
                this.loading[action] = true;
                this.beforeClose(action, function (state) {
                    if (state !== false && _this3.loading[action]) {
                        _this3.onCloseAction(action);
                    }

                    _this3.loading.confirm = false;
                    _this3.loading.cancel = false;
                });
            } else {
                this.onCloseAction(action);
            }
        },
        updateModal: function updateModal() {
            var _this4 = this;

            this.$nextTick(function () {
                var $modal = _this4.$refs.modal;
                if ($modal && $modal instanceof HTMLElement) {
                    var height = parseInt(window.getComputedStyle($modal).height);
                    if (height % 2 === 1) height++;
                    _this4.height = height + 'px';
                }
            });
        },
        onCloseAction: function onCloseAction(action) {
            this.close();

            if (this.callback) {
                this.callback(action);
            }
        },
        onOpen: function onOpen() {
            this.$emit('open');
        },
        onOpened: function onOpened() {
            (0, _commonUtil.isPC)() && this.updateModal();
            this.$emit('opened');
        },
        onClose: function onClose() {
            var $modal = this.$refs.modal;
            $modal.style.height = '';
            this.$emit('close');
        },
        onClosed: function onClosed() {
            this.height = null;
            this.$emit('closed');
        }
    },

    render: function render() {
        var _ref,
            _this5 = this;

        var h = arguments[0];

        if (!this.shouldRender) {
            return;
        }

        var currentValue = this.currentValue,
            width = this.width,
            height = this.height,
            className = this.className,
            message = this.message,
            messageAlign = this.messageAlign,
            confirmButtonText = this.confirmButtonText,
            multiLine = this.multiLine,
            $slots = this.$slots;

        var title = $slots['title'] || this.title;
        var messageSlot = $slots['default'];

        var Title = title && h(
            'div',
            {
                'class': {
                    'sn-modal-header': true,
                    'sn-modal-header-content': messageSlot || message
                }
            },
            [title]
        );

        var Content = (messageSlot || message) && h(
            'div',
            { 'class': 'sn-modal-content' },
            [messageSlot || h(
                'div',
                {
                    ref: 'message',
                    'class': (_ref = {
                        'sn-modal-message': true
                    }, (0, _defineProperty3['default'])(_ref, 'sn-modal-message-' + messageAlign, messageAlign), (0, _defineProperty3['default'])(_ref, 'sn-modal-message-left', multiLine), _ref)
                },
                [message]
            )]
        );

        var hasButtons = this.showCancelButton && this.showConfirmButton;
        var ButtonGroup = h(
            'div',
            {
                'class': {
                    'sn-modal-footer': true,
                    'sn-modal-footer-button-group': hasButtons
                }
            },
            [this.showCancelButton && h(
                _button2['default'],
                {
                    attrs: {
                        shape: 'square',

                        loading: this.loading.cancel
                    },
                    'class': 'sn-modal-footer-cancel', style: { color: this.cancelButtonColor },
                    on: {
                        'click': function click() {
                            return _this5.handleAction('cancel');
                        }
                    }
                },
                [this.cancelButtonText]
            ), this.showConfirmButton && h(
                _button2['default'],
                {
                    attrs: {
                        shape: 'square',

                        loading: this.loading.confirm
                    },
                    'class': 'sn-modal-footer-confirm', style: { color: this.confirmButtonColor },
                    on: {
                        'click': function click() {
                            return _this5.handleAction('confirm');
                        }
                    }
                },
                [confirmButtonText]
            )]
        );

        return h(
            'transition',
            {
                attrs: {
                    name: this.transition
                },
                on: {
                    'beforeEnter': this.onOpen,
                    'afterEnter': this.onOpened,
                    'beforeLeave': this.onClose,
                    'afterLeave': this.onClosed
                }
            },
            [h(
                'div',
                {
                    ref: 'modal',
                    directives: [{
                        name: 'show',
                        value: currentValue
                    }],
                    attrs: {
                        role: 'modal'
                    },
                    'class': (0, _classnames2['default'])('sn-modal', className),
                    style: { width: width, height: height }
                },
                [Title, Content, ButtonGroup]
            )]
        );
    }
};

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

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