<template> 
 <div v-show="myConfig.visible">
    <TimePicker  ref="myControl" v-model="value" :transfer="myConfig.transfer" :format="myConfig.format" :vtype="myConfig.vtype"  :size="myConfig.size" :placeholder="myConfig.placeholder"  clearable  :disabled="myConfig.readOnly"    @on-change="setFatherValue"  @keydown.enter.stop="_enterSetFatherValue" @on-open-change="onOpenChange" style="width:100%" />
 </div>
</template>
<script>
    import Base from '@/components/base/controlbase.vue';
    export default {
        name: 'timepicbox',
        extends: Base,
        data () {
            return {
                myConfig: {
                    vtype:'hmtime',
                    format:'HH:mm',
                    defaultValue:null,
                    transfer:false
                },
                value:null,
                oldValue:null
            };
        },
        props:{
            fatherValue: {
                type: [String, Date], 
                default: null
            }
        },
        methods: {
            fatherValueToValue (value) {
                if (value) {
                    return this.fatherValue;
                } else {
                    return this.myConfig.defaultValue;
                }
            },
            valueToFatherValue() {
                let para= {};
                if (!this.value) {
                    para.value = '';
                } else {
                    para.value = this.value;
                }
                return para;
            },
            customInit() {
                if (this.config && this.config.format  === undefined) {
                    if (this.myConfig.vtype === 'hmtime') {
                        this.myConfig.format = 'HH:mm';
                    } else if (this.myConfig.vtype === 'hmstime') {
                        this.myConfig.format = 'HH:mm:ss';
                    }
                }
            },
            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;
                    this.$refs.myControl.handleClose();
                }
            },
            onOpenChange(value) {
                if (this.config.onOpenChange) {
                    this.config.onOpenChange(value);
                }
            },
             _enterSetFatherValue() {
                this.isEnter = true;
                this.setFatherValue();
            }
        }
    };
</script>