<template>
  <el-dialog :visible.sync="visible" title="调拨明细" width="70%">
    <div class="info">
      <div>调拨单号 {{ info.bizNum }}</div>
      <!-- <div>
        <el-input
          v-model="searchVal"
          placeholder="搜索原料编码/批次号"
        ></el-input>
      </div> -->
    </div>
    <el-table
      :data="showTableData"
      height="500px"
      class="w100"
      border
      :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
    >
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="原料编码" prop="onlyCode"></el-table-column>
      <el-table-column label="包装编码" prop="num"></el-table-column>
      <el-table-column
        label="最小包装单元"
        align="center"
        prop=""
        v-if="!isUnpack"
      >
        <template slot-scope="{ row }">{{
          `${row.measurementUnit || ''}${row.unit}/${row.minPackUnit}`
        }}</template>
      </el-table-column>
      <el-table-column label="调出货位" prop="warehouseName">
        <template slot-scope="{ row }">
          {{ row.warehouseName }} - {{ row.outWarehouseAreaName }} -
          {{ row.outWarehouseAreaGoodsCode }} - {{ row.outGoodsAllocationCode }}
        </template>
      </el-table-column>
      <el-table-column label="调入货位" prop="inWarehouseName">
        <template slot-scope="{ row }">
          {{ row.inWarehouseName }} - {{ row.inWarehouseAreaName }} -
          {{ row.inWarehouseAreaGoodsCode }} - {{ row.inGoodsAllocationCode }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
  // import {
  //   getWarehouseSceneDetail,
  //   getTransferDetail
  // } from '@/api/stockManagement/stockLedger'
  export default {
    props: {
      assetCode: String,
      isUnpack: Boolean
    },
    data() {
      return {
        visible: false,
        title: '',
        tableData: [],
        info: {},
        searchVal: ''
      };
    },
    computed: {
      dimension() {
        return this.$route.query.dimension;
      },
      showTableData() {
        return this.tableData.filter((item) => {
          if (this.searchVal) {
            return (
              (item.onlyCode && item.onlyCode.indexOf(this.searchVal)) ||
              (item.batchNum && item.batchNum.indexOf(this.searchVal))
            );
          }
          return true;
        });
      }
    },
    methods: {
      open({ bizNum, batchNum, dialNumber }) {
        this.info = { bizNum, batchNum };
        this.info.bizNum = dialNumber;
        this._getTransferDetail(dialNumber, batchNum);

        this.visible = true;
      },
      async _getTransferDetail(bizNum, batchNum) {
        const res = await getTransferDetail({
          bizNum,
          batchNum,
          inventoryCode: this.assetCode
        });
        if (res?.success) {
          this.tableData = res.data;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .info {
    font-weight: bold;
    color: #000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
  }
</style>
