
<template>
    <div
        :class="classes"
        v-click-outside.capture="handleCloseDrop"
        v-click-outside:mousedown.capture="handleCloseDrop">
        <div ref="reference">
            <InputMultiLangHead 
                ref="input"
                v-model="values[langType]"
                :type="type"
                :clearable="clearable"
                :disabled="disabled"
                :readonly="readonly"
                :size="size"
                :isFocused="isFocused"
                :placeholder="placeholder"
                :maxlength="maxlength"
                :zhDblLength="zhDblLength"
                :rows="rows"
                @on-focus="handleDispatch($event, 'focus')"
                @on-blur="handleDispatch($event, 'blur')"
                @on-change="handleChange"
                @click="handleToggleDrop"/>
        </div>
        <transition name="transition-drop">
            <Dropdown 
                ref="dropdown"
                v-show="dropVisible">
                <InputMultiLangDrop 
                    v-model="values"
                    :labelWidth="labelWidth"
                    :type="type"
                    :lang="langType"
                    :clearable="clearable"
                    :maxlength="maxlength"
                    :multiTypes="multiTypes"
                    :zhDblLength="zhDblLength"
                    :hideLangCheckbox="hideLangCheckbox"
                    @on-cancel="handleCancel"
                    @on-ok="handleOk"/>
            </Dropdown>
        </transition>
    </div>
</template>
<script>
    import Dropdown from '../select/dropdown'
    import InputMultiLangHead from './input-multilang-head'
    import InputMultiLangDrop from './input-multilang-drop'
    import ClickOutside from '../../../directives/clickoutside'
    import Emitter from '../../../mixins/emitter'
    import Locale from '../../../mixins/locale'
    import { deepCopy, oneOf } from '../../../utils/assist'
    import { getLang, t } from '../../../locale/'
    const prefixCls = 'yy-input-multilang'

    function actualEquals(obj1, obj2) {
        if (typeof obj1 === 'object' && typeof obj2 === 'object') {
            return Object.keys(obj1).every(k => {
                return actualEquals(obj1[k], obj2[k])
            })
        } else if (typeof obj1 !== 'object' && typeof obj2 !== 'object') return obj1 === obj2
        return false
    }

    export default {
        name: 'YYInputMultiLang',
        mixins: [Emitter, Locale],
        components: {
            Dropdown,
            InputMultiLangHead,
            InputMultiLangDrop
        },
        directives: {
            ClickOutside
        },
        props: {
            value: {
                type: [String, Object],
                default: () => {
                    return {
                        zhs: '',
                        zht: '',
                        en: ''
                    }
                }
            },
            type: {
                validator(value) {
                    return oneOf(value, ['text', 'textarea'])
                },
                default: 'text'
            },
            size: {
                validator(value) {
                    return oneOf(value, ['small', 'large'])
                }
            },
            lang: {
                type: String,
                default: getLang()
            },
            maxlength: {
                type: Number
            },
            disabled: {
                type: Boolean,
                default: false
            },
            readonly: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: () => {
                    return t('enterTheContent')
                }
            },
            rows: {
                type: Number,
                default: 4
            },
            multiTypes: {
                type: Array,
                default: () => {
                    return ['zhs', 'zht', 'en']
                }
            },
            zhDblLength: {
                type: Boolean,
                default: false
            },
            hideLangCheckbox: {
                type: Boolean,
                default: false
            },
            labelWidth: {
                type: Number,
                default: 60
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                slotOptions: this.$slots.default,
                dropVisible: false,
                filterQueryChange: false,
                query: '',
                isFocused: false,
                values: deepCopy(this.value),
                langType: ''
            }
        },
        computed: {
            classes() {
                return [
                    `${prefixCls}`,
                    {
                        [`${prefixCls}-disabled`]: this.disabled,
                        [`${prefixCls}-readonly`]: this.readonly,
                        [`${prefixCls}-focus`]: this.isFocused
                    }
                ]
            }
        },
        watch: {
            value(newValue) {
                if (!actualEquals(newValue, this.values)) this.values = deepCopy(newValue)
            },
            values: {
                deep: true,
                handler(newValue) {
                    this.$emit('input', newValue)
                    this.dispatch('YYFormItem', 'on-form-change', newValue)
                }
            }
        },
        methods: {
            handleToggleDrop() {
                this.broadcast('YYSelectDrop', 'on-update-popper')
                this.dropVisible = !this.dropVisible
                this.isFocused = this.dropVisible
            },
            handleCloseDrop() {
                if (this.dropVisible == false) return
                this.dropVisible = false
                this.isFocused = this.dropVisible
                this.dispatch('YYFormItem', 'on-form-change', this.values[this.lang])
            },
            handleChange(value) {
                this.$set(this.values, this.lang, value)
                this.$emit('input', this.values)
                this.$emit('on-change', this.values)
            },
            handleCancel() {
                this.handleCloseDrop()
                this.values = deepCopy(this.value)
                this.$emit('on-cancel')
            },
            handleDispatch(event, type) { // 分发父级method
                this.$emit(`on-${type}`, event)
                if(type === 'blur') {
                    this.dispatch('YYFormItem', 'on-form-blur', this.currentValue);
                }
            },
            handleOk() {
                this.handleCloseDrop()
                this.$emit('input', this.values)
                this.$emit('on-change', this.values)
                this.$emit('on-ok')
            },
            focus() {
                this.$refs.input.focus()
            },
            blur() {
                this.$refs.input.blur()
            }
        },
        created() {
            this.langType = this.lang || getLang()
        }
    }
</script>

