<template>
  <div id="OverView">
    <div id="TopSelect">
      <el-button type="primary" style="float:left;margin:10px" @click="AddCharts">添加监控图表</el-button>
      <div id="TimeBox">
        <ul id="TimeBoxUl">
          <li
            class="TimeBoxLi"
            v-for="(item, index) in ImgManus"
            :key="index"
            :class="{selectLi:index==dynamic}"
            @click="ListClick(index,$event,item.Title) "
            style="cursor: pointer;"
          >{{item.text}}</li>
        </ul>
        <transition name="mybox">
          <div style="float:left;width:400px;height:60px" v-show="ZDYTime" id="IndexTimeBox">
            <el-date-picker
              v-model="TimeValue"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              id="IndexTime"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>
        </transition>
      </div>
    </div>
    <div id="ChartsBox"></div>
  </div>
</template>
<script>
import { message } from "./../util/item";
export default {
  name: "OverView",
  data: function() {
    return {
      MenuWidth: 200,
      dynamic: 0,
      ImgManus: [
        {
          text: "近1个小时"
        },
        {
          text: "近24个小时"
        },
        {
          text: "近7天"
        },
        {
          text: "近15天"
        },
        {
          text: "近30天"
        },
        {
          text: "选择日期"
        }
      ],
      TimeValue: "",
      ZDYTime: false
    };
  },
  methods: {
    ListClick(index) {
      this.dynamic = index;
      //   判断 当index=5的时候显示时间选择框 当index=0,1，2，3，4的时候隐藏时间选择框并给时间框赋值为相应的时间段
      if (index == 5) {
        this.ZDYTime = true;
      } else {
        this.ZDYTime = false;
        // 获取当前的时间
        if (index == 0) {
          // 近一个小时
          this.SetTime(1);
        } else if (index == 1) {
          // 近24个小时
          this.SetTime(24);
        } else if (index == 2) {
          // 近7天
          this.SetTime(168);
        } else if (index == 3) {
          // 近15天
          this.SetTime(360);
        } else {
          // 近30天
          this.SetTime(720);
        }
        console.log(this.TimeValue)
      }
    },
    AddCharts() {
    },
    // Day:小时数量 ，获取多少小时之前的时间
    SetTime(Day) {
      //获取当前日期
      var date = new Date();
      var year = date.getFullYear();
      var month =
        date.getMonth() < 9 ? "0" + date.getMonth() + 1 : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var nowDate =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      // 获取需要计算的时间
      var lastDate = new Date(date - 1000 * 60 * 60 * Day);
      var lastY = lastDate.getFullYear();
      var lastMM =
        lastDate.getMonth() < 9
          ? "0" + lastDate.getMonth() + 1
          : lastDate.getMonth() + 1;
      var lastD =
        lastDate.getDate() < 10 ? "0" + lastDate.getDate() : lastDate.getDate();
      var lastH =
        lastDate.getHours() < 10
          ? "0" + lastDate.getHours()
          : lastDate.getHours();
      var lastM =
        lastDate.getMinutes() < 10
          ? "0" + lastDate.getMinutes()
          : lastDate.getMinutes();
      var lastS =
        lastDate.getSeconds() < 10
          ? "0" + lastDate.getSeconds()
          : lastDate.getSeconds();
      var LDate =
        lastY +
        "-" +
        lastMM +
        "-" +
        lastD +
        " " +
        lastH +
        ":" +
        lastM +
        ":" +
        lastS;
      this.TimeValue = [LDate, nowDate];
    }
  }
};
</script>
<style >
/* 顶部动画A */
.mybox-leave-active,
.mybox-enter-active {
  transition: all 0.5s ease;
}
.mybox-leave-active,
.mybox-enter {
  width: 0px !important;
}
.mybox-leave,
.mybox-enter-active {
  width: 400px;
}
/* 顶部动画B */
#TopSelect {
  width: 100%;
  height: 60px;
  line-height: 60px;
  overflow-x: hidden;
}
#ChartsBox {
  width: 100%;
  height: calc(100% - 60px);
}
#TimeBox {
  float: right;
  height: 60px;
  line-height: 60px;
  width: auto;
}
#TimeBoxUl {
  height: 32px;
  line-height: 32px;
  width: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
  margin-top: 14px;
}
.TimeBoxLi {
  float: left;
  height: 30px;
  line-height: 30px;
  margin: 0 1px;
  color: white;
  border: 1px solid rgb(54, 54, 54);
  padding: 0 5px;
  font-size: 14px;
  background: rgb(54, 54, 54);
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.selectLi {
  border: 1px solid rgb(14, 130, 238);
}
/* 时间框样式 A */
#IndexTimeBox .el-input__inner {
  background-color: #191616;
}
#IndexTimeBox .el-range-input {
  background-color: #2e2b2b;
  color: white;
}
.el-picker-panel {
  background-color: #191616;
}
.el-date-table td.in-range div {
  background-color: #a0a4a9;
}
.el-picker-panel__footer {
  background-color: #191616;
}
.el-date-range-picker__time-header .el-input__inner {
  background-color: #2e2b2b;
  color: #ffffff;
}
.el-time-panel {
  background-color: #2e2b2b;
}
.el-time-spinner__item.active:not(.disabled) {
  color: #75c5ff;
  font-weight: 700;
}
.el-time-spinner__item:hover:not(.disabled):not(.active) {
  background: #212429;
  cursor: pointer;
}
.el-time-panel__btn {
  color: #787a80;
}
/* 时间框样式 B */
</style>