<template> 
 <div v-show="myConfig.visible">
    <DatePicker ref="myControl" v-model="culValue"  :size="myConfig.size"  :transfer="myConfig.transfer"  :format="myConfig.format"  :placeholder="myConfig.placeholder"  type="datetimerange" clearable  :disabled="myConfig.readOnly"    @on-change="onEnterValue" @keydown.enter.stop="_enterSetFatherValue"  @on-open-change="onOpenChange"  style="width:100%" />
 </div>
</template>
<script>
    import Base from '@/components/base/controlbase.vue';
    export default {
        name: 'daterangebox',
        extends: Base,
        data () {
            return {
                myConfig: {
                    vtype:'datetimerange',
                    format:'yyyy-MM-dd',
                    defaultValue:'',
                    transfer:false
                },
                oldValue:['',''],
                svalue: '',
                evalue: '',
                oldSvalue: '',
                oldEvalue: '',
                culValue:['','']
            };
        },
        props:{
            fatherSvalue: {
                type: [String, Date], 
                default: ''
            },
            fatherEvalue: {
                type: [String, Date],
                default: ''
            },
        },
        methods: {
            valueToFatherValue() {
                let para= {};
                para.sname = this.myConfig.sname;
                para.ename = this.myConfig.ename;
                if (this.culValue[0]) {
                    para.svalue =  this.$Method.formatDate(this.culValue[0], this.myConfig.format); 
                } else {
                    para.svalue = '';
                }
                if (this.culValue[1]) {
                    para.evalue =  this.$Method.formatDate(this.culValue[1], this.myConfig.format); 
                } else {
                    para.evalue = '';
                }
                return para;
            },
            onOpenChange(value) {
                if (this.config.onOpenChange) {
                    this.config.onOpenChange(value);
                }
            },
            onEnterValue(value) {
                if (value[0] && value[1]) {
                   this.svalue = value[0];
                   this.evalue = value[1]
                }
                this.setFatherValue();
            },
            _enterSetFatherValue(e) {
                let value = e.target.value;
                if (value) {
                    let values = value.split(' - ');
                    let chekflag = this.isValidDate(values[0]);
                    chekflag = this.isValidDate(values[1]);
                    if (chekflag) {
                        this.svalue = values[0];
                        this.evalue = values[1];
                        this.culValue = [new Date(this.svalue),new Date(this.evalue)];
                    } else {
                        this.$parent.reset();
                        //this.setFatherValueFail();
                        return false;
                    }
                } else {
                    this.svalue = '';
                    this.evalue = '';
                    this.culValue = ['', ''];
                }
                this.isEnter = true;
                this.setFatherValue();
            },
              //时间合法性验证
            isValidDate(dateString) {
                // 正则表达式匹配YYYY-MM-DD格式
                const regex = /^\d{4}-\d{2}-\d{2}$/;
                // 尝试将日期字符串转换为日期对象，并比较原日期
                const date = new Date(dateString);
                return date instanceof Date && date.toString() !== 'Invalid Date' && regex.test(dateString);
            },
            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;
                }
            },
            setFatherValueSuccess(para) {
                this.oldValue = this.$Method.copy(this.culValue);
                this.oldSvalue = para.svalue;
                this.oldEvalue = para.evalue;
                this.$emit('inputValue', para);
            },
            setFatherValueFail() {
                this.$nextTick(() => {
                    if (this.oldSvalue && this.oldEvalue) {
                        this.culValue = [new Date(this.oldSvalue),new Date(this.oldEvalue)];
                    } else {
                        this.oldSvalue = '';
                        this.oldEvalue = '';
                        this.culValue = ['','']
                    }
                });
            },
            setCulValue(sdate,edate){
                this.$nextTick(() => {
                    if (sdate && edate) {
                        this.culValue = [new Date(sdate),new Date(edate)];
                        this.oldEvalue = edate;
                        this.oldSvalue = sdate;
                    } else {
                        this.oldSvalue = '';
                        this.oldEvalue = '';
                        this.culValue = ['','']
                    }
                    this.oldValue = this.$Method.copy(this.culValue);
                })
            }
        },
        watch: {
            fatherSvalue: {
                handler(newValue) {
                    this.setCulValue(newValue,this.fatherEvalue);
                },
                deep: true,
                immediate: true
            },
            fatherEvalue: {
                handler(newValue) {
                    this.setCulValue(this.fatherSvalue,newValue);
                },
                deep: true,
                immediate: true
            },
        }
    };
</script>