<template>
  <div>
    <div>
      <liner v-if="show === 'liner'"/>
      <caseShell v-if="show === 'caseShell'"/>
      <foaming v-if="show === 'foaming'"/>
      <foaming2 v-if="show === 'foaming2'"/>
      <pourInto f v-if="show === 'pourInto'"/>
      <finalAssembly v-if="show === 'finalAssembly'"/>
      <scanDown v-if="show === 'scanDown'"/>
      <week v-if="show === 'week'"/>
    </div>
    <div class="time" id="time">{{ time }}</div>
    <div class="date" id="date">{{ date }}</div>
    <div class="logo"></div>
    <div class="exit" @click="exitFun"></div>
  </div>
</template>

<script>
import liner from '../board/liner'
import caseShell from '../board/caseShell/index2'
import foaming from '../board/foaming'
import foaming2 from '../board/foaming/index2'
import pourInto from '../board/pourInto/index2'
import finalAssembly from '../board/finalAssembly'
import scanDown from '../board/scanDown'
import week from '../board/week'

let getDateIntervalFun = null
export default {
  name: 'BoardIndex',
  props: {
    exit: {
      type: Function,
      default: null
    },
    params: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      time: '',
      date: '',
      show:this.params
    }
  },
  components: {
    liner,
    caseShell,
    foaming,
    foaming2,
    pourInto,
    finalAssembly,
    scanDown,
    week,
  },
  created() {
    const getDate = () => {
      let date = new Date()
      let YYYY = date.getFullYear()
      let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
      let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
      let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
      let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
      let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
      this.date = `${YYYY} - ${MM} - ${dd}`
      this.time = `${HH} : ${mm} : ${ss}`
    }
    getDate()
    getDateIntervalFun = setInterval(getDate, 1000)
  },
  beforeDestroy() {
    getDateIntervalFun = null
  },
  methods: {
    exitFun() {
      this.exit()
    }
  }
}
</script>
<style scoped>
.time, .date {
  position: absolute;
  font-size: 0.8vw;
  color: #fcfcfc;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}


.exit {
  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 1%;
  right: 1%;
  font-weight: bold;
  width: 2vw;
  height: 2vw;
  color: #e7b219;
}

.time {
  top: 3.2%;
  left: 85.8%;
}

.date {
  top: 3.2%;
  left: 94.1%;
}

.logo {
  background-image: url("../../assets/board/logo.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 8vw;
  height: 4vw;
  position: absolute;
  top: -1%;
  left: 1%;
}
</style>
