<template>
  <div class="shipping-container">
    <el-tabs v-model="activeTab" class="shipping-tabs">
      <el-tab-pane label="配卷情况" name="waybill">
        <div class="tab-content">
          <BasePage
            :qrcode="false"
            :showWaybill="true"
            :showNewExport="true"
            :querys="waybillQuerys"
            :showStatus="false"
            :hideType="false"
            :useWarehouseIds="true"
            :warehouseOptions="warehouseOptions"
            :showControl="false"
            :showMaterialType="true"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="发货记录" name="ship">
        <div class="tab-content">
          <BasePage
            :qrcode="false"
            :querys="shipQuerys"
            :showStatus="false"
            :hideType="false"
            :useWarehouseIds="true"
            :warehouseOptions="warehouseOptions"
            :showControl="false"
            :showExportTime="true"
            :showMaterialType="true"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BasePage from '@/views/wms/coil/panels/base.vue'
import { ZINC_WAREHOUSE_OPTIONS } from '../config'

export default {
  name: 'ZincShipping',
  components: {
    BasePage,
  },
  data() {
    return {
      // 发货板块沿用现有钢卷发运能力，仅将过滤库区限定为镀锌工序链路。
      activeTab: 'waybill',
      waybillQuerys: {
        // 配卷情况需要带上发货绑定信息，便于直接查看配卷结果。
        dataType: 1,
        includeBindInfo: true,
      },
      shipQuerys: {
        // 发货记录仅查看已发货数据。
        dataType: 1,
        status: 1,
      },
      // 发货板块与库存/WIP 保持相同库区口径，避免统计口径不一致。
      warehouseOptions: ZINC_WAREHOUSE_OPTIONS,
    }
  },
}
</script>

<style scoped lang="scss">
.shipping-container {
  width: 100%;
  height: 100%;

  .shipping-tabs {
    height: 100%;
    overflow-y: auto;
  }

  .tab-content {
    height: 100%;
  }
}
</style>
