<template>
  <div>
    <div class='list'>
      <p-spin :spinning='spinning'>
        <table border='0' cellpadding='0' cellspacing='0'>
          <tr>
            <td></td>
            <td></td>
            <td>正在拣货</td>
            <td>{{ info.pickCount }}</td>
            <td>正在补货</td>
            <td>{{ info.moveCount }}</td>
          </tr>
          <template v-for='item  in info.list'>
            <tr>
              <td>{{ text }}拣货( <span style='color: #2b80ff;'>{{ ` ${bldgName ? bldgName : item.bldgName} ` }}</span>)
              </td>
              <td></td>
              <td>主动补货</td>
              <td>{{ item.activeMoveCount }}</td>
              <td>被动补货</td>
              <td>{{ item.passiveMoveCount }}</td>
            </tr>
          </template>
        </table>
        <div style='text-align: right; position:absolute; top:25px; right: 0px;'>
          <p-button type='primary' icon='sync' @click='update'>手动更新</p-button>
          <div style='margin-top: 5px;'>每5分钟自动更新</div>
          <a-statistic-countdown
            :value='deadline'
            format='HH:mm:ss'
            @finish='onFinish'
          />
        </div>
      </p-spin>
    </div>
  </div>
</template>

<script>
import { picktask_count } from '../config/api.js'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  props: {
    type: {
      type: Number,
      default: 0
    },
    text: {
      type: String,
      default: ''
    },
    bldgInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      deadline: Date.now() + 1000 * 60 * 5,
      timer: null,// 定时器
      info: [], // 展示的数据
      spinning: false,
      bldgName: ''
    }
  },
  computed: {
    ...mapGetters(['warehouse'])
  },
  watch: {
    bldgInfo: {
      handler(val) {
        this.bldgName = val.bldgName
      }
    }
  },
  methods: {
    getInfo() {
      this.spinning = true
      // {"type":"0-整件 1-零货 2-功能库房","warehouseId":"仓id"}
      picktask_count({ type: this.type, warehouseId: this.warehouse.warehouseId }).then(res => {
        if (res.success) {
          // console.log("整件：",res.data);
          this.info = res.data
          this.spinning = false
        } else {
          this.spinning = false
          this.$exception(res)
        }
      }).finally(err => {
        this.spinning = false
      })
      // 定时从后台获取数据
      // this.timer = setTimeout(this.getInfo,5*60*1000);
      console.log('每5分钟自动更新', moment().format('YYYY年MM月DD日, h:mm:ss a'), this.timer)
    },
    // 倒计时组件
    onFinish() {
      console.log('finished!', this.deadline)
      this.update()
    },
    // 手动刷新
    update() {
      this.deadline = Date.now() + 1000 * 60 * 5
      clearTimeout(this.timer)
      this.timer = null
      this.getInfo()
    }
  },
  created() {
    this.getInfo()	//定时从后台获取数据
  },
  mounted() {
    // 监听信息
    this.$bus.$on('refreshInfo', v => {
      this.getInfo()	//定时从后台获取数据
    })
  },
  // 给router-view加了个keep-alive导致组件缓存了，所以不会触发beforeDestory和destoryed
  beforeDestroy() {
    clearTimeout(this.timer)
    this.timer = null
    console.log('定时器销毁了')
    // 关闭监听
    this.$bus.$off('refreshInfo')
  },
  // 触发beforeDestory和destoryed
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  }
}
</script>

<style scoped lang='less'>
::v-deep {
  .ant-statistic-content {
    text-align: center;
    font-size: 1rem;

    .ant-statistic-content-value {
      font-size: 1rem;
    }
  }
}

.list {
  width: 100%;
  max-height: 200px;
  min-height: 150px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
  background: #FEFFE0;
  position: relative;

  table {
    border-collapse: collapse;

    tr {
      td {
        padding: 5px;
        font-size: 1rem;
        border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
      }

      td:first-child {
        width: 300px;
        text-align: right;
        color: #666;
      }

      td:nth-child(2) {
        width: 20px;
      }

      td:nth-child(4), td:nth-child(6) {
        width: 100px;
        text-align: left;
        color: #2b80ff;
        font-weight: bold;
        font-size: 1.2rem;
      }

      td:nth-child(3), td:nth-child(5) {
        width: 80px;
        text-align: right;
        color: #666;
      }
    }
  }
}
</style>
