<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, index) in item.data" :key="index" :class="data.fClass">
            <!-- <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 :class="p4" 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 newTab1Img = {
      backgroundImage: 'url(' + require('@/assets/eryuan/79_1.png') + ')',
      backgroundColor: '#304156',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100%',
      width: '700px',
      height: '720px'
    }
    const newTabB1Img = {
      backgroundImage: 'url(' + require('@/assets/eryuan/79_B1.png') + ')',
      backgroundColor: '#304156',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100%',
      width: '660px',
      height: '720px'
    }
    const newTabB2Img = {
      backgroundImage: 'url(' + require('@/assets/eryuan/79_B2.png') + ')',
      backgroundColor: '#304156',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100%',
      width: '660px',
      height: '720px'
    }
    const cover1 = {
      top: '357px',
      marginLeft: '252px',
      fontSize: '20px'
    }
    const cover2 = {
      top: '392px',
      marginLeft: '255px',
      fontSize: '18px'
    }
    return {
      tabList: [
        { name: 'B1', label: 'B1层', style: newTabB1Img, cover: cover1,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, text: 'B1东南门', tclass: 't1', fClass: 'f1' },
            { value: { count: '-', normal: '0', abnormal: '0' }, text: 'B1屏蔽机房', tclass: 't2', fClass: 'f2' },
            { value: { count: '-', normal: '0', abnormal: '0' }, text: 'B1电梯厅门', tclass: 't3', fClass: 'f3' },
            { value: { count: '-', normal: '0', abnormal: '0' }, text: 'B1西北门', tclass: 't4', fClass: 'f4' }
          ]
        },
        { name: 'B2', label: 'B2层', style: newTabB2Img, cover: cover1,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, text: 'B2西北门', tclass: 'B2t1', fClass: 'B2f1' },
            { value: { count: '-', normal: '0', abnormal: '0' }, text: 'B2东北门', tclass: 'B2t2', fClass: 'B2f2' },
            { value: { count: '-', normal: '0', abnormal: '0' }, text: 'B2电梯门东', tclass: 'B2t3', fClass: 'B2f3' },
            { value: { count: '-', normal: '0', abnormal: '0' }, text: 'B2东南门', tclass: 'B2t4', fClass: 'B2f4' }
          ]
        },
        // { 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: newTab1Img, cover: cover2,
          data: [
            { value: { count: '-', normal: '0', abnormal: '0' }, text: '一层西北角', tclass: 'onet1', fClass: 'onef1' },
            { value: { count: '-', normal: '0', abnormal: '0' }, text: '一层东南角', tclass: 'onet2', fClass: 'onef2' }
          ] }
        // { 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
        //     }
        //   }
        // }
        data.forEach(item => {
        // ---------------------------------------------------B1------------------------------------------------------------
          if (item.deviceName === 'B1东南门') {
            this.tabList[0].data[0].value.count = item.count
          }
          if (item.deviceName === 'B1屏蔽机房') {
            this.tabList[0].data[1].value.count = item.count
          }
          if (item.deviceName === 'B1电梯厅门') {
            this.tabList[0].data[2].value.count = item.count
          }
          if (item.deviceName === 'B1西北门') {
            this.tabList[0].data[3].value.count = item.count
          }
          // -------------------------------------------------B2-------------------------------
          if (item.deviceName === 'B2西北门') {
            this.tabList[1].data[0].value.count = item.count
          }
          if (item.deviceName === 'B2东北门') {
            this.tabList[1].data[1].value.count = item.count
          }
          if (item.deviceName === 'B2电梯门东') {
            this.tabList[1].data[2].value.count = item.count
          }
          if (item.deviceName === 'B2东南门') {
            this.tabList[1].data[3].value.count = item.count
          }
          // -----------------------------------------------一层------------------------------
          if (item.deviceName === '一层西北角') {
            this.tabList[2].data[0].value.count = item.count
          }
          if (item.deviceName === '一层东南角') {
            this.tabList[2].data[1].value.count = item.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 {
    position: relative;
    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;*/
  }
  // ---------------------------------------B1----------------------------------------------
  .f1 { //B1东南门
    position: relative;
    // position: absolute;
    width: 20px;
    top: 522px;
    left: 462px;
  }
  .t1 { //B1东南门通行人数
    position: absolute;
    top: -40px;
    left: 17px;
  }
  .f2 { //B1屏蔽机房
    position: relative;
    // position: absolute;
    width: 20px;
    top: 504px;
    left: 207px;
  }
  .t2 { //B1屏蔽机房通行人数
    position: absolute;
    top: -40px;
    left: 22px;
  }
  .f3 { //B1电梯厅门
    position: relative;
    top: 510px;
    left: 223px;
  }
  .t3 { //B1电梯厅门通行人数
    position: absolute;
    top: 28px;
    left: 15px;
  }
  .f4 { //B1西北门
    position: relative;
    top: 141px;
    left: 135px;
  }
  .t4 { //B1西北门通行人数
    position: absolute;
    top: -46px;
    left: 22px;
  }
  // ---------------------------------------------------B2------------------------------
  .B2f1 { //B2西北门
    position: relative;
    top: 230px;
    left: 122px;
  }
  .B2t1 { //B2西北门通行人数
    position: absolute;
    top: -46px;
    left: 22px;
  }
  .B2f2 { //B2东北门
    position: relative;
    top: 114px;
    left: 548px
  }
  .B2t2 { //B2东北门通行人数
    position: absolute;
    top: -40px;
    left: -142px;
  }
  .B2f3 { //B2电梯门东
    position: relative;
    top: 479px;
    left: 283px;
  }
  .B2t3 { //B2电梯门东通行人数
    position: absolute;
    top: -43px;
    left: -146px;
  }
  .B2f4 { //B2东南门
    position: relative;
    top: 472px;
    left: 458px;
  }
  .B2t4 { //B2东南门东通行人数
    position: absolute;
    top: -40px;
    left: 22px;
  }
// ------------------------------------------------一层---------------------------------------------
  .onef1 { //一层西北角
    position: relative;
    top: 156px;
    left: 85px;
  }
  .onet1 { //一层西北角通行人数
    position: absolute;
    top: -47px;
    left: 22px;
  }
  .onef2 { //一层东南角
    position: relative;
    top: 482px;
    left: 589px;
  }
  .onet2 { //一层东南角通行人数
    position: absolute;
    top: -42px;
    left: -137px;
  }


  .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>