<!-- webview only -->
<template>
    <section class="b-input">
        <div class="b-input-wrapper">
            <div
                v-if="inputValue.length == 0"
                :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' : ''"
                @keyup="changeEvent"
                @focus="focusEvent"
                @blur="blurEvent"
            />
            </div>
    </section>
</template>
<script>

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
        };
    },
    watch: {
        value() {
            this.inputValue = this.value.length > this.maxlength ? this.value.slice(0, this.maxlength) : this.value;
        }
    },
    methods: {
        clickOnPlaceholder() {
            this.$refs.bInput.focus();
        },
        changeEvent($event) {
            this.$emit('input', {
                detail: {
                    value: $event.target.value,
                    cursor: $event.srcElement.selectionStart,
                    keyCode: $event.keyCode
                }
            });
        },
        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);

            this.$emit('focus', {
                detail: {
                    value
                }
            });
        },
        blurEvent($event) {
            this.$emit('blur', {
                detail: {
                    value: $event.target.value
                }
            });
        }
    }
};
</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;
    font-size: inherit;
    background: transparent;
}
</style>