<template>
    <span :class="label?'sel-span':''">
        <span v-if="label">{{$dict.tranByPubMap(label)}}<span class="red">{{desc}}</span> :</span>
        
        <el-date-picker v-model="dateRange"  @change="valchange"
            align="right" unlink-panels 
            v-bind="$attrs" :style="$attrs.elstyle"
            range-separator="-" :start-placeholder="labelCfg.startDate || '开始日期'" :end-placeholder="labelCfg.endDate || '结束日期'"
            :format="formatter" :value-format="formatter"
            :default-time="['00:00:00','23:59:59']"
            :picker-options="pickerOptions">
        </el-date-picker>
    </span>
    
</template>


<script>

export default {
    props:["label","value","notInit","limitDay"],
    data() {
        return {
            dateRange : this.value || [],
            showVal : [],
            pickerOptions: this.getPickerOptions(),
        }
    },

    mounted() {
        if(this.notInit || (this.dateRange && this.dateRange.length==2)){
            this.valchange(true);
        }else{
            this.initDate();
        }
    },
    computed: {
        labelCfg(){
            var cfg = {};
            if(this.formLabelCfg){
                cfg = this.formLabelCfg;
            }else if(this.globalLyExFnCfg){
                if(this.$store && this.$store.state.lang){
                    cfg = this.globalLyExFnCfg["formLabelCfg"+this.$store.state.lang] || this.globalLyExFnCfg.formLabelCfg || {};
                }else{
                    cfg = this.globalLyExFnCfg.formLabelCfg || {};
                }
            }
            return cfg;
        },
        desc(){
            if(this.limitDay){
                return `(${this.limitDay}天内)`;
            }else{
                return "";
            }
        },
        formatter() {
            if(this.$attrs.type=="daterange"){
                return "yyyy-MM-dd"
            }else if(this.$attrs.type=="monthrange"){
                return "yyyy-MM"
            }else{
                return "yyyy-MM-dd HH:mm:ss"
            }
            
        }
    },
    watch: {
        value(newval){
            newval = newval || "";
            this.showVal = newval;
            if(newval.length==2){
                this.dateRange=[this.$dayjs(newval[0]).toDate(),this.$dayjs(newval[1]).toDate()];
            }else {
                this.dateRange = newval
            }
            this.$emit('input',this.showVal);
        },
        limitDay(newval){
            this.valchange();
        }
    },

    methods: {
        initDate(s,e) {
            var start = new Date();
            var end = new Date();
            if(this.diffTimeZone){
                start = this.$dayjs().add(this.diffTimeZone, "hour").toDate();
                end = this.$dayjs().add(this.diffTimeZone, "hour").toDate();
            }
            
                start.setHours(0)
                start.setMinutes(0)
                start.setSeconds(0)
                end.setHours(23)
                end.setMinutes(59)
                end.setSeconds(59)

            if(!isNaN(this.$attrs.startDiff)){
                if(this.$attrs.startDiff>0){
                    start=this.$dayjs(start).add(this.$attrs.startDiff, 'day')
                }else {
                    start=this.$dayjs(start).subtract(-this.$attrs.startDiff, 'day')
                }
                start = start.toDate();
            }
            if(!isNaN(this.$attrs.endDiff)){
                if(this.$attrs.endDiff>0){
                    end=this.$dayjs(end).add(this.$attrs.endDiff, 'day')
                }else {
                    end=this.$dayjs(end).subtract(-this.$attrs.endDiff, 'day')
                }
                end = end.toDate();
            }
            
            this.dateRange=[start,end];
            this.valchange(true);
        },
        checkLimitDay(){
            if(this.dateRange.length==2 && this.limitDay){
                
                if(this.$attrs.type=="daterange"){
                    var diffday = this.$dayjs(this.dateRange[1]).diff(this.$dayjs(this.dateRange[0]),'day')+1;
                    if(this.limitDay<diffday){
                        this.$message.error("日期选择跨度不能超过"+this.limitDay+"天");
                        this.dateRange=[];
                    }
                }else{
                    var diffSecond = this.$dayjs(this.dateRange[1]).unix() - this.$dayjs(this.dateRange[0]).unix();
                    var daySecond = 24*60*60;
                    if(this.limitDay*daySecond<diffSecond){
                        this.$message.error("日期选择跨度不能超过"+this.limitDay+"天");
                        this.dateRange=[];
                    }
                }
            }
        },
        valchange(isInit){
            this.showVal = [];
            if(!this.dateRange){
                this.dateRange = [];
            }
            this.checkLimitDay();
            if(this.dateRange.length==2 && this.dateRange[0].getTime){
                if(this.$attrs.type=="daterange"){
                    this.showVal[0] = this.$dayjs(this.dateRange[0].getTime()).format("YYYY-MM-DD 00:00:00")
                    this.showVal[1] = this.$dayjs(this.dateRange[1].getTime()).format("YYYY-MM-DD 23:59:59")
                }else{
                    this.showVal[0] = this.$dayjs(this.dateRange[0].getTime()).format("YYYY-MM-DD HH:mm:ss")
                    this.showVal[1] = this.$dayjs(this.dateRange[1].getTime()).format("YYYY-MM-DD HH:mm:ss")
                }
            }else{
                if(this.$attrs.type=="daterange" && this.dateRange.length==2){
                    this.showVal[0]= this.dateRange[0].substring(0,10)+" 00:00:00";
                    this.showVal[1]= this.dateRange[1].substring(0,10)+" 23:59:59";
                }else if(this.$attrs.type== "monthrange" && !this.notInit){
                    this.showVal[0]= this.dateRange[0] +"-01";
                    this.showVal[1]= this.dateRange[1] +"-01";
                }else if(this.dateRange[0]){
                    this.showVal[0]= this.dateRange[0] || "";
                    this.showVal[1]= this.dateRange[1] || "";
                }
            }
            this.$emit('input',this.showVal);
            if(isInit===true) return;
            this.$emit('change',this.showVal);
        },
    }
}
</script>

<style lang="less" scoped>
    .sel-span{
        display: inline-block;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 5px;
        >span{
            display: inline-block;
            white-space: nowrap;
            color:gray;
            font-size: 15px;
        }
    }
</style>