<template> 
 <div v-show="myConfig.visible">
    <ColorPicker  ref="myControl" v-model="value"  :transfer="myConfig.transfer" :size="myConfig.size"  :format="myConfig.format"   clearable  :disabled="myConfig.readOnly"    @on-change="onChange"  @on-open-change="onOpenChange"  />
 </div>
</template>
<script>
    import Base from '@/components/base/controlbase.vue';
    export default {
        name: 'colorbox',
        extends: Base,
        data () {
            return {
                myConfig: {
                    format:null,
                    defaultValue:null,
                    transfer:false
                },
                value:null,
                oldValue:null
            };
        },
        methods: {
            onChange(e) {
                this.$nextTick(() => {
                    this.setFatherValue();
                });
            },
            onOpenChange(value) {
                if (this.config.onOpenChange) {
                    this.config.onOpenChange(value);
                }
            },
            setFocus(value) {
                if (value) {
                    this.$refs.myControl.$refs.input.focus();
                    this.$refs.myControl.isFocused = true;
                } else {
                    this.$refs.myControl.$refs.input.blur();
                    this.$refs.myControl.isFocused = false;
                }
            }
        }
    };
</script>