<template>
    <div class="home-main">
        <!--    <div v-show="currentView !== 'intersectionGroups'" class="viewName">{{ viewName[currentView] }}</div>-->
        <!--    <div class="viewName">{{ viewName[currentView] }}</div>-->
        <div class="changePage">
            <div class="pre pageItem" @click="preTo()" v-show="this.index!==0"></div>
            <div class="viewName">{{ viewName[currentView] }}</div>
            <div class="next pageItem" @click="nextTo()" v-show="this.index!==8"></div>
        </div>


        <situation-time v-show="timeShow" class="timeCenter" :time="time"/>
        <accidentScene v-if="currentView === 'accidentScene'"/>
        <intersectionGroups ref="intersectionGroups" v-if="currentView === 'intersectionGroups'"/>
        <phaseAirPlay ref="phaseAirPlay" v-if="currentView === 'phaseAirPlay'"/>
        <straightLeftConflict ref="straightLeftConflict" v-if="currentView === 'straightLeftConflict'"/>
        <dangerousDriving v-if="currentView === 'dangerousDriving'"/>
        <slowTraffic v-if="currentView === 'slowTraffic'"/>
        <drones ref="drones" v-if="currentView === 'drones'"/>
        <mobileBaseStation ref="mobileBaseStation" v-if="currentView === 'mobileBaseStation'"/>
    </div>
</template>

<script>
import intersectionGroups from "../intersectionGroups/index.vue";
import accidentScene from "../accidentScene/index.vue";
import phaseAirPlay from "../phaseAirPlay/index.vue";
import straightLeftConflict from "../straightLeftConflict/index.vue";
import dangerousDriving from "../dangerousDriving/index.vue";
import slowTraffic from "../slowTraffic/index.vue";
import Drones from "../drones/index.vue";
import MobileBaseStation from "../mobileBaseStation/index.vue";
import SituationTime from "../intersectionGroups/situationTime.vue";

export default {
  name: "home",
  components: {
    SituationTime,
    MobileBaseStation,
    Drones,
    slowTraffic,
    dangerousDriving,
    straightLeftConflict,
    phaseAirPlay,
    accidentScene,
    intersectionGroups
  },
  computed: {
    time() {
      return this.$store.state.dataset.currentTime
    },
  },

  data() {
    return {
      index: 0,
      timeShow: false,
      currentView: 'intersectionGroups',
      viewNameArray: [
        "intersectionGroups",
        "intersectionGroups",
        "drones",
        "mobileBaseStation",
        "slowTraffic",
        "dangerousDriving",
        "accidentScene",
        "straightLeftConflict",
        "phaseAirPlay",
      ],
      viewName: {
        accidentScene: '事故场景',
        intersectionGroups: '组群场景',
        phaseAirPlay: '相位空放',
        straightLeftConflict: '直左冲突',
        dangerousDriving: '危险驾驶',
        slowTraffic: '慢行交通',
        drones: '全域感知',
        mobileBaseStation: '可移动基站'
      }
    };
  },
  mounted() {
    console.log('store', this.$store)
    // 快捷键
    window.onkeydown = () => {
      console.log('event.keyCode', event.keyCode)

      // if (event.keyCode === 38) {
      //   this.preTo()
      // }
      //
      // if (event.keyCode === 40) {
      //   this.nextTo()
      // }

      if (event.keyCode === 33 || event.keyCode === 38) {
        this.preTo()
      }

      if (event.keyCode === 34 || event.keyCode === 40) {
        this.nextTo()
      }


      // alt + t 显示隐藏时间
      if (event.altKey && (event.keyCode === 84)) {
        this.timeShow = !this.timeShow
      }
      // alt + k 改变车牌号显示状态
      if (event.altKey && (event.keyCode === 75)) {
        if (['intersectionGroups', 'phaseAirPlay', 'straightLeftConflict', 'drones', 'mobileBaseStation'].includes(this.currentView)) {
          this.$refs[this.currentView].changeState()
        }
      }


      //Alt+1，3个路口群组（不带指标）
      if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
        this.currentView = 'intersectionGroups'
        this.index = 0
        this.$nextTick(() => {
          this.$refs.intersectionGroups.setMsgState(false)
          this.$refs.intersectionGroups.setBigView()
        })
      }
      //Alt+2 ，3个路口群组（带指标）
      if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
        this.currentView = 'intersectionGroups'
        this.index = 1
        this.$nextTick(() => {
          this.$refs.intersectionGroups.setMsgState(true)
          this.$refs.intersectionGroups.setSmallView()

        })
      }
      //Alt+3，全域感知场景
      if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
        this.currentView = 'drones'
        this.index = 2
      }
      //Alt+4，可移动智慧基站场景
      if (event.altKey && (event.keyCode === 52 || event.keyCode === 100)) {
        this.currentView = 'mobileBaseStation'
        this.index = 3
      }
      //Alt+5，慢行交通场景
      if (event.altKey && (event.keyCode === 53 || event.keyCode === 101)) {
        this.currentView = 'slowTraffic'
        this.index = 4
      }
      //Alt+6
      if (event.altKey && (event.keyCode === 54 || event.keyCode === 102)) {
        this.currentView = 'dangerousDriving'
        this.index = 5
      }
      //Alt+7
      if (event.altKey && (event.keyCode === 55 || event.keyCode === 103)) {
        this.currentView = 'accidentScene'
        this.index = 6
      }
      //Alt+8
      if (event.altKey && (event.keyCode === 56 || event.keyCode === 104)) {
        this.currentView = 'straightLeftConflict'
        this.index = 7
      }
      //Alt+9
      if (event.altKey && (event.keyCode === 57 || event.keyCode === 105)) {
        this.currentView = 'phaseAirPlay'
        this.index = 8
      }
    }
  },
  methods: {
    nextTo() {
      if (this.index !== 8) {
        this.index += 1
        this.currentView = this.viewNameArray[this.index]
        if (this.index === 1) {
          this.$nextTick(() => {
            this.$refs.intersectionGroups.setMsgState(true)
          })
        }
      }
    },
    preTo() {
      if (this.index !== 0) {
        this.index -= 1
        this.currentView = this.viewNameArray[this.index]
        if (this.index === 1) {
          this.$nextTick(() => {
            this.$refs.intersectionGroups.setMsgState(true)
          })
        }
        if (this.index === 0) {
          this.$nextTick(() => {
            this.$refs.intersectionGroups.setMsgState(false)
          })
        }
      }
    }
  },
  beforeDestroy() {
  },
};
</script>

<style lang='less' scoped>
.home-main {
  position: relative;
  height: 100%;
  width: 100%;

  .changePage {
    font-size: 20px;
    color: white;
    position: absolute;
    // left: 30px;
    left: 700px;
    height: 75px;
    display: flex;
    align-items: center;
    top: 20px;

    z-index: 11;

    .pageItem {
      width: 50px;
      height: 75px;
      line-height: 43px;
      cursor: pointer;
      background-size: auto 100%;

      background-position-x: left;
      background-repeat: no-repeat;
    }

    .pageItem:hover {
      background-color: rgba(10, 91, 133, 0.01);
    }

    .pre {
      background-image: url("../../assets/images/sc/leftpage.png");
    }

    .next {
      background-image: url("../../assets/images/sc/rightpage.png");

      background-position-x: right;
    }

    .viewName {
      display: flex;
      align-items: center;
      padding-left: 44px;


      background-image: url("../../assets/images/sc/nameIcon.png");
      width: 144px;
      height: 43px;
      background-size: 100% 100%;
    }
  }


  .timeCenter {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0
  }
}
</style>
<style>
.home-left {
    z-index: 11;
}

.home-right {
    z-index: 11;
}
</style>