<template>
  <div>
    <p-card>
      <!-- <span slot="extra">
        <p-button type="primary" @click="showtransfermodel()"> 查询 </p-button>
      </span> -->
      <div class="main" v-for="(item,index) in data" :key="index">
        <boxlist :type="1" :datas="item.goodsList"></boxlist>
        <h1>{{item.stationNo}}</h1>
        <boxlist :type="0" :datas="item.orderList"></boxlist>
      </div>
    </p-card>
  </div>
</template>

<script>
  import {
    queryData
  } from './api.js'

  import boxlist from './components/boxlist.vue'
  export default {
    data() {
      return {
        data: [],
        intervalId: null
      };
    },
    components: {
      boxlist
    },
    mounted() {
      this.showtransfermodel(); //加载数据函数
    },
    activated() {
      this.dataRefreh();
    },
    deactivated() {
      console.log('被销毁了')
      this.clear();
    },
    methods: {
      dataRefreh() {
        // 计时器正在进行中，退出函数
        if (this.intervalId != null) {
          return;
        }
        // 计时器为空，操作
        this.intervalId = setInterval(() => {
          console.log("刷新" + new Date());
          this.showtransfermodel(); //加载数据函数
        }, 10000);
      },
      clear() {
        clearInterval(this.intervalId); //清除计时器
        this.intervalId = null; //设置为null
      },
      //点击弹窗
      async showtransfermodel() {
        console.log(11)
        let res = await queryData()
        console.log(res)
        if (res.success) {
          this.data = res.data
        } else {
          this.$exception(res)
        }
      }
    }
  }
</script>

<style>
  h1 {
    text-align: center;
    margin: 0px;
  }

  .main {
    text-align: center;
    margin: 5px;
    border-radius: 8px;
    border: 2px solid #a1a1a1;
    display: inline-block;
  }
</style>
