<!-- webview only -->
<template>
    <section class="b-input">
        <div class="b-input-wrapper">
            <div
                v-if="!inputValue"
                :class="['b-input-placeholder', placeholderClass]"
                :style="placeholderStyle" 
                @click="clickOnPlaceholder"
            >{{placeholder}}</div>
            <input
                ref="bInput"
                v-model="inputValue"
                :type="password ? 'password' : 'text'" 
                :disabled="disabled"
                :maxlength="maxlength"
                :autofocus="focus ? 'autofocus' : false"
                @keydown="keyDownEvent"
                @keyup.enter="enterEvent"
                @input="changeEvent"
                @focus="focusEvent"
                @blur="blurEvent"
            />
            </div>
    </section>
</template>
<script>
const parseDataset = function(dataset) {
    let result = {};
    for (let key in dataset) {
        try {
            result[key] = JSON.parse(dataset[key]);
        } catch (e) {
            result[key] = dataset[key];
        }
    }
    return result;
};

export default {
    name: 'Bili_Input',
    props: {
        value: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: 'text',
        },
        password: {
            type: Boolean,
            default: false,
        },
        placeholder: {
            type: String,
            default: '',
        },
        placeholderStyle: {
            type: String,
            default: '',
        },
        placeholderClass: {
            type: String,
            default: 'input-placeholder',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        maxlength: {
            type: Number,
            default: 140,
        },
        cursorSpacing: {
            type: Number,
            default: 0,
        },
        focus: {
            type: Boolean,
            default: false,
        },
        confirmType: {
            type: String,
            default: 'done',
        },
        confirmHold: {
            type: Boolean,
            default: false,
        },
        cursor: {
            type: Number,
            default: -1,
        },
        selectionStart: {
            type: Number,
            default: -1,
        },
        selectionEnd: {
            type: Number,
            default: -1,
        },
        adjustPosition: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            inputValue: this.value,
            keyCode: -1
        };
    },
    watch: {
        value() {
            this.inputValue = (this.value ? this.value.length : 0) > this.maxlength ? this.value.slice(0, this.maxlength) : this.value;
        }
    },
    methods: {
        clickOnPlaceholder() {
            this.$refs.bInput.focus();
        },
        changeEvent($event) {
            const elementInfo = { id: $event.target.id, dataset: parseDataset($event.target.dataset) };
            
            this.$emit('input', {
                type: 'input',
                detail: {
                    value: $event.target.value,
                    cursor: $event.srcElement.selectionStart,
                    keyCode: this.keyCode
                },
                target: elementInfo,
                currentTarget: elementInfo
            });
        },
        focusEvent($event) {
            const value = $event.target.value;
            let start = value.length,
                end = value.length;

            if (this.selectionStart !== -1 && this.selectionEnd !== -1) {
                start = this.selectionStart;
                end = this.selectionEnd;
            } else if (this.cursor !== -1) {
                start = end = this.cursor;
            }
            $event.srcElement.setSelectionRange(start, end);

            const elementInfo = { id: $event.target.id, dataset: parseDataset($event.target.dataset) };

            this.$emit('focus', {
                type: 'focus',
                detail: {
                    value,
                    height: 0
                },
                target: elementInfo,
                currentTarget: elementInfo
            });
        },
        blurEvent($event) {
            const elementInfo = { id: $event.target.id, dataset: parseDataset($event.target.dataset) };
            this.$emit('blur', {
                type: 'blur',
                detail: {
                    value: $event.target.value
                },
                target: elementInfo,
                currentTarget: elementInfo
            });
        },
        keyDownEvent($event) {
            this.keyCode = $event.keyCode;
            if (this.type === 'number' && $event.key !=='Backspace' && isNaN(parseInt($event.key, 10))) {
                $event.returnValue = false;
            }
        },
        enterEvent($event) {
            const elementInfo = { id: $event.target.id, dataset: parseDataset($event.target.dataset) };
            this.$emit('confirm', {
                type: 'confirm',
                detail: {
                    value: $event.target.value
                },
                target: elementInfo,
                currentTarget: elementInfo
            });
        }
    }
};
</script>
<style>
.b-input-wrapper {
    position: relative;
    height: 100%;
    font-size: 16px;
}
.b-input-wrapper .b-input-placeholder {
    color: #808080;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 1;
    display: flex;
    align-items: center;
}
.b-input-wrapper input {
    width: 100%;
    height: 100%;
    cursor: auto;
    display: block;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    background: transparent;
    font: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-stretch: inherit;
    font-size-adjust: inherit;
    color: inherit;
    text-align: inherit;
    line-height: inherit;
    text-indent: inherit;
    word-spacing: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    direction: inherit;
    text-shadow: inherit;
}
</style>