<template>
    <div :class="prefixCls">
        <div :class="prefixCls + '-head'">
            <CheckboxGroup 
                v-if="!hideLangCheckbox"
                v-model="langGroup"
                @on-change="handleChange">
                <Checkbox 
                    v-for="(item, key) in inputTypes"
                    :label="key"
                    :disabled="key === lang"
                    :key="key">
                    <span>{{item.label}}</span>
                </Checkbox>
            </CheckboxGroup>
        </div>
        <div :class="prefixCls + '-body'">
            <Form :label-width="labelWidth">
                <FormItem
                    v-for="(item, key) in inputTypes" 
                    v-show="item.show"
                    :key="key"
                    :type="type"
                    :label="item.label" >
                    <Input 
                        v-model="value[key]" 
                        :type="type"
                        :clearable="clearable" 
                        :maxlength="maxlength"
                        @input="handleInput($event, key)"
                        :placeholder="item.placeholder"/>
                </FormItem>
            </Form>
        </div>
        <div :class="prefixCls + '-foot'">
            <Button
                style="margin-right: 4px"
                size="small" 
                type="default" 
                @click="handleCancel">
                {{t('cancel')}}
            </Button>
            <Button 
                size="small" 
                type="primary" 
                @click="handleOk">
                {{t('ok')}}
            </Button>
        </div>
    </div>
</template>
<script>
    import CheckboxGroup from '../checkbox/checkbox-group'
    import Checkbox from '../checkbox/checkbox'
    import Button from '../button'
    import Form from '../form/form'
    import FormItem from '../form/form-item'
    import Input from '../input/'
    import Locale from '../../../mixins/locale'

    const prefixCls = 'yy-input-multilang-drop'
    export default {
        mixins: [Locale],
        components: {
            Checkbox,
            CheckboxGroup,
            Button,
            Form,
            FormItem,
            Input
        },
        props: {
            value: {
                type: Object
            },
            type: {
                type: String,
                default: 'text'
            },
            lang: {
                type: String,
            },
            clearable: {
                type: Boolean,
                default: false
            },
            maxlength: {
                type: Number
            },
            multiTypes: {
                type: Array,
                default: () => {
                    return ['zhs', 'zht', 'en']
                }
            },
            zhDblLength: {
                type: Boolean,
                default: false
            },
            hideLangCheckbox: {
                type: Boolean,
                default: false
            },
            labelWidth: {
                type: Number,
                default: 60
            }
        },
        data() {
            const inputTypes = {
                zhs: {
                    show: false,
                    label: '简体中文',
                    placeholder: '请输入内容'
                },
                zht: {
                    show: false,
                    label: '繁體中文',
                    placeholder: '請輸入內容'
                },
                en: {
                    show: false,
                    label: 'EN/英文',
                    placeholder: 'Please enter the content'
                }
            }
            const finaleInputTypes = {}
            this.multiTypes.forEach(key => {
                inputTypes[key].show = true
                finaleInputTypes[key] = inputTypes[key]
            })
            return {
                prefixCls: prefixCls,
                langGroup: this.multiTypes,
                inputTypes: finaleInputTypes,
            }
        },
        methods: {
            handleChange(value) {
                const inputTypesKey = Object.keys(this.inputTypes)
                inputTypesKey.forEach((item) => {
                    this.inputTypes[item].show = value.indexOf(item) != -1
                })
            },
            handleCancel() {
                this.$emit('on-cancel')
            },
            handleOk() {
                this.$emit('on-ok')
            },
            handleInput(value, key) {
                if (this.zhDblLength) {
                    const endIndex = this.computedLen(value)
                    if (endIndex != -1) {
                        this.$nextTick(() =>{
                            this.value[key] = value.substring(0, endIndex)
                            // this.$emit('input', this.value)
                        })
                    }
                }
            },
            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>
