'use strict';

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

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

var _pickerViewColumn2 = _interopRequireDefault(_pickerViewColumn);

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

var _pickerView2 = _interopRequireDefault(_pickerView);

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

var _deepClone = require('../_utils/deep-clone');

require('./index.less');

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

var PickerView = {
    name: 'SnPickView',

    mixins: [_pickerView2['default']],

    data: function data() {
        return {
            children: []
        };
    },


    computed: {
        simple: function simple() {
            return this.columns.length && !this.columns[0].values;
        }
    },

    watch: {
        columns: 'setColumns'
    },

    methods: {
        setColumns: function setColumns() {
            var _this = this;

            var columns = this.simple ? [{ values: this.columns }] : this.columns;
            columns.forEach(function (column, index) {
                _this.setColumnValues(index, (0, _deepClone.deepClone)(column.values));
            });
        },
        emit: function emit(event) {
            if (this.simple) {
                this.$emit(event, this.getColumnValue(0), this.getColumnIndex(0));
            } else {
                this.$emit(event, this.getValues(), this.getIndexes());
            }
        },
        onChange: function onChange(columnIndex) {
            if (this.simple) {
                this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0));
            } else {
                this.$emit('change', this, this.getValues(), columnIndex);
            }
        },


        // get column instance by index
        getColumn: function getColumn(index) {
            return this.children[index];
        },


        // get column value by index
        getColumnValue: function getColumnValue(index) {
            var column = this.getColumn(index);
            return column && column.getValue();
        },


        // set column value by index
        setColumnValue: function setColumnValue(index, value) {
            var column = this.getColumn(index);
            column && column.setValue(value);
        },


        // get column option index by column index
        getColumnIndex: function getColumnIndex(columnIndex) {
            return (this.getColumn(columnIndex) || {}).currentIndex;
        },


        // set column option index by column index
        setColumnIndex: function setColumnIndex(columnIndex, optionIndex) {
            var column = this.getColumn(columnIndex);
            column && column.setIndex(optionIndex);
        },


        // get options of column by index
        getColumnValues: function getColumnValues(index) {
            return (this.children[index] || {}).options;
        },


        // set options of column by index
        setColumnValues: function setColumnValues(index, options) {
            var column = this.children[index];
            if (column && JSON.stringify(column.options) !== JSON.stringify(options)) {
                column.options = options;
                column.setIndex(0);
            }
        },


        // get values of all columns
        getValues: function getValues() {
            return this.children.map(function (child) {
                return child.getValue();
            });
        },


        // set values of all columns
        setValues: function setValues(values) {
            var _this2 = this;

            values.forEach(function (value, index) {
                _this2.setColumnValue(index, value);
            });
        },


        // get indexes of all columns
        getIndexes: function getIndexes() {
            return this.children.map(function (child) {
                return child.currentIndex;
            });
        },


        // set indexes of all columns
        setIndexes: function setIndexes(indexes) {
            var _this3 = this;

            indexes.forEach(function (optionIndex, columnIndex) {
                _this3.setColumnIndex(columnIndex, optionIndex);
            });
        },
        onConfirm: function onConfirm() {
            this.children.map(function (child) {
                return child.stopMomentum();
            });
            if (this.simple) {
                this.$emit('confirm', this, this.getColumnValue(0));
            } else {
                this.$emit('confirm', this, this.getValues());
            }
        },
        onCancel: function onCancel() {
            this.emit('cancel');
        }
    },

    render: function render(h) {
        var _this4 = this;

        var toolbarPosition = this.toolbarPosition,
            showToolbar = this.showToolbar,
            cancelButtonText = this.cancelButtonText,
            confirmButtonText = this.confirmButtonText,
            itemHeight = this.itemHeight,
            $slots = this.$slots;

        var wrapHeight = itemHeight * this.visibleItemCount;
        var columns = this.simple ? [this.columns] : this.columns;

        var frameStyle = {
            height: itemHeight + 'px'
        };

        var columnsStyle = {
            height: wrapHeight + 'px'
        };

        var maskStyle = {
            backgroundSize: '100% ' + (wrapHeight - itemHeight) / 2 + 'px'
        };

        var Toolbar = showToolbar && h(
            'div',
            { 'class': 'sn-picker-view-toolbar' },
            [h(
                'button',
                { 'class': 'sn-picker-view-cancel', on: {
                        'click': this.onCancel
                    }
                },
                [cancelButtonText]
            ), $slots.title ? $slots.title : this.title && h(
                'div',
                { 'class': 'sn-ellipsis sn-picker-view-title' },
                [this.title]
            ), h(
                'button',
                { 'class': 'sn-picker-view-confirm', on: {
                        'click': this.onConfirm
                    }
                },
                [confirmButtonText]
            )]
        );

        return h(
            'div',
            { 'class': 'sn-picker-view' },
            [toolbarPosition === 'top' ? Toolbar : null, $slots['columns-top'], h(
                'div',
                {
                    'class': 'sn-picker-view-columns',
                    style: columnsStyle,
                    on: {
                        'touchmove': _event.preventDefault
                    }
                },
                [columns.map(function (item, index) {
                    return h(_pickerViewColumn2['default'], {
                        attrs: {
                            valueKey: _this4.valueKey,
                            allowHtml: _this4.allowHtml,
                            className: 'sn-picker-view-column',
                            itemHeight: _this4.itemHeight,
                            defaultIndex: item.defaultIndex || _this4.defaultIndex,
                            swipeDuration: _this4.swipeDuration,
                            visibleItemCount: _this4.visibleItemCount,
                            initialOptions: _this4.simple ? item : item.values
                        },
                        on: {
                            'change': function change() {
                                _this4.onChange(index);
                            }
                        }
                    });
                }), h('div', { 'class': 'sn-picker-view-mask', style: maskStyle }), h('div', { 'class': 'sn-picker-view-frame', style: frameStyle })]
            ), $slots['columns-bottom']]
        );
    }
};

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

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