<template>
  <div class="timebox">
    <div style="display:flex;justify-content: end;">
      <div class="date-picker-content">
        <el-date-picker
          v-if="timeType=='range' && isShowRange"
          v-model="value"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          style="width:100%;max-width:fit-content;margin-top: 12px;"
          value-format="timestamp"
          size="mini"
          :picker-options="pickerOptions"
          @change="selectTime"
        />
      </div>
      <div>
        <el-button-group>
          <el-button :type="timeType=='range'&& isShowRange ?'primary':''" icon="el-icon-date" size="mini" @click="timeChange('range')" />
          <!-- <el-button :type="timeType=='real'?'primary':''" size='mini' @click="timeChange('real')">REAL TIME</el-button> -->
          <el-tooltip class="item" effect="dark" content="00:00:00~当前时间" placement="top">
            <el-button :type="timeType=='当日'?'primary':''" size="mini" @click="timeChange('当日')">当日</el-button>
          </el-tooltip>
          <el-button :type="timeType=='5m'?'primary':''" size="mini" @click="timeChange('5m')">5m</el-button>
          <el-button :type="timeType=='20m'?'primary':''" size="mini" @click="timeChange('20m')">20m</el-button>
          <el-button :type="timeType=='1h'?'primary':''" size="mini" @click="timeChange('1h')">1h</el-button>
          <!-- <el-button :type="timeType=='3h'?'primary':''" size='mini' @click="timeChange('3h')">3h</el-button> -->
          <el-button :type="timeType=='6h'?'primary':''" size="mini" @click="timeChange('6h')">6h</el-button>
          <el-button :type="timeType=='12h'?'primary':''" size="mini" @click="timeChange('12h')">12h</el-button>
          <el-button :type="timeType=='1d'?'primary':''" size="mini" @click="timeChange('1d')">1d</el-button>
          <!-- <el-button :type="timeType=='2d'?'primary':''" size='mini' @click="timeChange('2d')">2d</el-button> -->
        </el-button-group>
      </div>
      <div style="margin-left:12px" class="box">
        <el-dropdown size="mini" split-button type="primary">
          <span class="el-dropdown-link">
            <i class="el-icon-refresh" @click="Refresh()" />
            <span style="margin-left:8px; border-left:1px solid  rgba(255, 255, 255, 0.5);padding:2px 5px 1px 7px;">{{ showValue }}</span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="changeTimeout('off')">关</el-dropdown-item>
            <el-dropdown-item @click.native="changeTimeout('5s')">5s</el-dropdown-item>
            <el-dropdown-item @click.native="changeTimeout('10s')">10s</el-dropdown-item>
            <el-dropdown-item @click.native="changeTimeout('20s')">20s</el-dropdown-item>
            <el-dropdown-item @click.native="changeTimeout('30s')">30s</el-dropdown-item>
            <el-dropdown-item @click.native="changeTimeout('1m')">1m</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import storage from '@/utils/storage'
export default {
  data() {
    return {
      isShowRange: false,
      timeType: '当日',
      value: '',
      times: '',
      timeObj: {
        interval: parseInt((new Date() - new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0)) / (1000 * 60)),
        // startTime: Math.round((new Date().getTime()) / 1000 - (5 * 60)), // 默认5分钟
        startTime: Math.round(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()).getTime() / 1000), // 默认当日凌晨
        endTime: Math.round(new Date().getTime() / 1000),
        timeOut: 1, // 默认是5000毫秒也就是5s
        timeType: '当日'
      },
      showValue: '关',
      choiceDate: null,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime()
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = ''
        }
        // disabledDate: (time) => {
        //   // 如何选择了一个日期
        //   if (this.choiceDate) {
        //     // 7天的时间戳
        //     const one = 1 * 24 * 3600 * 1000
        //     // 当前日期 - one = 7天之前
        //     const minTime = this.choiceDate - one
        //     // 当前日期 + one = 7天之后
        //     const maxTime = this.choiceDate + one
        //     return (
        //       time.getTime() < minTime ||
        //       time.getTime() > maxTime
        //       // 限制不能选择今天及以后
        //       // || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
        //     )
        //   } else {
        //     // 如果没有选择日期，就要限制不能选择今天及以后
        //     // return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
        //   }
        // }
      }
    }
  },
  computed: {
    ...mapGetters([
      'timesFlag'
    ])
  },
  created() {
    const appItem = storage.get('global_times')
    if (appItem) {
      // this.$store.commit('time/setTimes', appItem) // 为了在打开新页签页面时，可以取到 之前选中的值
      this.timeType = appItem.timeType
      this.timeChange(appItem.timeType)
    } else {
      this.$store.commit('time/setTimes', this.timeObj) // 默认当天
    }
  },
  methods: {
    timeChange(val) {
      this.timeType = val
      let startTime, endTime
      switch (val) {
        case 'range':
          this.isShowRange = !this.isShowRange
          if (this.isShowRange) {
            this.value = ''
          }
          break
        case 'real':
          // 当前时间的时间戳
          // this.times = Math.round((new Date().getTime())/1000);
          // this.$store.commit('time/changeGlobalTime',this.times)
          break
        case '5m':
          startTime = Math.round((new Date().getTime()) / 1000 - (5 * 60))
          endTime = Math.round(new Date().getTime() / 1000)
          this.parseTime(startTime, endTime, '5m')
          break
        case '20m':
          startTime = Math.round((new Date().getTime()) / 1000 - (20 * 60))
          endTime = Math.round(new Date().getTime() / 1000)
          this.parseTime(startTime, endTime, '20m')
          break
        case '1h':
          startTime = Math.round((new Date().getTime()) / 1000 - (1 * 60 * 60))
          endTime = Math.round(new Date().getTime() / 1000)
          this.parseTime(startTime, endTime, '1h')
          break
        case '3h':
          startTime = Math.round((new Date().getTime()) / 1000 - (3 * 60 * 60))
          endTime = Math.round(new Date().getTime() / 1000)
          this.parseTime(startTime, endTime, '3h')
          break
        case '6h':
          startTime = Math.round((new Date().getTime()) / 1000 - (6 * 60 * 60))
          endTime = Math.round(new Date().getTime() / 1000)
          this.parseTime(startTime, endTime, '6h')
          break
        case '12h':
          startTime = Math.round((new Date().getTime()) / 1000 - (12 * 60 * 60))
          endTime = Math.round(new Date().getTime() / 1000)
          this.parseTime(startTime, endTime, '12h')
          break
        case '1d':
          startTime = Math.round((new Date().getTime()) / 1000 - (24 * 60 * 60))
          endTime = Math.round(new Date().getTime() / 1000)
          this.parseTime(startTime, endTime, '1d')
          break
        case '2d':
          startTime = Math.round((new Date().getTime()) / 1000 - (48 * 60 * 60))
          endTime = Math.round(new Date().getTime() / 1000)
          this.parseTime(startTime, endTime, '2d')
          break
        case '当日':
          startTime = Math.round(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()).getTime() / 1000) // 默认当日凌晨
          endTime = Math.round(new Date().getTime() / 1000)
          this.parseTime(startTime, endTime, '当日')
          break
      }
    },
    selectTime(val) {
      if (val) {
        this.times = val
        const a = Math.round(this.times[1] / 1000 / 60) - Math.round(this.times[0] / 1000 / 60)
        this.timeObj = {
          interval: a,
          startTime: this.times[0] / 1000,
          endTime: this.times[1] / 1000,
          timeType: 'range'
        }
        this.$store.commit('time/setTimes', this.timeObj)
      }
    },
    parseTime(startTime, endTime, type) {
      const interval = (endTime - startTime) / 60
      this.timeObj = {
        interval: parseInt(interval),
        startTime: startTime,
        endTime: endTime,
        timeType: type
      }
      this.$store.commit('time/setTimes', this.timeObj)
    },
    changeTimeout(val) {
      if (val == 'refresh') {
        // this.timeObj.timeOut = 0;
        // this.showValue =
      } else if (val == 'off') {
        this.timeObj.timeOut = 1
        this.showValue = '关'
      } else if (val == '1s') {
        this.timeObj.timeOut = 1 * 1000
        this.showValue = '1s'
      } else if (val == '5s') {
        this.timeObj.timeOut = 5 * 1000
        this.showValue = '5s'
      } else if (val == '10s') {
        this.timeObj.timeOut = 10 * 1000
        this.showValue = '10s'
      } else if (val == '20s') {
        this.timeObj.timeOut = 20 * 1000
        this.showValue = '20s'
      } else if (val == '30s') {
        this.timeObj.timeOut = 30 * 1000
        this.showValue = '30s'
      } else if (val == '1m') {
        this.timeObj.timeOut = 60 * 1000
        this.showValue = '1m'
      }
      this.$store.commit('time/setTimes', this.timeObj)
    },
    Refresh() {
      location.reload()
    }
  }

}
</script>

<style lang="scss" scoped>
.timebox{
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  // box-shadow: 0 1px 4px rgba(0,21,41,.08);
  // margin-top:50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding:0 20px;
  display: inline-block;
  flex:1;
  .date-picker-content{
    flex:1;
    text-align: right;
  }
}
.box ::v-deep .el-dropdown .el-button-group>.el-button.el-button--mini:first-child {
  padding: 7px 3px 7px 7px;
}
</style>
