<template>
  <div class="container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
    <div style="display: flex;width: 100%;height: 100%;flex-direction: column; justify-content: center; align-items: center;">
      <div style="height: 200px;line-height: 200px; font-size: 60px; color: #ffffff;">
        PDC量产线生产可视化看板
      </div>
      <div style="display: flex; justify-content: center; align-items: center; height: 30%; font-size: 24px; color: #ffffff;">
        <el-button type="success" class="bigBtn" @click="goToPage(1)">Module看板</el-button>
        <el-button type="warning" class="bigBtn" @click="goToPage(2)">Pack看板</el-button>
        <el-button type="primary" class="bigBtn" @click="goToCarousel()">轮播看板</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      },
      resizeHandler: null
    }
  },
  computed: {
  },
  watch: {},
  props: {},
  created() {
  },
  mounted() {
    this.setScale()
    this.resizeHandler = this.setScale.bind(this)
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler)
      this.resizeHandler = null
    }
  },
  methods: {
    goToPage(type) {
      if (type === 1) {
        this.$router.push({ path: '/module' })
      } else if (type === 2) {
        this.$router.push({ path: '/pack' })
      }
    },
    goToCarousel() {
      this.$router.push({ path: '/carousel' })
    },
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  //background-image:url("../assets/image/bg1.png");background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
}
.bigBtn {
  width: 300px;
  height: 100px;
  font-size: 40px;
  margin: 0 20px;
}
</style>
