<template>
 <div v-show="myConfig.visible">
    <DatePicker ref="myControl" v-model="culValue"  :options="options"  :transfer="myConfig.transfer"  :size="myConfig.size"  :format="myConfig.format"  :placeholder="myConfig.placeholder" :type="myConfig.vtype" clearable  :disabled="myConfig.readOnly"    @on-change="onChange"  @on-open-change="onOpenChange"  @keydown.enter.stop="_enterSetFatherValue" style="width:100%"   />
 </div>
</template>
<script>
    import Base from '@/components/base/controlbase.vue';
    export default {
        name: 'datebox',
        extends: Base,
        data () {
            return {
                myConfig: {
                    vtype:'date',
                    format:'yyyy-MM-dd',
                    defaultValue:null,
                    transfer:false
                },
                options:{
                    disabledDate:this.disabledDate
                },
                culValue:null,
                value:null,
                oldValue:null
            };
        },
        props:{
            fatherValue: {
                type: [String, Date],
                default: null
            }
        },
        methods: {
            fatherValueToValue (value) {
                if (value) {
                    return value;
                } else {
                    return this.myConfig.defaultValue;
                }
            },
            setFatherValueFail() {
                this.value = this.oldValue;
                this.$nextTick(() => {
                    if (!this.value) {
                        this.culValue = null;
                    } else {
                        this.culValue = new Date(this.value);
                    }

                });
            },
            watchCustomFatherValue() {
                if (this.value) {
                    this.culValue = new Date(this.value);
                } else{
                    this.culValue = null;
                }
            },
            onChange(e) {
                this.value = e;
                if (!this.value) {
                    this.culValue = null;
                } else {
                   this.culValue = new Date(this.value);
                }
                this.setFatherValue();
            },
            valueToFatherValue() {
                let para= {};
                if (!this.culValue) {
                    para.value = '';
                } else {
                    if (this.myConfig.vtype ==='month') {
                        para.value = this.$Method.formatDate(this.culValue,'yyyy-MM-dd');
                    } else {
                        if (this.myConfig.format === 'MM-dd') {
                            para.value = this.$Method.formatDate(this.culValue,'MM-dd');
                        } else {
                            para.value = this.$Method.formatDate(this.culValue,this.myConfig.format);
                        }
                    }
                }
                return para;
            },
            disabledDate(date) {
                if (this.myConfig.disabledDate) {
                    return this.myConfig.disabledDate(date);
                }
                return false;
            },
            customInit() {
                if (this.config && this.config.format  === undefined) {
                    if (this.myConfig.vtype === 'date') {
                        this.myConfig.format = 'yyyy-MM-dd';
                    } else if (this.myConfig.vtype === 'datetime') {
                        this.myConfig.format = 'yyyy-MM-dd HH:mm:ss';
                    } else if (this.myConfig.vtype ==='month') {
                        this.myConfig.format = 'yyyy-MM';
                    }
                }
            },
            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;
                }
            },
            _enterSetFatherValue() {
                if (this.value === this.oldValue) {
                    if (this.$parent.enterKeyDown) {
                        this.$parent.enterKeyDown();
                    }
                } else {
                    this.isEnter = true;
                    this.setFatherValue();
                }

            }
        }
    };
</script>
