<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-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=='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-group>
      </div>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import storage from '@/utils/storage'
export default {
  data() {
    return {
      isShowRange: false,
      timeType: '5m',
      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: '5m'
      },
      choiceDate: null,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime()
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = ''
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'timesFlag'
    ])
  },
  created() {
    this.$store.commit('time/setTopoTimes', 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/setTopoTimes', 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/setTopoTimes', this.timeObj)
    }
  }

}
</script>

<style lang="scss" scoped>
.timebox{
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding:0 20px;
  padding-left:0;
  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>
