import _defineProperty from 'babel-runtime/helpers/defineProperty';
import PickerView from '../picker-view';
import Popup from '../popup';
import PickerViewMixin from '../mixins/picker-view';
import TransferDom from '../directives/transfer-dom';
import './index.less';

var Picker = {
    name: 'SnPicker',
    mixins: [PickerViewMixin],
    data: function data() {
        return {
            show: false,
            forceUpdate: false
        };
    },

    directives: { TransferDom: TransferDom },
    props: {
        readonly: Boolean,
        value: [String, Number],
        showToolbar: {
            type: Boolean,
            'default': true
        }
    },
    created: function created() {
        this.currentValue = this.value;
    },
    mounted: function mounted() {},

    methods: {
        getDefaultIndex: function getDefaultIndex() {
            var columns = this.columns,
                value = this.value;

            if (columns.length && !columns[0].values) {
                return columns.indexOf(value);
            } else {
                return 0;
            }
        },
        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(picker, value, index) {
            this.$emit('change', picker, value, index);
        },
        onCancel: function onCancel() {
            var _this2 = this;

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

            this.$emit('cancel');
        },
        onConfirm: function onConfirm(picker, value) {
            var _this3 = this;

            if (!this.$listeners['confirm']) {
                this.$emit('input', value);
            }
            this.show = false;
            setTimeout(function () {
                _this3.forceUpdate = false;
            }, 150);

            this.$emit('confirm', picker, value);
        },
        getViewRef: function getViewRef() {
            return this.$refs.PickerViewRef;
        }
    },
    render: function render() {
        var _attrs;

        var h = arguments[0];
        var value = this.value,
            show = this.show,
            showToolbar = this.showToolbar,
            title = this.title,
            cancelButtonText = this.cancelButtonText,
            confirmButtonText = this.confirmButtonText,
            visibleItemCount = this.visibleItemCount,
            columns = this.columns,
            valueKey = this.valueKey,
            itemHeight = this.itemHeight,
            defaultIndex = this.defaultIndex,
            swipeDuration = this.swipeDuration,
            forceUpdate = this.forceUpdate;


        return h(
            'div',
            { 'class': 'sn-picker', on: {
                    'click': this.onClick
                }
            },
            [h(
                'span',
                { 'class': 'sn-picker-value' },
                [value]
            ), h(
                'div',
                {
                    directives: [{
                        name: 'transfer-dom',
                        value: true
                    }]
                },
                [h(
                    Popup,
                    {
                        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-picker-content' },
                        [h(PickerView, {
                            ref: 'PickerViewRef',
                            attrs: (_attrs = { showToolbar: showToolbar,
                                title: title,
                                cancelButtonText: cancelButtonText,
                                confirmButtonText: confirmButtonText,
                                visibleItemCount: visibleItemCount,
                                defaultIndex: this.getDefaultIndex(),
                                columns: columns,
                                valueKey: valueKey,
                                itemHeight: itemHeight
                            }, _defineProperty(_attrs, 'defaultIndex', defaultIndex), _defineProperty(_attrs, 'swipeDuration', swipeDuration), _attrs),
                            on: {
                                'change': this.onChange,
                                'cancel': this.onCancel,
                                'confirm': this.onConfirm
                            }
                        })]
                    ) : null]
                )]
            )]
        );
    }
};

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

export default Picker;