<template>
  <div>
    <p-card v-if="isnull">
      <h1>当前无任务</h1>
    </p-card>
    <p-card v-else>
      <exportmeunlist class="inline" v-for="(item,index) in singleMenuDatas" :singleMenuData="item" :key="index">
      </exportmeunlist>
    </p-card>
  </div>
</template>

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


  import exportmeunlist from './components/exportmeunlist/index.vue'
  export default {
    data() {
      return {
        intervalId: null,
        isnull: false,
        singleMenuDatas: []
      };
    },
    components: {
      exportmeunlist
    },
    created() {

    },
    mounted() {
      this.show(); //加载数据函数
    },
    activated() {
      this.dataRefreh();
    },
    deactivated() {
      console.log('被销毁了')
      this.clear();
    },
    methods: {
      dataRefreh() {
        // 计时器正在进行中，退出函数
        if (this.intervalId != null) {
          return;
        }
        // 计时器为空，操作
        this.intervalId = setInterval(() => {
          console.log("刷新" + new Date());
          this.show(); //加载数据函数
        }, 10000);
      },
      // 停止定时器
      clear() {
        clearInterval(this.intervalId); //清除计时器
        this.intervalId = null; //设置为null
      },
      async show() {
        let res = await findRetrievalShowList()
        console.log(res)
        if (res.success) {
          if (res.data.length == 0) {
            this.isnull = true
          } else {
            var len = res.data.length;
            for (var i = 0; i < len; i++) {
              for (var j = 0; j < len - 1 - i; j++) {
                if (res.data[j].targetLocation > res.data[j + 1].targetLocation) { //相邻元素两两对比
                  var temp = res.data[j + 1]; //元素交换
                  res.data[j + 1] = res.data[j];
                  res.data[j] = temp;
                }
              }
            }
            this.singleMenuDatas = res.data
            this.isnull = false
          }
        } else {
          this.$exception(res)
        }
      },
    }
  }
</script>

<style>
  .inline {
    display: inline-block;
  }
</style>
