<template>
  <el-row style="margin-bottom: 30px">
    <el-tabs v-model="activeName" type="card">
      <!--地下一层-->
      <el-tab-pane label="地下一层" name="first" class="tab-pane">
        <div :style="tab1Img" class="y_bj">
          <div style="float:left;">
            <div class="tip-div tip1-l-loc">
              <el-row class="tip-text">当日通行人数：{{ tab1.left.count }}</el-row>
              <el-row class="tip-text tip-text-margin">体温正常人数：{{ tab1.left.normal }}</el-row>
              <el-row class="tip-text">体温异常人数：{{ tab1.left.abnormal }}</el-row>
            </div>
            <div class="point point-flicker point-tab1-l-loc"/>
          </div>
          <div style="float:left">
            <div class="point point-flicker point-tab1-r-loc"/>
            <div class="tip-div tip1-r-loc">
              <el-row class="tip-text">当日测温人数：{{ tab1.right.temp }}</el-row>
              <el-row class="tip-text tip-text-margin">体温正常人数：{{ tab1.right.normal }}</el-row>
              <el-row class="tip-text">体温异常人数：{{ tab1.right.abnormal }}</el-row>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!--一层-->
      <el-tab-pane label="一层" name="second" class="tab-pane">
        <div :style="tab2Img" class="y_bj">
          <div style="float:left">
            <div class="tip-div tip2-l-loc">
              <el-row class="tip-text">当日通行人数：{{ tab2.left.count }}</el-row>
              <el-row class="tip-text tip-text-margin">体温正常人数：{{ tab2.left.normal }}</el-row>
              <el-row class="tip-text">体温异常人数：{{ tab2.left.abnormal }}</el-row>
            </div>
            <div class="point point-flicker point-tab2-l-loc"/>
          </div>
          <!--<div style="float:left;">-->
          <!--<div class="point point-flicker point-tab2-r-loc"/>-->
          <!--<div class="tip-div tip2-r-loc">-->
          <!--<el-row class="tip-text">当日测温人数：{{ tab2.right.temp }}</el-row>-->
          <!--<el-row class="tip-text tip-text-margin">体温正常人数：{{ tab2.right.normal }}</el-row>-->
          <!--<el-row class="tip-text">体温异常人数：{{ tab2.right.abnormal }}</el-row>-->
          <!--</div>-->
          <!--</div>-->
        </div>
      </el-tab-pane>
      <!--四层-->
      <el-tab-pane label="四层" name="third" class="tab-pane">
        <div :style="tab3Img" class="y_bj">
          <div style="float:left;">
            <div class="point point-flicker point-tab3-l-loc"/>
            <div class="tip-div tip3-l-loc">
              <el-row class="tip-text">当日通行人数：{{ tab3.left.count }}</el-row>
              <el-row class="tip-text" style="margin-top: 3px">七日通行人数：{{ tab3.left.countSeven }}</el-row>
            </div>
          </div>
          <div style="float:left;">
            <div class="point point-flicker point-tab3-r-loc"/>
            <div class="tip-div tip3-r-loc">
              <el-row class="tip-text">当日通行人数：{{ tab3.right.count }}</el-row>
              <el-row class="tip-text tip-text-margin">七日通行人数：{{ tab3.right.countSeven }}</el-row>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!--八层-->
      <el-tab-pane label="八层" name="fourth" class="tab-pane">
        <div :style="tab4Img" class="y_bj">
          <div style="float:left;">
            <div class="tip-div tip4-loc">
              <el-row class="tip-text">当日打印人数：{{ tab4.print }}</el-row>
              <el-row class="tip-text tip-text-margin">七日打印人数：{{ tab4.printSeven }}</el-row>
            </div>
            <div class="point point-flicker point-tab4-loc"/>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!--</div>-->
  </el-row>
</template>

<script>
import { countbyLocation } from '@/api/statistics'
import { getDayTime } from '@/utils/dateutils'
export default {
  name: 'MapPicture',
  data() {
    return {
      tab1Img: {
        backgroundImage: 'url(' + require('@/assets/eryuan/B1.png') + ')',
        backgroundColor: '#304156',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%'
        // width: '70%'
      },
      tab2Img: {
        backgroundImage: 'url(' + require('@/assets/eryuan/1.png') + ')',
        backgroundColor: '#304156',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%'
        // width: '70%'
      },
      tab3Img: {
        backgroundImage: 'url(' + require('@/assets/eryuan/4.png') + ')',
        backgroundColor: '#304156',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%'
        // width: '70%'
      },
      tab4Img: {
        backgroundImage: 'url(' + require('@/assets/eryuan/8.png') + ')',
        backgroundColor: '#304156',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%'
        // width: '70%'
      },
      activeName: 'second',
      tab1: {
        left: {
          count: '0',
          normal: '0',
          abnormal: '0'
        },
        right: {
          temp: '0',
          normal: '0',
          abnormal: '0'
        }
      },
      tab2: {
        left: {
          count: '0',
          normal: '0',
          abnormal: '0'
        },
        right: {
          temp: '0',
          normal: '0',
          abnormal: '0'
        }
      },
      tab3: {
        left: {
          count: '0',
          countSeven: '0'
        },
        right: {
          count: '0',
          countSeven: '0'
        }
      },
      tab4: {
        print: '0',
        printSeven: '0'
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const startTime = getDayTime(new Date().getTime()).Format('yyyy-MM-dd') + ' 00:00:00'
      const endTime = getDayTime(new Date().getTime()).Format('yyyy-MM-dd') + ' 23:59:59'
      // const startTime = '2020-06-01 00:00:00'
      // const endTime = '2020-07-04 00:00:00'
      const listQuery = {
        startTime: startTime,
        endTime: endTime
      }
      // 获取当日数据
      countbyLocation(listQuery).then(response => {
        var data = response.data
        // 负一层
        this.tab1.right.temp = data[0].temp
        this.tab1.right.normal = data[0].normal
        this.tab1.right.abnormal = data[0].abnormal
        this.tab1.left.count = data[1].count
        this.tab1.left.normal = data[1].normal
        this.tab1.left.abnormal = data[1].abnormal
        // 一层
        this.tab2.left.count = data[2].count
        this.tab2.left.normal = data[2].normal
        this.tab2.left.abnormal = data[2].abnormal
        this.tab2.right.temp = data[3].temp
        this.tab2.right.normal = data[3].normal
        this.tab2.right.abnormal = data[3].abnormal
        // 四层
        this.tab3.left.count = data[4].count
        this.tab3.right.count = data[5].count
        // 八层
        this.tab4.print = data[6].print
      })
      // 获取七日数据
      const startTime1 = getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd') + ' 00:00:00'
      const endTime1 = getDayTime(new Date().getTime()).Format('yyyy-MM-dd') + ' 23:59:59'
      // const startTime1 = '2020-06-01 00:00:00'
      // const endTime1 = '2020-07-04 00:00:00'
      const listQuery1 = {
        startTime: startTime1,
        endTime: endTime1
      }
      // 获取七日数据
      countbyLocation(listQuery1).then(response => {
        var data = response.data
        // 四层
        this.tab3.left.countSeven = data[4].count
        this.tab3.right.countSeven = data[5].count
        // 八层
        this.tab4.printSeven = data[6].print
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .y_bj {
    width: 800px;
    height: 460px;
    margin-left: 15%;
    /*text-align: center;*/
    overflow:hidden;
  }
  .tab-pane {
    text-align: center;
    background-color: #304156;
  }
  .tip-text {
    color: white;
    font-size: 8pt;
  }
  .tip-text-margin {
    margin: 3px;
  }
  .tip-div {
    border: 1pt solid lime;
    position: relative;
    background-color: #304156;
    padding: 10px;
    width: 135px;
  }
  .tip1-l-loc { margin-top: 235px; margin-left: 90px; }
  .tip1-r-loc { margin-left: 205px; }
  .tip2-l-loc { margin-top: 238px; margin-left: 385px; }
  .tip2-r-loc { margin-left: 315px; }
  .tip3-l-loc { margin-left: 98px; }
  .tip3-r-loc { margin-left: 387px; }
  .tip4-loc { margin-top: 230px; margin-left: 607px; }
  .point {
    width: 12px;
    height: 12px;
    background-color: lime;
    border-radius: 50%;
    position: relative;
    /*display: inline-block;*/
  }
  .point-tab1-l-loc { margin-left: 82px;}
  .point-tab1-r-loc { margin-top: 182px; margin-left: 196px; }
  .point-tab2-l-loc { margin-left: 516px; }
  .point-tab2-r-loc { margin-top: 70%; margin-left: 300%; }
  .point-tab3-l-loc { margin-top: 276px; margin-left: 90px; }
  .point-tab3-r-loc { margin-top: 270px; margin-left: 378px; }
  .point-tab4-loc { margin-left: 738px; }
  /* 设置动画前颜色 */
  .point-flicker:after {
    background-color: chartreuse;
  }

  /* 设置动画后颜色 */
  .point-flicker:before {
    background-color: rgba(0, 168, 253, 0.2);
  }

  /* 设置动画 */
  .point-flicker:before,
  .point-flicker:after {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border-radius: 50%;
    /* CSS3 animation 属性 网址 */
    /* https://www.w3school.com.cn/cssref/pr_animation.asp */
    animation: warn 1.5s ease-out 0s infinite;
  }

  /* @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 */
  @keyframes warn {
    0% {
      transform: scale(0.5);
      opacity: 1;
    }

    30% {
      opacity: 1;
    }

    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }
</style>