<!-- webview only --><!-- slot -->
<template>
    <section class="bl___picker" @click.capture="showPicker">
        <slot></slot>
    </section>
</template>

<script>
export default {
    name: 'Picker',
    props: {
        mode: {
            type: String,
            default: 'selector',
            validator(value) {
                return ['selector', 'multiSelector', 'time', 'date', 'region'].indexOf(value) >= 0;
            }
        },
        range: {
            type: Array,
            default() {
                return []
            }
        },
        rangeKey: {
            type: String,
            default: '',
        },
        value: {
            type: [Number, Array, String],
            default: 0
        },
        start: {
            type: String,
            default: '',
        },
        end: {
            type: String,
            default: '',
        },
        fields: {
            type: String,
            default: 'day',
        },
        customItem: {
            type: String,
            default: '全部'
        },
        disabled: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            nativeValue: null,
            showing: false
        };
    },
    computed: {
        rangeToNative() {
            switch (this.mode) {
                case 'selector': {
                    if (this.rangeKey) {
                        return this.range.map(item => Object(item)[this.rangeKey] + '');
                    }

                    return this.range.map(item => item + '');
                }

                case 'multiSelector': {
                    if (this.rangeKey) {
                        return this.range.map(first => {
                            return Array.from(first).map(item => Object(item)[this.rangeKey] + '');
                        });
                    }

                    return this.range.map(first => Array.from(first).map(item => item + ''));
                }

                default: {
                    return [];
                }
            }
        }
    },
    mounted() {
        this.nativeValue = this.value;

        ['range', 'value', 'customItem'].forEach(prop => {
            this.$watch(prop, (value) => {
                // 值的更新
                if (prop === 'value') {
                    this.nativeValue = this.value;

                    // 这三种情况不发送更新消息到NA
                    if (this.mode === 'date' || this.mode === 'time' || this.mode === 'region') return;
                }

                // 不显示的时候不触发更新
                if (!this.showing) return;

                this.setupOptions();
            });
        });
    },
    methods: {
        handleMessage(message) {
            if (message.type === 'native-component') {
                this.$emit(message.event.type, message.event);

                switch (message.event.type) {
                    case 'columnchange': {
                        // 更新本地值
                        if (!Array.isArray(this.nativeValue)) {
                            this.nativeValue = this.range.map(() => 0);
                        }

                        this.nativeValue[message.event.detail.column] = message.event.detail.value;
                        break;
                    }

                    case 'change': {
                        this.nativeValue = message.event.detail.value;
                        this.showing = false;
                        break;
                    }

                    case 'cancel': {
                        this.showing = false;
                        break;
                    }
                }
            }
        },
        setupOptions() {
            let options = {
                mode: this.mode
            };

            switch (this.mode) {
                case 'selector': {
                    options.value = isNaN(parseInt(this.nativeValue)) ? 0 : parseInt(this.nativeValue);
                    options.range = this.rangeToNative;
                    options.disabled = this.disabled;
                    break;
                }

                case 'multiSelector': {
                    options.value = Array.isArray(this.nativeValue) ? this.nativeValue.map(val => isNaN(parseInt(val)) ? 0 : parseInt(val)) : [];
                    options.range = this.rangeToNative;
                    options.disabled = this.disabled;
                    break;
                }

                case 'time': {
                    options.value = /^\d{1,2}:\d{1,2}$/.test(this.nativeValue) ? this.nativeValue : '00:00';
                    options.start = /^\d{1,2}:\d{1,2}$/.test(this.start) ? this.start : '';
                    options.end = /^\d{1,2}:\d{1,2}$/.test(this.end) ? this.end : '';
                    options.disabled = this.disabled;
                    break;
                }

                case 'date': {
                    options.value = /^\d+(-\d{1,2}){0,2}$/.test(this.nativeValue) ? this.nativeValue : '';
                    options.start = /^\d+(-\d{1,2}){0,2}$/.test(this.start) ? this.start : '';
                    options.end = /^\d+(-\d{1,2}){0,2}$/.test(this.end) ? this.end : '';
                    options.fields = this.fields;
                    options.disabled = this.disabled;
                    break;
                }

                case 'region': {
                    let val = Array.isArray(this.nativeValue) ? this.nativeValue : ['', '', ''];
                    if (val.length >= 3) {
                        val = val.slice(0, 3);
                    } else {
                        for (let i = 0; i < 3 - val.length; i++) {
                            val.push('');
                        }
                    }
                    options.value = val;
                    options.customItem = this.customItem;
                    options.disabled = this.disabled;
                    break;
                }
            }
            let setup = Object.assign({}, {
                name: 'show-picker',
                destroy: false,
            }, options);
            
            window.pickerComponent = this;

            SmallApp.nativeComponent(setup);
        },
        showPicker(e) {
            if (this.disabled) return;

            this.$emit('click', e);

            this.setupOptions();

            this.showing = true;
        }
    }
}
</script>

<style>
</style>
