<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
            <!-- <span class="title-text">流通币、纪念币仓储数据可视化大屏</span> -->
            <div class="title">
              <!-- <dv-decoration-11 class="title-text">dv-decoration-11</dv-decoration-11> -->
              <dv-decoration-11 class="title-text" :reverse="true"
                >流通币、纪念币仓储数据可视化大屏</dv-decoration-11
              >
              <dv-decoration-6
                class="dv-dec-6"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColor"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>
        <!-- 第二行111 style="margin-top: 20px;" -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <dv-border-box-8 class="react-left container111" :dur="7">
              <div class="text">{{ dayInfo.dayinQty }}</div>
              <div class="text1">{{ dayInfo.qty }}-今日入库（箱）</div>
            </dv-border-box-8>
            <dv-border-box-8
              class="react-left container111 ml-5"
              :reverse="true"
              :dur="7"
            >
              <div class="text">{{ dayInfo.qty }}</div>
              <div class="text1">{{ dayInfo.qty }}-当前库存（箱）</div>
            </dv-border-box-8>
          </div>
          <div class="d-flex aside-width">
            <dv-border-box-8 class="react-right container111 mr-5" :dur="7">
              <div class="text">{{ dayInfo.dayOutQty }}</div>
              <div class="text1">{{ dayInfo.qty }}-今日出库（箱）</div>
            </dv-border-box-8>
            <dv-border-box-8
              class="react-right container111"
              :reverse="true"
              :dur="7"
            >
              <!-- <timeago :datetime="dateYear"></timeago> -->
              <div class="text_date">
                <!-- {{ dateDay }} -->
                {{ dateYear }} {{ dateWeek }}
              </div>
            </dv-border-box-8>
          </div>
        </div>

        <!-- 5555555555555555 -->
        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div>
              <dv-border-box-13>
                <centerRight2 />
              </dv-border-box-13>
            </div>
            <div>
              <dv-border-box-1>
                <centerRight1 />
                <center />
              </dv-border-box-1>
            </div>
            <div>
              <dv-border-box-13 style="padding-left: 0px">
                <centerRight3 />
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第四行数据 -->
          <div class="wrapper" v-if="swiperList.length > 5">
            <div class="part">
              <swiper
                class="swiper-containew"
                ref="mySwiper"
                :options="swiperOptions"
              >
                <swiper-slide v-for="(item,index) in swiperList" :key="index">
                  <dv-border-box-13 class="grid-item">
                    <bottomLeft ref="swiper" :info="item"/>
                  </dv-border-box-13>
                </swiper-slide>
              </swiper>
            </div>
          </div>

          <div v-else class="bottom-box">
            <dv-border-box-13
              v-for="(item,index) in swiperList"
              :key="index"
              class="grid-item"
            >
              <bottomLeft ref="swiper" :info="item"/>
            </dv-border-box-13>
          </div>
          <!-- 第四行数据end -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from '../utils/drawMixin'
import { formatTime } from '../utils/index.js'
import centerLeft1 from './centerLeft1'
import centerLeft2 from './centerLeft2'
import centerRight1 from './centerRight1'
import centerRight2 from './centerRight2'
import centerRight3 from './centerRight3'
import center from './center'
import bottomLeft from './bottomLeft'
import bottomRight from './bottomRight'
import 'swiper/dist/css/swiper.css'

import { getInfo } from '@/api/screen'

export default {
  mixins: [drawMixin],
  data() {
    return {

      timer: null,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000'],
      swiperOptions: {
        // 循环不间断图片连在一起
        loop: true,
        // 循环时间(毫秒)
        autoplay: 2000,
        // 展示多少张图片
        slidesPerView: 5,
        // 图片间的间隔
        spaceBetween: 5
      },
      swiperList: [], // 总库滚动list
      requestTime: 1000*60*1, // 轮询请求时间
    }
  },
  components: {
    centerLeft1,
    centerLeft2,
    centerRight1,
    centerRight2,
    centerRight3,
    center,
    bottomLeft,
    bottomRight
  },
  mounted() {
    this.timeFn()
    // this.getSwiper()
    this.cancelLoading()
  },
  created() {
    this.getTableData()
  },
  beforeDestroy() {
    clearTimerout(this.timer)
    // clearInterval(this.timing)
  },
  methods: {
    getTableData() {
      console.log('轮询请求接口')
      getInfo().then(res => {
        if (res.code === 0) {
          this.swiperList = res.retObj.wareList
        }
      })
      this.timer = setTimeout(async () => {
        await (this.timer && clearTimeout(this.timer))
        await this.getTableData()
      }, this.requestTime)
    },
    timeFn() {
      // this.dateDay = formatTime(new Date(), 'HH: mm: ss')
      this.dateYear = formatTime(new Date(), 'yyyy年MM月dd日')
      this.dateWeek = this.weekday[new Date().getDay()]
      // this.timing = setInterval(() => {
      // }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
.container {
  background-color: #0f1325;
  box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.5);
  border-radius: 10px; /* 设置圆角的大小为10像素 */
  height: 4.2rem;
  // border: #f00 0.1333vw solid;
}
.container1 {
  background-color: #0f1325;
  box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.5);
  border-radius: 10px; /* 设置圆角的大小为10像素 */
  height: 4.2rem;
  background-color: #3b70d3;
}

.container111 {
  background-color: #0f1325;
  // box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.5);
  // border-radius: 10px; /* 设置圆角的大小为10像素 */
  height: 4.2rem;
  // border: #f00 0.1333vw solid;
}
.jc-center {
  height: 3.75rem; /* 60/16 */
}
.wrapper {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}
.part {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
}
.swiper-containew {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
</style>