<template> 
<div v-show="myConfig.visible"  style="float:left" @keydown.enter.stop="multiKeyDown" >
     <CheckboxGroup  ref="myControl"  v-model="value" :size="myConfig.size"  @on-change="setFatherValue" >
        <template v-if="myConfig.vertical">
        <div  v-for="(item,index) in myConfig.data"  :key="'check_' + index" class="efuture-checkbox">
            <Checkbox  :label="item[myConfig.valueField]" :disabled="myConfig.readOnly" > <span style="margin-left: 10px;">{{item[myConfig.textField]}}</span></Checkbox>
        </div>
        </template>
        <template v-else>
        <Checkbox v-for="(item,index) in myConfig.data" :key="'check_' + index" :label="item[myConfig.valueField]" :disabled="myConfig.readOnly"  class="efuture-checkbox"><span style="margin-left: 10px;">{{item[myConfig.textField]}}</span></Checkbox>
        </template>
    </CheckboxGroup>
</div>
</template>
<script>
    import Base from '@/components/base/controlbase.vue';
    export default {
        name: 'checkgroupbox',
        extends: Base,
        data () {
            return {
                myConfig: {
                    data:[],
                    valueField: 'code',
                    textField: 'name',
                    defaultValue:'',
                    separator:',',
                    vertical:false,
                    divStyle:{}
                },
                value:[] 
            };
        },
        methods: {
            fatherValueToValue (value) {
                if (value) {
                    return  value.split(this.myConfig.separator);
                } else {
                    if (this.myConfig.defaultValue) {
                        return this.myConfig.defaultValue.split(this.myConfig.separator);
                    } else {
                        return [];
                    }
                }
            },
            valueToFatherValue() {
                let para= {};
                if (this.value.length > 0) {
                    para.value = this.value.join(this.myConfig.separator) ;
                } else {
                    para.value = '';
                }
                return para;
            },
            setFatherValue() {
                let flag = true;
                let para = this._valueToFatherValue();
                para.name = this.myConfig.name;
                this.$emit('inputValue', para);
                if (this.myConfig.valueChanged) {
                    if (para.value !== this.oldValue) {
                        let oldValue = this.oldValue;
                        this.$nextTick(() =>{
                            flag = this.myConfig.valueChanged(para);
                            if (flag === undefined) {
                                flag = true;
                            }
                            if (!flag) {
                                this.$nextTick(() => {
                                    this.value = oldValue;
                                    let para = this._valueToFatherValue();
                                    para.name = this.myConfig.name;
                                    this.$emit('inputValue', para);
                                });
                            }
                        });
                    }
                }
            },
            multiKeyDown(e) {
                let action = e.target;
                let index = this.$refs.myControl.$children.findIndex(el => el.$el.control === action);
                if (index  === -1) {
                    index = 0;
                }
                if (index + 1 < this.$refs.myControl.$children.length) {
                    this.$refs.myControl.$children[index].$el.blur();
                    this.$refs.myControl.$children[index + 1].$el.focus();
                    // e.stopPropagation();
                }
            },
            setFocus(value) {
                if (this.$refs.myControl && this.$refs.myControl.$children && this.$refs.myControl.$children.length > 0) {
                    if (value) {
                        this.$refs.myControl.$children[0].$el.focus();
                    } else {
                        let num = this.$refs.myControl.$children.length;
                        this.$refs.myControl.$children[num - 1].$el.blur();
                    }
                }
            }
        }
    };
</script>