<template>
  <div>
    <p-card>
      <div class="head">
        <div class="headleft">
          <p class="p1">{{this.targetLocation}}</p>
          <p class="p2">{{data.titleName}}</p>
        </div>
        <div class="headright" @click="deleteMoveStatus">
          <a class="span">出库口托盘已清空</a>
        </div>
      </div>
      <div>
        <div class="divPageper">排车单：{{data.rosterCarOrderNo}}
          <div v-show="isComplete==1" class="complete">集货完成</div>
        </div>
        <div class="inline">总数：{{data.totalCount}}</div>
        <div class="inline">待出库：{{data.outboundDeliveryCount}}</div>
        <div class="inline">出库中：{{data.inDeliveryCount}}</div>
        <div class="inline">出库完成未拖走：{{data.notMoveCount}}</div>
      </div>
    </p-card>
    <p-table ref="table" row-key="containerNo" bordered :columns="config.columns" :rowSelectType="false"
      :data-source="data.inDeliveryContainerDtoList">
    </p-table>
  </div>
</template>

<script>
  import config from './config.js'
  import {
    showRetrievalDisplay,
    deleteMoveStatus
  } from './api.js'

  export default {
    data() {
      return {
        intervalId: null,
        targetLocation: '',
        isComplete: '',
        data: {
          inDeliveryContainerDtoList: []
        },
        config
      }
    },
    components: {

    },
    mounted() {
      this.targetLocation = this.$route.query.targetLocation;
      this.show(); //加载数据函数
    },
    activated() {
      var targetLocation = this.$route.query.targetLocation;
      this.isComplete = this.$route.query.isComplete;
      if (targetLocation == undefined) {
        this.$message.error('需通过四向库出库口监控界面进入详情监控界面')
      }
      this.targetLocation = targetLocation;
      this.show();
      this.dataRefreh();
    },
    deactivated() {
      console.log('被销毁了')
      this.clear();
    },
    updated() {

    },
    methods: {
      async show() {
        let res = await showRetrievalDisplay({
          "targetLocation": this.targetLocation
        })
        console.log(res)
        if (res.success) {
          this.data = res.data
        } else {
          this.$exception(res)
        }
      },
      async deleteMoveStatus() {
        let res = await deleteMoveStatus({
          "targetLocation": this.targetLocation
        })
        console.log(res)
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$exception(res)
        }
      },
      dataRefreh() {
        // 计时器正在进行中，退出函数
        if (this.intervalId != null) {
          return;
        }
        // 计时器为空，操作
        this.intervalId = setInterval(() => {
          console.log("刷新" + new Date());
          this.show(); //加载数据函数
        }, 10000);
      },
      // 停止定时器
      clear() {
        clearInterval(this.intervalId); //清除计时器
        this.intervalId = null; //设置为null
      },
    }

  }
</script>

<style>
  .head {
    overflow: hidden;
    height: 60px;
  }

  .headleft {
    width: 300px;
    float: left;
    height: 60px;
    display: table-cell;
    vertical-align: middle;
  }

  .headright {
    float: right;
    margin-top: 6px
  }


  .p1 {
    float: left;
    font-size: 30px;
    font-weight: bold;
    color: #E57B27;
  }

  .p2 {
    float: right;
    font-size: 20px;
    margin-top: 10px;
    font-weight: bold;
    color: #0170BF;
  }

  .span {
    width: 140px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
    background: #ffffff;
    border-radius: 4px;
    color: #0170BF;

  }

  .span:hover {
    background: #0170BF;
    border-radius: 4px;
    color: white;
  }

  .divPageper {
    font-size: 20px;
    font-weight: bold;
    margin: 5px;
    display: flex;
  }

  .complete {
    font-size: 20px;
    font-weight: bold;
    margin-left: 5px;
  }

  .inline {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    float: left;
    margin: 5px;
  }
</style>
