<template>
    <div :class="classes">
        <input 
            ref="input"
            v-if="type != 'textarea'"
            v-model="query"
            autocomplete="off"
            spellcheck="false"
            :type="type"
            :disabled="disabled"
            :readonly="readonly"
            :placeholder="placeholder"
            :maxlength="maxlength"
            @focus="handleDispatch($event, 'focus')"
            @blur="handleDispatch($event, 'blur')"
            @compositionstart="handleComposition"
            @compositionupdate="handleComposition"
            @compositionend="handleComposition"
            @input="handleInput"/>
        <textarea 
            ref="textarea"
            v-else
            v-model="query"
            autocomplete="off"
            spellcheck="false"
            :type="type"
            :disabled="disabled"
            :readonly="readonly"
            :placeholder="placeholder"
            :maxlength="maxlength"
            :rows="rows"
            @focus="handleDispatch($event, 'focus')"
            @blur="handleDispatch($event, 'blur')"
            @compositionstart="handleComposition"
            @compositionupdate="handleComposition"
            @compositionend="handleComposition"
            @input="handleInput"/>
        <div :class="`${prefixCls}-bar`" @click="handleClick">
            {{t('multilingual')}}
            <span :class="`${prefixCls}-icon`">
                <Icon type="arrow-up" v-if="visible"/>
                <Icon type="arrow-down" v-else/>
            </span>
        </div>
    </div>
</template>
<script>
    import Icon from '../icon/'
    import Input from '../input/'
    import Emitter from '../../../mixins/emitter'
    import { findComponentUpward, oneOf} from '../../../utils/assist'
    import Locale from '../../../mixins/locale'

    const prefixCls = 'yy-input-multilang-selection'
    export default {
        name: 'YYInputMultiLangHead',
        mixins: [ Emitter, Locale ],
        components: {
            Icon,
            Input
        },
        props: {
            value: {
                type: [String, Number],
                default: ''
            },
            size: {
                validator(value) {
                    return oneOf(value, ['small', 'large'])
                }
            },
            type: {
                type: String,
                default: 'text'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            readonly: {
                type: Boolean,
                default: false
            },
            isFocused: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String
            },
            maxlength: {
                type: Number
            },
            rows: {
                type: Number,
                default: 4
            },
            zhDblLength: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                query: this.value,
                isOnComposition: false
            }
        },
        computed: {
            classes() {
                return [
                    prefixCls,
                    {
                        [`${prefixCls}-disabled`]: this.disabled,
                        [`${prefixCls}-readonly`]: this.readonly,
                        [`${prefixCls}-focus`]: this.isFocused,
                        [`${prefixCls}-${this.size}`]: !!this.size
                    }
                ]
            },
            visible() {
                return findComponentUpward(this, 'YYInputMultiLang').dropVisible
            },
            maxLen() {
                return 0;
            }
        },
        watch: {
            value(newValue) {
                this.query = newValue
            }
        },
        methods: {
            handleDispatch(event, type) { // 分发父级method
                this.$emit(`on-${type}`, event)
            },
            handleClick(event) {
                if(this.disabled || this.readonly) return
                this.$emit('click')
            },
            handleComposition(event) {
                if (event.type === 'compositionstart') {
                    this.isOnComposition = true
                }
                if (event.type === 'compositionend') {
                    this.isOnComposition = false
                    this.handleInput(event)
                }
            },
            handleInput(event) {
                if (this.isOnComposition) return

                let value = event.target.value
                if (this.zhDblLength) {
                    const endIndex = this.computedLen(value)
                    if (endIndex != -1) {
                        value = value.substring(0, endIndex)
                        this.query = value
                    }
                }
                // this.$emit('input', value)
                this.$emit('on-change', value)
            },
            focus() {
                if(this.type === 'textarea') {
                    this.$refs.textarea.focus()
                } else {
                    this.$refs.input.focus()
                }
            },
            blur() {
                if(this.type === 'textarea') {
                    this.$refs.textarea.blur()
                } else {
                    this.$refs.input.blur()
                }
            },
            computedLen(value = '') {
                let len = 0
                for (let i = 0;i < value.length;i ++) {
                    if (value.charCodeAt(i) > 255) len += 2
                    else len += 1
                    if (len > this.maxlength) return i
                }
                return -1
            }
        }
    }
</script>
