<template>
  <div class="list">
    <p-spin :spinning="spinning">
      <div class="head-warp">
        <div class="head-info">
          <a-row>
            <a-col :span="6">
              <div class="content-item">
                <div class="content-item-title">已出密集库未拣完</div>
                <div class="content-item-count">{{ contentInfo.outWareNotFinished }}</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="content-item">
                <div class="content-item-title">拣完已点回盘</div>
                <div class="content-item-count">{{ contentInfo.finishedPacking }}</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="content-item">
                <div class="content-item-title">已回密集库</div>
                <div class="content-item-count">{{ contentInfo.denseLibraryReturned }}</div>
              </div>
            </a-col>
          </a-row>
        </div>
        <div class="head-refresh">
          <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>
      </div>
    </p-spin>
  </div>
</template>

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

export default {
  data() {
    return {
      deadline: Date.now() + 1000 * 60 * 5,
      info: [], // 展示的数据
      spinning: false,
      contentInfo: {}
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.spinning = true;
      picktask_count({pageSize: 10, pageNum: 1}).then(res => {
        if (res.success) {
          this.contentInfo = res.data.list[0] || {}
        } else {
          this.$exception(res);
        }
      }).finally(err => {
        this.spinning = false;
      })
    },
    // 手动刷新
    update() {
      this.deadline = Date.now() + 1000 * 60 * 5;
      this.getInfo()
    },
  }
}
</script>

<style scoped lang="less">
.head-warp {
  display: flex;

  .head-info {
    flex: 1;
  }

  .head-refresh {
    flex: 0 0 200px;
  }
}

::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>
