<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <view-table ref="table" view-code="SupplierStorage">
        <template #command="{ row }">
          <Button
            size="small"
            title="包装库存"
            type="info"
            custom-icon="fa fa-bars"
            @click="
              $refs.barcodeTable.open({
                warehouseID: row.warehouseID,
                materialID: row.materialID,
                supplierID: row.supplierID,
                storageStatus: row.storageStatus
              })
            "
          ></Button>
        </template>
      </view-table>
    </Card>
    <modal-table
      ref="barcodeTable"
      view-code="BarcodeTable"
      :filter="filter"
      :tree-enable="true"
      :tree-load="row => onTreeLoad(row)"
      :has-children="
        row => {
          return row.barcode.hasChildren;
        }
      "
      :before-load-data="beforeLoadData"
      @on-load-data="onLoadData"
    >
      <template #command="{ row }">
        <Button size="small" title="库存明细" type="info" custom-icon="fa fa-bars" @click="$refs.barcodeStorageTable.open({ BarcodeID: row.id })"></Button>
      </template>
    </modal-table>
    <modal-table ref="barcodeStorageTable" view-code="BarcodeStorage" />
  </div>
</template>
<script>
  import { mixinPage, modelApi } from 'mooho-base-admin-plus';

  export default {
    name: 'storage-supplierStorage',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        filter: {}
      };
    },
    computed: {},
    created() {},
    methods: {
      async onTreeLoad(row) {
        let res = await modelApi.query('BarcodeStorage', {
          'barcode.parentID': row.barcodeID,
          page: 1,
          per: 1000,
          orderBy: '+barcode.no'
        });

        return res.data;
      },
      beforeLoadData() {
        if (!(this.$refs.barcodeTable.filterData['barcode.no'] || '').trim()) {
          // 普通查询，只查询顶层包装
          this.$refs.barcodeTable.filterData['barcode.parentID'] = 'null';
        } else {
          // 根据条码号查询，查询所有包装
          delete this.$refs.barcodeTable.filterData['barcode.parentID'];
        }
      },
      async onLoadData() {
        if (!!(this.$refs.barcodeTable.filterData['barcode.no'] || '').trim()) {
          // 根据条码号查询
          let data = this.$refs.barcodeTable.data;
          if (data.length > 0) {
            let dataWithParent = [];
            for (let i = 0; i < data.length; i++) {
              dataWithParent.push(await this.addParentData(data[i]));
            }

            data.length = 0;
            dataWithParent.forEach(item => {
              data.push(item);
            });
          }
        }
      },
      async addParentData(data) {
        if (data.barcode.parentID) {
          let res = await modelApi.query('BarcodeStorage', {
            'barcode.id': data.barcode.parentID,
            page: 1,
            per: 1
          });

          let result = res.data[0];
          result.children = [data];
          result._showChildren = true;
          return result;
        } else {
          return data;
        }
      }
    }
  };
</script>
