<template>
    <div class="time-range">
        <el-date-picker
            v-model="dateRange"
            :type="type"
            range-separator="至"
            start-placeholder="开始时间"
            :format="valueFormat"
            :value-format="valueFormat"
            :clearable="false"
            :picker-options="pickerOptions"
            end-placeholder="结束时间">
            </el-date-picker>
            <el-button size="mini" style="margin-left: 10px;" :loading="loading" @click="reset">重置</el-button>
            <el-button type="primary" size="mini" :loading="loading" @click="search">搜索</el-button>
            <el-button type="primary" size="mini" :loading="loading" @click="timeLine('before')">上一时段</el-button>
            <el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">下一时段</el-button>
        </div>
</template>

<script>
import {formatDate} from '@/filters/ems'
export default {
  props:{
    dataUnit:{
      type:Number,
      default:1
    }
  },
  computed:{
    type(){
      return this.dataUnit === 3 ? 'daterange' : 'datetimerange'
    },
    valueFormat(){
      return this.dataUnit === 3 ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'
    },
    disabledNextBtn(){
      if(this.dateRange && this.dateRange.length ===2){
        return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
      }else{
        return true
      }

    }
  },
  data() {
    return {
      loading:false,
      dateRange:[],
      defaultDateRange:[],
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    }
  },
  methods: {
    init(){
        const {dataUnit} = this
        const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
        const now = new Date(),formatNow = formatDate(now.getTime(),dataUnit !== 3 );
        const timeAgo = formatDate(new Date(now.getTime() - timeDis),dataUnit !== 3)
        this.dateRange = [timeAgo, formatNow];
        this.defaultDateRange=[timeAgo, formatNow];
        console.log('init',timeAgo,formatNow)
        this.$emit('initDate',this.dateRange || [])
    },
    showBtnLoading(status){
        this.loading = status
    },
    // 切换分、时、天 重置时间可选范围
    resetDate(){
      this.dateRange = this.defaultDateRange
    },
    //重置 设置时间范围为初始化时间段
    reset(){
        this.resetDate()
        this.$emit('updateDate',this.dateRange || [])
    },
    // 搜索
    search(){
      if(this.dateRange && this.dateRange.length>0){
        const {dataUnit} = this
        const [start,end] = this.dateRange
        if([1,2].includes(dataUnit)){
          const startTime = new Date(start),endTime=new Date(end)
          const timeDis= 7 * 24 * 60 * 60 * 1000
          if(endTime - startTime > timeDis){
            this.$message.error(`按分钟或小时查询数据,时间范围不能超过7天`)
            return
          }
        }
        this.$emit('updateDate',this.dateRange || [])
      }else{
        this.$emit('updateDate',this.dateRange || [])
      }
    },
    timeLine(type){
      if(!this.dateRange || !this.dateRange[0] || !this.dateRange[1]) return
      const nowStartTimes = new Date(this.dateRange[0]).getTime(),nowEndTimes = new Date(this.dateRange[1]).getTime(),maxTime = new Date(this.defaultDateRange[1]).getTime()
      const nowDis = nowEndTimes - nowStartTimes//用户当前选择时间差 可能=0
      //baseTime,maxTime 毫秒数
      const baseDis =  this.dataUnit === 3 ? 24 * 60 * 60 * 1000 :60 * 60 * 1000
      const calcDis = nowDis === 0 ? baseDis : nowDis
      let start = type === 'before' ? nowStartTimes - calcDis : nowStartTimes + calcDis
      if(start>maxTime) start=maxTime
      let end = type === 'before' ? nowEndTimes - calcDis : nowEndTimes + calcDis
      if(end>maxTime) end=maxTime
      this.dateRange = [formatDate(start,this.dataUnit !== 3),formatDate(end,this.dataUnit !== 3)]
      this.$emit('updateDate',this.dateRange)
    },
  }
}

</script>
<style lang="scss" scoped>
.time-range{
    display: flex;
    ::v-deep {
        .el-range-editor--medium .el-range__icon, .el-range-editor--medium .el-range__close-icon{
          line-height: 22px;
        }
        .el-range-editor--medium.el-input__inner{
            height: 30px;
        }
        .el-range-editor--medium .el-range-separator{
            line-height: 24px;
        }
        .el-button--mini{
            padding:3px 10px;
        }
    }

}
</style>
