<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">
        <div style="display: flex; align-items: center;">


          <img :src="imageUrl" style="weight: 16px;height: 16px;" alt="Logo" v-if="msg">
          <div style="flex-grow: 1; overflow: hidden;">
            <vue-marquee
                :speed="10"
                :delayTime="500"
                :mouseover="true"
                color="white"
                direction="left"
            >

              <span style="font-size: 18px;font-weight: bold">{{ msg }}</span>
            </vue-marquee>
          </div>

        </div>
        <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.code }}<br/>
              物料名称：{{ div.code }}<br/>
              库存数量：{{ 0 }}
            </div>
            <el-button style="background-color:#AFEEEE;height: 80px;width:180px;margin: 10px">
              库位：{{ div.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: 365px; 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 id="main" style="width: 365px; height: 280px"></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 * as echarts from 'echarts';
import moment from "moment";
import crudPoint from "@/api/point";
import crudAgvTask from "@/api/agvTask"
import CRUD from "@crud/crud";
import 'echarts-gl';
import VueMarquee from 'aring-vue-marquee';
import stockUrl from "@/api/stock";

export default {
  name: 'DeptData',
  components: {
    VueMarquee
  },
  data() {
    return {
      msg: '',
      imageUrl: require("@/assets/images/igw-l-news-noticewhite.png"),
      total: 0,
      pageSize: 25,
      currentPage: 1,
      currentIndex: 0,
      intervalId: null,
      currentTime: '',
      dayOfWeek: '',
      divs: [],
      collection: [],
      config: {//组件的配置数据
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          },
        ]
      },
      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.getInit()//树状图
    this.queryAgvTaskInfo();//AGV任务列表
    this.queryListInfo(this.currentPage, this.pageSize)//库位图
    this.intervalId = setInterval(this.printNextItem, 5000);//定时分页调用
    this.stockMsg();
    this.initWebSocket();
  },
  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()];
    },
    //界面显示
    getInit() {
      var chartDom = document.getElementById("main")
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            color: 'white' // 修改X轴字体颜色为红色
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white' // 修改X轴字体颜色为红色
          }
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            itemStyle: {
              color: '#4675C0'
            },

          }
        ]
      };
      option && myChart.setOption(option);
    },
    //任务列表
    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) {
      const CurrentPage = {currentPage: currentPage, pageSize: pageSize}
      crudPoint.queryPointInfo(CurrentPage).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;
      }
    },
    initWebSocket() {
      const wsUri = (process.env.VUE_APP_WS_API === '/' ? '/' : (process.env.VUE_APP_WS_API + '/')) + 'webSocket/stock'
      this.websock = new WebSocket(wsUri)
      this.websock.onerror = this.webSocketOnError
      this.websock.onmessage = this.webSocketOnMessage
    },
    webSocketOnError(e) {
      this.$notify({
        title: 'WebSocket连接发生错误',
        type: 'error',
        duration: 0
      })
    }, webSocketOnMessage(e) {
      const data = JSON.parse(e.data)
      if (data.msgType === 'INFO') {
        this.msg = data.msg
      } else if (data.msgType === 'ERROR') {
        this.$notify({
          title: '',
          message: data.msg,
          dangerouslyUseHTMLString: true,
          type: 'error',
          duration: 0
        })
      }
    },
    webSocketSend(agentData) {
      this.websock.send(agentData)
    },
    stockMsg() {
      stockUrl.stockMsg()
    }

  }


}
</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;
}

.marquee-item {
  margin-right: 50px;
}

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