<template>
  <div class="contain">
    <!-- 学校logo -->
    <div class="logo"></div>
    <!-- 时间 -->
    <div class="time">
      <span>2023-05-16</span>
      <span style="margin-left:5px">星期二</span>
      <span style="margin-left:5px">16:51:15</span>
    </div>
    <!-- 中间滚动警告 -->
    <div class="jingao">
      <div class="jingtop"></div>
      <div class="jingtu"></div>
      <div class="jingtxt">预警信息</div>
    </div>
    <!-- 滚动部分 -->
    <div class="my-inbox1" @click="clickYujin">
      <div class="my-inbox" ref='box'>
        <div class="my-list" v-for="(item,index) in tableData2" :key='index' ref='list'>
          <!--{{item.name}}刚刚购买了产品-->
          <span class="my-uname">{{item.alarmContent}}</span>
        </div>
      </div>
    </div>
    <!-- 左上 -->
    <leftTop class="lefttop"></leftTop>
    <!-- 左中 -->
    <leftCenter class="leftcenter"></leftCenter>
    <!-- 左下 -->
    <leftButtom class="leftbuttom"></leftButtom>
    <!-- 中间上层 -->
    <centerTop class="centertop"></centerTop>
    <!-- 中间下层 -->
    <centerbuttom class="centerbuttom"></centerbuttom>
    <!-- 右边上层 -->
    <righttop class="righttop"></righttop>
    <!-- 右边中间 -->
    <rightCenter class="rightcenter"></rightCenter>
    <!-- 右边下层 -->
    <rightbuttom class="rightbuttom"></rightbuttom>
  </div>
</template>

<script>
import leftTop from '@/components/leftTop.vue'
import leftCenter from '@/components/leftCenter.vue'
import leftButtom from '@/components/leftButtom.vue'
import centerTop from '@/components/centerTop.vue'
import centerbuttom from '@/components/centerbuttom.vue'
import righttop from '@/components/righttop.vue'
import rightCenter from '@/components/rightCenter.vue'
import rightbuttom from '@/components/rightbuttom.vue'
export default {
  name: 'index',
  components: {
    leftTop,
    leftCenter,
    leftButtom,
    centerTop,
    centerbuttom,
    righttop,
    rightCenter,
    rightbuttom
  },
  data() {
    return {
      tableData2:[
        {alarmContent:'1201教室空调未关，请及时关闭'},
        // {alarmContent:'1201教室空调未关，请及时关闭'},
      ],//预警滚动信息
      now_date:'',//当前时间
    }
  },
  mounted(){
    setTimeout(() => {//告警信息滚动
      
    }, 10)

    setTimeout(() => {//告警信息滚动
      this.$nextTick(() => {
        this.item = this.$refs.list
        console.log(this.length)
        var arr = []
        var margin = this.getMargin(this.item[0])
        for (var i = 0; i < this.length; i++) {
          arr.push(this.item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
        }
        this.disArr = arr
        console.log(arr)
        // this.moveLeft()
      })
    }, 1000)
  },
  
  methods:{
    // 获取margin属性
    getMargin (obj) {
      var marg = window.getComputedStyle(obj, null)['margin-right']
      marg = marg.replace('px', '')
      return Number(marg) // 强制转化成数字
    },
    // 移动的方法
    moveLeft () {
      var that = this
      var outbox = this.$refs.box
      // 初始位置
      var startDis = 0
      this.nowTime = setInterval(function () {
        startDis -= 0.4
        // console.log('初始化移动：', startDis)
        // console.log('初始化移动：', Math.abs(startDis) > Math.abs(that.disArr[0]))
        // console.log('初始化移动2：', Math.abs(that.disArr[0]))
        if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
          // 每次移动完一个元素的距离，就把这个元素的宽度
          that.disArr.push(that.disArr.shift())
          // 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项
          that.tableData2.push(that.tableData2.shift())
          startDis = 0
          // console.log('移动',that.tableData)
        } else {
          // console.log('不来不来就不来...')
        }
        outbox.style = `transform: translateX(${startDis}px)`
      }, 1000 / 60)
    },

    //获取当前时间
    getNowDate() {
      var _this = this;
      // this.timer = setInterval(function() {
        var aData = new Date();
        // console.log(aData) //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间)
        // this.value = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
        var month = aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1) : aData.getMonth() + 1;
        var date = aData.getDate() <= 9 ? "0" + aData.getDate() : aData.getDate();
        var Hour = aData.getHours() <= 9 ? "0" + (aData.getHours()) : aData.getHours();
        var Miunte = aData.getMinutes() <= 9 ? "0" + (aData.getMinutes()) : aData.getMinutes();
        var Seconds = aData.getSeconds() <= 9 ? "0" + (aData.getSeconds()) : aData.getSeconds();
        var week = "星期" + "日一二三四五六".charAt(aData.getDay());
        // console.log(aData.getTime())
        _this.now_date = aData.getFullYear() + "年" + month + "月" + date + '日';
        _this.week = week
      // }, 86400000);
    },
  }
}
</script>
<style lang="scss" scoped>
.contain{
  width: 1920px;
  height: 1080px;
  background-image: url('../assets/index/background.png');
  background-size: 100%;
  // z-index: 2;
}
// 学校logo
.logo{
  position: absolute;
  margin: 0px 0 0 0px;
  background-image: url('../assets/index/top-bg.png');
  background-size: 100%;
  width: 1920px;
  height: 98px;
}
// 时间
.time{
  position: absolute;
  margin: 55px 0 0 1683px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.7);
}
// /左上方
.lefttop{
  position: absolute;
  margin: 122px 0 0 30px;
}
// 左中
.leftcenter{
  position: absolute;
  margin: 439px 0 0 30px;
}
// 左下
.leftbuttom{
  position: absolute;
  margin: 754px 0 0 30px;
}
// 中间上层
.centertop{
  position: absolute;
  margin: 211px 0 0 502px;
}
// 中间下层
.centerbuttom{
  position: absolute;
  margin: 735px 0 0 502px;
}
// 右边上层
.righttop{
  position: absolute;
  margin: 124px 0 0 1435px;
}
// 右边中间
.rightcenter{
  position: absolute;
  margin: 440px 0 0 1435px;
}
// 右边下层
.rightbuttom{
  position: absolute;
  margin: 756px 0 0 1435px;
}

// 中间滚动警告
.jingao{
  position: absolute;
  margin: 124px 0 0 510px;
  width: 882px;
  height: 61px;
  background-image: url('../assets/index/scrollkuang.png');
  background-size: 100%;
}
.jingtop{
  position: absolute;
  width: 882px;
  height: 9px;
  background-image: url('../assets/index/scroll.png');
  background-size: 100%;
}
.jingtu{
  position: absolute;
  margin: 7px 0 0 9px;
  width: 52px;
  height: 52px;
  background-image: url('../assets/index/yujin.png');
  background-size: 100%;
}
.jingtxt{
  position: absolute;
  margin: 12px 0 0 68px;
  font-size: 30px;
  font-weight: 400;
  line-height: 39px;
  color: rgba(255, 186, 26, 1);
  font-family : '优设标题黑';
}
// 滚动部分
.my-inbox1{
    position: absolute;
    margin: 136px 0 0 700px;
    width: 690px;
    overflow: hidden;
  }
  .my-inbox{
    white-space: nowrap;
    .my-inin{
      margin: 0px 0 0 20px;
      width: 670px;
      height: 40px;
    }
    .my-list{
      margin-right: 100px;
      display: inline-block;
      font-size: 20px;
      // height: 20px;
      text-indent:30px;
      line-height: 40px;
      .my-uname{
        /*color: #FF8900;*/
        color: #FFFFFF;
      }
    }
  }
</style>
