<template>
  <el-row style="margin-bottom: 30px">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane v-for="item in tabList" :key="item.value" :label="item.label" :name="item.name" class="tab-pane">
        <div :style="item.style" class="y_bj">
          <div :style="item.cover" class="cover">{{ item.name }}</div>
          <div v-for="data in item.data" :key="data.index">
            <div style="float:left">
              <div :class="[data.tclass]" class="tip-div">
                <el-row class="tip-text">当日通行人数：{{ data.value.count }}</el-row>
              </div>
              <div :class="[data.pclass]" class="point point-flicker"/>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!--</div>-->
  </el-row>
</template>

<script>
import { peopleCountByDevice } from '@/api/statistics'
import { getDayTime } from '@/utils/dateutils'
export default {
  name: 'MapPicture',
  data() {
    const tab1Img = {
      backgroundImage: 'url(' + require('@/assets/eryuan/B1.png') + ')',
      backgroundColor: '#304156',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100%'
      // width: '70%'
    }
    const tab2Img = {
      backgroundImage: 'url(' + require('@/assets/eryuan/4.png') + ')',
      backgroundColor: '#304156',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100%'
      // width: '70%'
    }
    const cover1 = {
      top: '188px',
      marginLeft: '368px',
      fontSize: '20px'
    }
    const cover2 = {
      top: '216px',
      marginLeft: '323px',
      fontSize: '18px'
    }
    return {
      tabList: [
        { name: 'B1', label: 'B1层', style: tab1Img, cover: cover1,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab1-l-loc', tclass: 'tip1-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab1-m-loc', tclass: 'tip1-m-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab1-r-loc', tclass: 'tip1-r-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab1-r-loc1', tclass: 'tip1-r-loc1' }
          ]
        },
        { name: 'B2', label: 'B2层', style: tab1Img, cover: cover1,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab1-l-loc', tclass: 'tip1-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab1-m-loc', tclass: 'tip1-m-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab1-r-loc', tclass: 'tip1-r-loc' }
          ]
        },
        { name: 'B3', label: 'B3层', style: tab1Img, cover: cover1,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab1-l-loc', tclass: 'tip1-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab1-m-loc', tclass: 'tip1-m-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab1-r-loc', tclass: 'tip1-r-loc' }
          ]
        },
        { name: '二', label: '二层', style: tab2Img, cover: cover2,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab2-l-loc', tclass: 'tip2-l-loc' }
          ] },
        { name: '三', label: '三层', style: tab2Img, cover: cover2,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-l-loc', tclass: 'tip3-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-r-loc', tclass: 'tip3-r-loc' }
          ] },
        { name: '四', label: '四层', style: tab2Img, cover: cover2,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab2-l-loc', tclass: 'tip2-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab4-l-loc', tclass: 'tip4-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab4-r-loc', tclass: 'tip4-r-loc' }
          ] },
        { name: '五', label: '五层', style: tab2Img, cover: cover2,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-l-loc', tclass: 'tip3-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-r-loc', tclass: 'tip3-r-loc' }
          ] },
        { name: '六', label: '六层', style: tab2Img, cover: cover2,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-l-loc', tclass: 'tip3-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-r-loc', tclass: 'tip3-r-loc' }
          ] },
        { name: '七', label: '七层', style: tab2Img, cover: cover2,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-l-loc', tclass: 'tip3-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-r-loc', tclass: 'tip3-r-loc' }
          ] },
        { name: '八', label: '八层', style: tab2Img, cover: cover2,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-l-loc', tclass: 'tip3-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-r-loc', tclass: 'tip3-r-loc' }
          ] },
        { name: '九', label: '九层', style: tab2Img, cover: cover2,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-l-loc', tclass: 'tip3-l-loc' },
            { value: { count: '-', normal: '0', abnormal: '0' }, pclass: 'point-tab3-r-loc', tclass: 'tip3-r-loc' }
          ] }
      ],
      activeName: 'B1',
      tab1: {
        left: {
          count: '-',
          normal: '0',
          abnormal: '0'
        },
        right: {
          temp: '0',
          normal: '0',
          abnormal: '0'
        }
      },
      tab2: {
        left: {
          count: '-',
          normal: '0',
          abnormal: '0'
        },
        right: {
          temp: '0',
          normal: '0',
          abnormal: '0'
        }
      },
      tab3: {
        left: {
          count: '-',
          countSeven: '0'
        },
        right: {
          count: '-',
          countSeven: '0'
        }
      },
      tab4: {
        print: '0',
        printSeven: '0'
      }
    }
  },
  mounted() {
    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 listQuery = {
        startTime: startTime,
        endTime: endTime
      }
      // 获取当日数据
      peopleCountByDevice(listQuery).then(response => {
        const data = response.data
        for (const tab of this.tabList) {
          if (tab.name === '三' || tab.name === '五' || tab.name === '六' || tab.name === '七' || tab.name === '八' || tab.name === '九') {
            tab.data[0].value.count = data.filter(item => {
              return item.deviceName.indexOf(tab.label + '8') !== -1
            })[0].count
            tab.data[1].value.count = data.filter(item => {
              return item.deviceName.indexOf(tab.label + '9') !== -1
            })[0].count
          } else if (tab.name === '四') {
            tab.data[0].value.count = data.filter(item => {
              return item.deviceName.indexOf(tab.label + '信展') !== -1
            })[0].count
            tab.data[1].value.count = data.filter(item => {
              return item.deviceName.indexOf(tab.label + '8') !== -1
            })[0].count
            tab.data[2].value.count = data.filter(item => {
              return item.deviceName.indexOf(tab.label + '9') !== -1
            })[0].count
          } else if (tab.name === 'B1') {
            tab.data[0].value.count = data.filter(item => {
              return item.deviceName.indexOf(tab.label + '8') !== -1
            })[0].count
            tab.data[1].value.count = data.filter(item => {
              return item.deviceName.indexOf(tab.label + '9号西闸机') !== -1
            })[0].count
            tab.data[2].value.count = data.filter(item => {
              return item.deviceName.indexOf(tab.label + '9号东闸机') !== -1
            })[0].count
            tab.data[3].value.count = data.filter(item => {
              return item.deviceName.indexOf(tab.label + '9号西-1') !== -1
            })[0].count
          } else if (tab.name === '二') {
            if (data.filter(item => {
              return item.deviceName.indexOf(tab.label) !== -1
            }).length !== 0) {
              tab.data[0].value.count = data.filter(item => {
                return item.deviceName.indexOf(tab.label) !== -1
              })[0].count
            }
          } else if (tab.name === 'B2' || tab.name === 'B3') {
            if (data.filter(item => {
              return item.deviceName.indexOf(tab.label) !== -1
            }).length !== 0) {
              tab.data[0].value.count = data.filter(item => {
                return item.deviceName.indexOf(tab.label + '8') !== -1
              })[0].count
              tab.data[1].value.count = data.filter(item => {
                return item.deviceName.indexOf(tab.label + '9号西闸机') !== -1
              })[0].count
              tab.data[2].value.count = data.filter(item => {
                return item.deviceName.indexOf(tab.label + '9号东闸机') !== -1
              })[0].count
            }
          }
        }
      })

      // 获取七日数据
      // 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 listQuery1 = {
      //   startTime: startTime1,
      //   endTime: endTime1
      // }
    }
  }
}
</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;
  }
  .cover{
    position: absolute;
    background-color: #304156;
    color: #02fafb;
    font-weight: bolder;
    left: 15%;
    width: 25px;
    height: 25px;
    font-family: inherit;
  }
  .tip-div {
    border: 1pt solid lime;
    position: relative;
    background-color: #304156dd;
    padding: 10px;
    width: 135px;
  }
  .point {
    width: 12px;
    height: 12px;
    background-color: lime;
    border-radius: 50%;
    position: relative;
    /*display: inline-block;*/
  }
  .tip1-l-loc { margin-top: 260px; margin-left: 325px; }
  .tip1-m-loc { margin-top: 310px;margin-left: -25px }
  .tip1-r-loc { margin-top: 250px;margin-left: 10px }
  .tip1-r-loc1 { margin-top: -68px;margin-left: 463px }

  .tip2-l-loc { margin-top: 325px; margin-left: 190px; }

  .tip3-l-loc { margin-top: 253px; margin-left: 325px; }
  .tip3-r-loc { margin-top: 248px;margin-left: 115px }

  .tip4-l-loc { margin-top: 253px; margin-left: 0px; }
  .tip4-r-loc { margin-top: 248px;margin-left: 115px }

  .point-tab1-l-loc { margin-left: 468px;}
  .point-tab1-m-loc { margin-top: -50px; margin-left: 110px; }
  .point-tab1-r-loc { margin-top: 10px; margin-left: 0px; }
  .point-tab1-r-loc1 { margin-top: 5px; margin-left: 590px; }

  .point-tab2-l-loc { margin-left: 175px; }

  .point-tab3-l-loc { margin-left: 483px;}
  .point-tab3-r-loc { margin-top: 5px; margin-left: 112px; }

  .point-tab4-l-loc { margin-left: 158px;}
  .point-tab4-r-loc { margin-top: 5px; margin-left: 112px; }

  /* 设置动画前颜色 */
  .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>