<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" />
            <div class="title">
              <dv-decoration-11 class="title-text" :reverse="true"
                >流通币、纪念币仓储数据可视化大屏</dv-decoration-11
              >
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColor"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>
        <!-- 时间 -->
        <div class="text_date"><topDate /></div>
        <!-- 第二行-->
        <div class="wrapperTop">
          <swiper

            class="swiper-containewTop"
            ref="mySwiperTop"
            :options="swiperOptionsTop"
          >
            <swiper-slide v-for="(item, index) in dayInfoList" :key="index">
              <top1 ref="top1" :info="item" />
            </swiper-slide>
          </swiper>
        </div>
        <div class="body-box">
          <!-- 第三行数据 -->
          <div v-if="showTop" class="content-box" >
            <div>
              <dv-border-box-13>
                <centerRight2 :info="deptInfo" />
              </dv-border-box-13>
            </div>
            <div>
              <dv-border-box-1>
                <centerRight1 ref="center01" :tableList="planList" />
                <center ref="center02" :info="proportionInfo" />
              </dv-border-box-1>
            </div>
            <div>
              <dv-border-box-13>
                <centerRight3 :info="securitiesInfo" />
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第四行数据 -->
          <div class="wrapper">
            <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>
          <!-- 第四行数据end -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from '../utils/drawMixin'
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 top1 from './top1'
import topDate from './date'
import 'swiper/dist/css/swiper.css'

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

export default {
  mixins: [drawMixin],
  data() {
    return {
      loading: true,
      decorationColor: ['#568aea', '#000000'],
      swiperOptions: {
        // 循环不间断图片连在一起
        loop: true,
        // 循环时间(毫秒)
        autoplay: 0,
        // 展示多少张图片
        slidesPerView: 5,
        // 图片间的间隔
        spaceBetween: 5
      },
      swiperOptionsTop: {
        direction: 'vertical',
        // 循环不间断图片连在一起
        loop: true,
        // 循环时间(毫秒)
        autoplay: 0,
        // speed: 1000
      },
      deptInfo: {
        name: ['造币三部','造币二部','造币一部'],
        production: [0,0,0],
        inventory: [0,0,0]

      },
      planList: [],
      securitiesInfo: {
        name: ['-','-','-'],
        production: [0,0,0],
        inventory: [0,0,0]
      },
      dayInfoList: [{securities:'', qty:0, dayOutQty:0, dayInQty:0}],
      swiperList: [
        {wareCn:'-', securities: '-',qty:0,dayInQty:0,dayOutQty:0},
        {wareCn:'-', securities: '-',qty:0,dayInQty:0,dayOutQty:0},
        {wareCn:'-', securities: '-',qty:0,dayInQty:0,dayOutQty:0},
        {wareCn:'-', securities: '-',qty:0,dayInQty:0,dayOutQty:0},
        {wareCn:'-', securities: '-',qty:0,dayInQty:0,dayOutQty:0}
      ], // 总库滚动list
      proportionInfo: {proportionStr1:'纪念币库存占比', proportion1:0, proportionStr2:'流通币库存占比', proportion2:0},
      showTop: true,
      defWareAutoplay: 1000 * window.Glod.wareRollSecond, // 总库库存页面滚动毫秒数
      defSecuritiesAutoplay: 1000 * window.Glod.securitiesRollSecond // 品名库存页面滚动毫秒数
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    centerRight1,
    centerRight2,
    centerRight3,
    center,
    bottomLeft,
    top1,
    topDate
  },
  mounted() {
    this.getTableData()
    this.cancelLoading()
  },
  created() {
    setTimeout(() => {
      this.getTableData()
    }, 800)
  },
  beforeDestroy() {},
  methods: {
    async getTableData() {
      // console.log('轮询请求接口')
      const { retObj, code } = await getInfo()
      this.showTop = false
      if (code === 0) {
        console.log('轮询请求接口')
        this.swiperList = retObj.wareList
        if (this.swiperList.length > 5) {
          this.swiperOptions = {
            loop: true,
            autoplay: this.defWareAutoplay,
            slidesPerView: 5,
            spaceBetween: 5
          }
        } else {
          this.swiperOptions = {
            loop: true,
            autoplay: 0,
            slidesPerView: 5,
            spaceBetween: 5
          }
        }
        if (retObj.dayList.length > 0) {
          this.dayInfoList = retObj.dayList
        }
        if (this.dayInfoList.length > 1) {
          this.swiperOptionsTop = {
            // direction: 'vertical',
            // 循环不间断图片连在一起
            loop: true,
            // 循环时间(毫秒)
            autoplay: this.defSecuritiesAutoplay,
            speed: 1000
          }
        } else {
          this.swiperOptionsTop = {
            // direction: 'vertical',
            // 循环时间(毫秒)
            autoplay: 0,
          }
        }
        this.proportionInfo = retObj.proportionInfo
        this.planList = retObj.planList
        this.deptInfo = retObj.deptInfo
        this.securitiesInfo = retObj.securitiesInfo
        this.$nextTick(() => {
          // this.$refs.center02.updateData()
          // this.$refs.center01.updateData()
        })
      }
      this.showTop = true
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';

.jc-center {
  height: 3.75rem; /* 60/16 */
}
.wrapper {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}

.wrapperTop {
  margin-top: 0.5rem;
  width: 100%;
  height: 4.2rem;
  display: block;
  overflow: hidden;
}

.part {
  width: 100%;
  height: auto;
  display: inline-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;
}
.swiper-containewTop {
  // margin-left: auto;
  // margin-right: auto;
  position: relative;
  width: 100%;
  padding: 0;
  z-index: 1;
}
</style>