<template>
  <div id="stockLedger__allBatchDetails">
    <!--    <div class="page-title">
      <PageHeader
        :title="`${baseInfo.assetCode || ''} ${baseInfo.assetName || ''}`"
      ></PageHeader>
    </div> -->
    <div class="content-detail">
      <div>
        <el-button icon="el-icon-arrow-left" @click="goBack">
          返回
        </el-button>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="zero">
          <BaseInfo ref="baseInfoRef"></BaseInfo>
          <warehouseConfigVue ref="warehouseConfigRef"></warehouseConfigVue>
        </el-tab-pane>
        <!-- <el-tab-pane label="库存明细" name="first">
          <WarehouseDetail
            v-if="activeName == 'first'"
            :baseInfo="baseInfo"
            :baseParams="baseParams"
          ></WarehouseDetail>
        </el-tab-pane>
        <el-tab-pane label="批次明细" name="sixth" lazy>
          <BatchDetail
            v-if="activeName == 'sixth'"
            :baseInfo="baseInfo"
            :baseParams="baseParams"
          ></BatchDetail>
        </el-tab-pane> -->
        <el-tab-pane label="入库单" name="second" lazy>
          <InWarehouse
            :baseInfo="baseInfo"
            v-if="activeName == 'second'"
            :baseParams="baseParams"
          />
        </el-tab-pane>
        <el-tab-pane label="出库单" name="fourth" lazy>
          <OutWarehouse
            :baseInfo="baseInfo"
            v-if="activeName == 'fourth'"
            :baseParams="baseParams"
        /></el-tab-pane>
        <el-tab-pane label="调拨记录" name="third" lazy>
          <InventoryAllocation
            :baseInfo="baseInfo"
            v-if="activeName == 'third'"
            :baseParams="baseParams"
          />
        </el-tab-pane>
        <el-tab-pane label="报损报溢" name="fifth" lazy>
          <ReportLoss
            :baseInfo="baseInfo"
            v-if="activeName == 'fifth'"
            :baseParams="baseParams"
        /></el-tab-pane>
        <el-tab-pane label="库存明细" name="seventeen" lazy>
          <InventoryDetails :categoryCode="categoryCode" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  // import PageHeader from '@/components/PageHeader'
  import BaseInfo from './components/details/BaseInfo.vue';
  import OutWarehouse from './components/details/OutWarehouse.vue';
  import InWarehouse from './components/details/InWarehouse.vue';
  import ReportLoss from './components/details/ReportLoss.vue';
  import InventoryDetails from './components/details/InventoryDetails.vue';
  import InventoryAllocation from './components/details/InventoryAllocation.vue';
  import WarehouseDetail from './components/details/WarehouseDetail.vue';
  import BatchDetail from './components/details/BatchDetail.vue';
  import warehouseConfigVue from './components/details/warehouseConfig.vue';
  import { deepClone } from '@/utils';
  import { getDetails } from '@/api/classifyManage/itemInformation';
  import outin from '@/api/warehouseManagement/outin';

  export default {
    components: {
      // PageHeader,
      BaseInfo,
      InWarehouse,
      OutWarehouse,
      InventoryAllocation,
      ReportLoss,
      BatchDetail,
      WarehouseDetail,
      warehouseConfigVue,
      InventoryDetails
    },
    data() {
      return {
        stockList: [],
        activeName: 'zero',
        tableData: {
          first: [],
          second: [],
          third: [],
          fourth: [],
          fifth: [],
          seventeen:[]
        },
        categoryId: '',
        baseInfoData: {},
        warehouseInfoData: {}
      };
    },
    computed: {
      categoryCode() {
      return this.$route.query.categoryCode;
    },
      dimension() {
        return this.$route.query.dimension;
      },
      baseInfo() {
        return {};
        // this.$store.state.stockManagement.stockLedgerBaseInfo[
        //   this.$route.query.key
        // ] || {}
      },
      baseParams() {
        return {
          // inventoryCode: this.baseInfo.assetCode
          // // name: this.baseInfo.assetName,
          // // warehousingType: _warehousingType(this.baseInfo.assetType)
          // //   .warehousingType,
          categoryId: this.categoryId
        };
      }
    },
    created() {
      this.getDetailInfo(this.$route.query);
    },
    methods: {
      goBack() {
      this.$router.go(-1)
    },
      async getDetailInfo(row) {
        console.log('===', row);
        this.categoryId = row.id;
        const res = deepClone(await getDetails(row.id));
        this.$nextTick(() => {
          console.log(res);
          // this.categoryId = res.categoryWms && res.categoryWms.categoryId;
          // this.baseInfoData = res.category; //基本信息
          this.$refs.baseInfoRef.getDetailInfoAugr(res.category); //基本信息
          this.$refs.warehouseConfigRef.getDetailInfoAugr(res.categoryWms); //仓库信息
        });
        // const rep = await outin.getInventoryDetails({
        //   pageNum: 1,
        //   size: -1,
        //   categoryId: row.id
        // });
        // const list = this.$store.state.userPage.userList;

        // console.log('qqq11', rep.list);
        // this.stockList = rep.list;
      }
    }
  };
</script>

<style lang="scss" scoped>
  #stockLedger__allBatchDetails {
    background: #fff;
    margin: 10px;
    height: calc(100vh - 116px);
    overflow-y: auto;
    .content-detail {
      height: 100%;
      width: 100%;
      padding: 10px 20px;
      box-sizing: border-box;
      ::v-deep .el-tabs {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .el-tabs__content {
          flex: 1;
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
</style>
