<template>
  <div class='panel-wrap'>
    <div class='panel-head'>
      <div class='station'>
        <div class='station-icon'>
          <svg t='1646874747485' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'
               p-id='26221' width='200' height='200'>
            <path d='M448 832v-64h128v64h192v64H256v-64h192z m-320-128V128h768v576H128z' fill='#1890FF'
                  p-id='26222'></path>
          </svg>
        </div>
        <span>{{ platformInfo.positionNo }}</span>
      </div>
      <div class='progress'>
        <div class='progress-box'>
          {{ platformInfo.completePickedTotal || 0 }} / {{ platformInfo.planPickedTotal || 0 }}
        </div>
      </div>
      <div class='bill'>
        <div class='bill-item'>
          <span class='label'>单号:</span>
          <span>{{ platformInfo.orderNumber }}</span>
        </div>
        <div class='bill-item'>
          <span class='label'>发料框:</span>
          <span>{{ platformInfo.containerNo }}</span>
        </div>
      </div>
    </div>
    <p-table class='panel-table' rowKey='lineId' :hasRowCount='false' :pagination='false' :rowSelectType='false' bordered
             :dataSource='dataSource'>
      <p-table-column data-index='finishedProductNo' title='产成品编码' />
      <p-table-column data-index='workStep' title='工序' />
      <p-table-column data-index='itemName' title='所需物料名称' />
      <p-table-column data-index='quantity' title='数量' />
      <p-table-column data-index='status' title='状态'>
        <template slot-scope='text, record'>
          <span>{{ record.status === '0' ? '未完成' : '已完成' }}</span>
        </template>
      </p-table-column>
    </p-table>
  </div>
</template>

<script>
export default {
  props: {
    platformInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  computed: {
    dataSource() {
      return this.platformInfo.orderDetailList || []
    }
  },
}
</script>

<style scoped lang='less'>
.panel-wrap {
  background: #ECEEEF;
  padding: 10px;
  width: 100%;
  min-width: 680px;

  .panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .station {
      flex: 0 0 180px;
      justify-content: flex-start;
      align-items: center;

      color: #1890FF;
      font-size: 32px;
      font-weight: bold;
      display: flex;

      .station-icon {
        width: 30px;
        height: 35px;
        margin-right: 2px;

        .icon {
          width: 100%;
          height: 100%;
        }
      }
    }

    .progress {
      .progress-box {
        background: rgba(255, 179, 39, 0.1);
        color: #FFB327;
        font-size: 32px;
        letter-spacing: 2px;
        font-weight: bold;
        white-space: nowrap;
        line-height: 1.6;
        padding: 0 8px;
        border-radius: 8px;
      }
    }

    .bill {
      flex: 0 0 180px;
      display: flex;
      flex-direction: column;

      .bill-item {
        display: flex;
        flex-direction: row;
        color: #333;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 500;

        .label {
          color: #888;
        }
      }
    }
  }

  .panel-table {
    margin-top: 12px;
    background: #fff;
  }
}
</style>