<template>
  <div id="bottomRight">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-area"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2 fontvw">当天时间区间开锁次数统计图</span>
          <!-- <div class="decoration2">
            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
          </div> -->
        </div>
      </div>
      <div>
        <Echart :options="options" id="centreLeft1Chart" ref="centreLeft1Chart" height="18vw" width="100%" v-if="tpstatus"></Echart>
        <!-- <BottomRightChart /> -->
      </div>
    </div>
  </div>
</template>

<script>
  import BottomRightChart from "../../components/echart/bottom/bottomRightChart1";
  import Echart from "@/common/echart";
  import {
    httpPost,
    httpGet
  } from "../../api";
  export default {
    data() {
      return {
        tpstatus: true,
        options: {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: [{
            type: "category",
            data: [
              "1:00",
              "2:00",
              "3:00",
              "4:00",
              "5:00",
              "6:00",
              "7:00",
              "8:00",
              "9:00",
              "10:00",
              "11:00",
              "12:00",
              "13:00",
              "14:00",
              "15:00",
              "16:00",
              "17:00",
              "18:00",
              "19:00",
              "20:00",
              "21:00",
              "22:00",
              "23:00",
              "24:00"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: "value",
            minInterval: 1
          }],
          series: [{
            name: "开锁次数",
            type: "bar",
            barWidth: "60%",
            data: [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0
            ]
          }]
        }
      };
    },
    components: {
      Echart,
      BottomRightChart
    },
    created() {},
    mounted() {
      this.drawTimingFn();
    },
    methods: {
      drawTimingFn() {
        var str = new Date().getTime() / 1000;
        var str1 = new Date(new Date().toLocaleDateString()).getTime() / 1000;
        var data = {
          start: parseInt(str1),
          end: parseInt(str)
        };
        httpGet(data, this.$api.lockOpenStatistics).then(res => {
          var options = this.options;
          res.data.map(li => {
            var num = parseInt(li.order);
            options.series[0].data[num] = li.count;
          });
          this.tpstatus = false;
          this.$nextTick(function() {
            this.options = options;
            this.tpstatus = true;
          });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  #bottomRight {
    padding: 0.6vw;
    height: 21.5vw;
    min-width: 3.75rem;
    border-radius: 0.0625rem;

    .fontvw {
      font-size: 0.8vw;
    }

    .bg-color-black {
      margin-top: 0.2vw;
      height: 20vw;
      border-radius: 0.125rem;
    }

    .text {
      color: #c3cbde;
    }

    .decoration2 {
      position: absolute;
      right: 0.125rem;
    }

    .chart-box {
      margin-top: 0.2rem;
      width: 2.125rem;
      height: 2.125rem;

      .active-ring-name {
        padding-top: 0.125rem;
      }
    }
  }
</style>
