<template>
  <div>
    <div class="list">
      <p-spin :spinning="spinning">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr v-for="item  in info.list">
            <td>{{ text }}拣货( <span style="color: #2b80ff;">{{ ` ${bldgName ? bldgName : item.bldgName} ` }}</span>)
            </td>
            <td></td>
            <td>正在拣货</td>
            <td>{{ item.pickCount }}</td>
            <td>待索取</td>
            <td>{{ item.requestCount }}</td>
          </tr>
        </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="update"
          />
        </div>
      </p-spin>
    </div>
  </div>
</template>

<script>
import {picktask_count} from '../../config/api.js';

export default {
  props: {
    // 0-整件 1-零货 2-功能库房
    type: {
      type: Number,
      default: 0,
    },
    text: {
      type: String,
      default: '',
    },
    bldgInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      deadline: Date.now() + 1000 * 60 * 5,
      info: [], // 展示的数据
      spinning: false,
    }
  },
  computed: {
    warehouse() {
      return this.$store.getters.warehouse
    },
    bldgName() {
      return this.bldgInfo?.bldgName || ''
    }
  },
  methods: {
    getInfo() {
      this.spinning = true;
      const type = this.type
      const {warehouseId} = this.warehouse
      picktask_count({type, warehouseId}).then(res => {
        if (res.success) {
          this.info = res.data;
        } else {
          this.$exception(res);
        }
      }).finally(err => {
        this.spinning = false;
      })
    },
    // 手动刷新
    update() {
      this.deadline = Date.now() + 1000 * 60 * 5;
      this.getInfo()
    },
  },
  created() {
    this.getInfo()
  },
  mounted() {
    // 监听信息
    this.$bus.$on('refreshInfo', v => {
      this.getInfo()
    })
  },
  // 给router-view加了个keep-alive导致组件缓存了，所以不会触发beforeDestory和destoryed
  beforeDestroy() {
    // 关闭监听
    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>
