<template>
  <div id="div1" style="height: 700px;width: 100%">
    <dv-border-box-11 title="库位信息化看板" style="background-color: black;width: 100%">
      <div class="div2">当前时间: {{ currentTime }} 周{{ dayOfWeek }}

      </div>
      <!--      <div id="container"></div>-->
      <div id="threeDEarth"></div>
      <dv-border-box-8 class="grid-container" :reverse="true">

        <dv-border-box-10 class="box10" v-for="(div, index) in divs" :key="index">
          <el-tooltip placement="top" class="item" effect="dark">
            <div slot="content">
              容器：{{ div.stock.code }}<br/>
              物料代码：{{ div.itemKey.item.code }}<br/>
              物料名称：{{ div.itemKey.item.name }}<br/>
              库存数量：{{ div.quantity }}
            </div>
            <el-button style="background-color:#AFEEEE;height: 80px;width:180px;margin: 10px">
              库位：{{ div.point.code }}<br/>
            </el-button>
          </el-tooltip>
        </dv-border-box-10>
      </dv-border-box-8>


      <div class="div3" style="float: left;">

        <dv-border-box-8 :reverse="true" style="margin-left: 20px;margin-top: 60px;height: 320px;width: 98%;">

          <div style="padding-top:5px ">
            <span style="margin-left:10px;font-size: 18px;color: #1F5FAA;">
            <i class="el-icon-monitor"></i>
            </span>
            <span style="font-size: 16px;color: #97DEFF;font-weight: bold">
              任务列表
            </span>
          </div>

          <dv-scroll-board
            :config="this.config2"
            style="width: 360px; height: 280px;margin-left:10px;"
          />
        </dv-border-box-8>

      </div>

      <div class="div4" style="float: left;">
        <dv-border-box-8 :reverse="true" style="margin-left: 20px;margin-top: 20px;height: 280px;width: 100%;">
          <div style="width: 360px;height: 280px;">
            <WaterfallEcharts
              :title="'每周任务数统计'"
              :subtext="'Task Count'"
              :xAxisData="xAxisData"
              :seriesData="seriesData"
            />
          </div>
        </dv-border-box-8>
      </div>

      <div class="div5">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleCurrentClick"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
        >
        </el-pagination>
      </div>
    </dv-border-box-11>

  </div>
</template>

<script>
import moment from 'moment'
import crudInventory from '@/api/inventory'
import crudAgvTask from '@/api/agvTask'
import CRUD from '@crud/crud'
import WaterfallEcharts from '@/views/databigscreen/WaterfallEcharts.vue'

export default {
  components: { WaterfallEcharts },
  data() {
    return {
      xAxisData: [],
      seriesData: [],
      total: 0,
      pageSize: 3,
      currentPage: 1,
      currentIndex: 0,
      intervalId: null,
      currentTime: '',
      dayOfWeek: '',
      divs: [],
      collection: [],
      config2: {
        header: ['任务号', '容器码', '时间'],
        headerHeight: 25,
        data: [],
        index: true,
        columnWidth: [50, 80, 80, 150],
        align: ['center'],
        carousel: 'page',
        rowNum: 8,
        indexHeader: '序号'
      }
    }
  },
  computed: {
    //计算分多少页码
    collectionLength() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  //销毁前关闭计时器
  beforeDestroy() {
    this.clearTimer()
  },
  mounted() {
    //初始化
    setInterval(this.updateTime, 1000)//自动读秒
    this.queryWeeklyTaskCounts()//瀑布图（柱状图）
    this.queryAgvTaskInfo()//AGV任务列表
    this.queryListInfo(this.currentPage, this.pageSize)//库位图
    this.intervalId = setInterval(this.printNextItem, 5000)//定时分页调用

  },
  methods: {
    updateTime() {
      this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
      let weekMap = {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        0: '日'
      }
      this.dayOfWeek = weekMap[moment().day()]
    },
    //界面显示
    queryWeeklyTaskCounts() {
      crudAgvTask.queryWeeklyTaskCounts().then(res => {
        this.xAxisData = res.data.xAxis;
        this.seriesData = res.data.series;
      })
    },
    //任务列表
    queryAgvTaskInfo() {
      crudAgvTask.queryAgvTaskInfo({}).then(res => {
        const cf = this.config2
        cf.data = res.data
        this.config2 = null
        setTimeout(() => {
          this.config2 = cf
        }, 500)

      }).catch(() => {
        this.crud.notify('数据加载失败！', CRUD.NOTIFICATION_TYPE.ERROR)
      })
    },
    //库位图
    queryListInfo(currentPage, pageSize) {
      crudInventory.queryBigScreenPointInfo({
        currentPage: currentPage, pageSize: pageSize
      }).then(res => {
        this.total = Number(res.data.total)
        this.divs = res.data.data
        //把页数放入集合
        for (let i = 1; i <= this.collectionLength; i++) {
          this.collection.push(i)
        }
      }).catch(() => {
        this.crud.notify('数据加载失败！', CRUD.NOTIFICATION_TYPE.ERROR)
      })

    },
    printNextItem() {
      if (this.total > 0 && this.collection.length > 0) {
        if (this.currentIndex < this.collection.length - 1) {
          this.currentIndex++
          this.queryListInfo(this.collection[this.currentIndex], this.pageSize)
          this.handleCurrentChange(this.collection[this.currentIndex])
        } else {
          this.currentIndex = 0 // 循环到集合的末尾时，重新开始
          this.queryListInfo(this.collection[this.currentIndex], this.pageSize)
          this.handleCurrentChange(this.collection[this.currentIndex])
        }
      }

    },
    autoGrid(total, page) {
      //手动生成库位图
      const start = ((page - 1) * this.pageSize) + 1
      const end = start + this.pageSize//个数
      this.divs = []
      for (let i = start; i <= end; i++) {
        const newItem = `Item ${+i}`
        this.$set(this.divs, this.divs.length, newItem)
      }

    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
    },
    handleCurrentClick(newPage) {
      this.queryListInfo(newPage, this.pageSize)
    },
    clearTimer() {
      if (this.intervalId) {
        clearInterval(this.intervalId)
        this.intervalId = null
      }
    }

  }

}
</script>


<style>
.grid-container {
  position: relative;
  float: left;
  height: 620px;
  margin-top: 60px;
  margin-left: 10px;
  padding-left: 20px;
  padding-top: 10px;
  width: 72%;
}

.box10 {
  float: left;
  height: 100px;
  width: 200px;
  margin: 5px;
  background-color: #E6E6FA;
}

.div2 {
  color: white;
  position: absolute;
  left: 81%;
  top: 40px;
}

.div5 {
  position: absolute;
  top: 640px;
  left: 30%;
}

#container {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 79%;
  top: 34px;
}

#threeDEarth {
  /* width: 30px;
   height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   left: 79%;
   top: 34px;
   border: 1px solid red;*/
}
</style>
