<template>
  <div class="baseinfo-container">
    <basicInfoVue ref="basicInfoRef" />
    <div class="basic-details-title border-none">
      <span class="border-span">容器信息</span>
    </div>
    <el-descriptions title="" :column="4" size="medium" border>
      <el-descriptions-item>
        <template slot="label">槽数</template>
        {{ categoryPallet.slotNum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">角度</template>
        {{ categoryPallet.angle }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">长</template>
        {{ categoryPallet.palletLen ? categoryPallet.palletLen + 'mm' : null }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">宽</template>
        {{ categoryPallet.wilde ? categoryPallet.wilde + 'mm' : null }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">高</template>
        {{ categoryPallet.hight ? categoryPallet.hight + 'mm' : null }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="basic-details-title border-none">
      <span class="border-span">容器明细</span>
    </div>
    <div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="tabClick"
        class="basic-tab"
      >
        <el-tab-pane
          :label="`在用(${countInfo.useCount ? countInfo.useCount : '0'})`"
          name="inUse"
        >
        </el-tab-pane>
        <el-tab-pane
          :label="`在库(${
            countInfo.libraryCount ? countInfo.libraryCount : '0'
          })`"
          name="inLibrary"
        >
        </el-tab-pane>
        <el-tab-pane
          :label="`消耗(${
            countInfo.consumeCount ? countInfo.consumeCount : '0'
          })`"
          name="hasConsume"
        >
        </el-tab-pane>
      </el-tabs>
      <el-table
        :data="tableData"
        class="table-box"
        :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
      >
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="code" label="编码"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column
          prop="inCode"
          label="入库单号"
          v-if="activeName == 'inLibrary'"
        >
        </el-table-column>
        <el-table-column
          prop="inTime"
          label="入库时间"
          v-if="activeName == 'inLibrary'"
        >
        </el-table-column>
        <el-table-column
          prop="outCode"
          label="出库单号"
          v-if="activeName != 'inLibrary'"
        >
        </el-table-column>
        <el-table-column
          prop="outTime"
          label="出库时间"
          v-if="activeName != 'inLibrary'"
        >
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[15, 30, 50, 100, 500]"
          :page-size="pagination.size"
          :current-page.sync="pagination.pageNum"
          @current-change="handleCurrent"
          @size-change="handleSize"
        >
        </el-pagination>
      </div>
    </div>
    <warehouseConfigVue ref="warehouseConfigRef" />
    <productInfoVue ref="productInfoRef" />
    <planVue ref="planRef" />
    <qualityConfig ref="qualityConfigRef" />
    <footerVue ref="footerVueRef" />
  </div>
</template>

<script>
  import { getPageSingle, getCount } from '@/api/ledgerAssets';
  import { getDetails } from '@/api/classifyManage/itemInformation.js';
  import basicInfoVue from '../../components/basicInfo.vue';
  import warehouseConfigVue from '../../components/warehouseConfig.vue';
  import productInfoVue from '../../components/productInfo.vue';
  import planVue from '../../components/plan.vue';
  import qualityConfig from '../../components/qualityConfig.vue';
  import footerVue from '../../components/footer.vue';

  import { sysDict } from '@/utils/sys';

  export default {
    components: {
      basicInfoVue,
      warehouseConfigVue,
      productInfoVue,
      planVue,
      qualityConfig,
      footerVue
    },
    props: {
      rowId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        information: {
          extendField: {}
        },
        activeName: 'inUse',
        tableData: [],
        pagination: {
          pageNum: 1,
          size: 15
        },
        total: 0,
        searchForm: {
          categoryId: this.rowId,
          positionType: 1
        },
        countInfo: {},
        categoryPallet: {}
      };
    },
    created() {
      this.getDetilInfo();
      this.handleList();
      this.getCountNum();
    },
    methods: {
      async getDetilInfo() {
        getDetails(this.rowId).then(async (res) => {
          this.information = res.category;
          if (typeof res.categoryPallet != 'string') {
            this.$set(this.information, 'extendField', res.categoryPallet);
          }
          this.$nextTick(() => {
            this.$refs.basicInfoRef.getDetailInfoAugr(res.category);
            this.$refs.warehouseConfigRef.getDetailInfoAugr(res.categoryWms);
            this.$refs.productInfoRef.getDetailInfoAugr(res.categoryMes);
            this.$refs.planRef.getDetailInfoAugr(res.categoryAps);
            this.$refs.qualityConfigRef.getDetailInfoAugr(res.categoryQms);
            this.$refs.footerVueRef.getDetailInfoAugr(res.category);
          });
          this.categoryPallet = {
            ...res.categoryPallet,
            angle: await sysDict('角度', res.categoryPallet.angle)
          };
        });
      },
      tabClick(val) {
        switch (this.activeName) {
          case 'inUse': {
            this.searchForm.positionType = 1;
            break;
          }
          case 'inLibrary': {
            this.searchForm.positionType = 2;
            break;
          }
          case 'hasConsume': {
            this.searchForm.positionType = 3;
            break;
          }
          default:
            break;
        }
        this.handleList();
      },

      handleCurrent(page) {
        this.pagination.pageNum = page;
        this.handleList();
      },
      handleSize(size) {
        this.pagination.pageNum = 1;
        this.pagination.size = size;
        this.handleList();
      },

      handleList() {
        const params = {
          ...this.searchForm,
          ...this.pagination
        };
        getPageSingle(params).then((res) => {
          this.tableData = res.list;
          this.total = res.count;
        });
      },

      async getCountNum() {
        let arr = [1, 2, 3];
        let newArr = [];
        for (const key in arr) {
          let obj = await getPageSingle({
            ...this.searchForm,
            ...this.pagination,
            positionType: arr[key]
          });
          newArr.push({ count: obj.count });
        }
        this.countInfo = {
          useCount: newArr[0].count,
          libraryCount: newArr[1].count,
          consumeCount: newArr[2].count
        };
        // const params = {
        //   categoryId: this.rowId
        // };
        // getCount(params).then((res) => {
        //   if (res) {
        //     console.log('=======', res);
        //     this.countInfo = res;
        //   }
        // });
      }
    },

    watch: {
      // 监听类别id变化
      // rowId() {
      //   this.getDetilInfo()
      // }
    }
  };
</script>

<style lang="scss" scoped>
  .baseinfo-container {
    background-color: #fff;
    padding: 0px 20px 20px;
    .content {
      padding: 0 20px;
    }
    .basic-details-title {
      font-size: 16px;
      margin: 15px 0;
    }
    .basic-tab {
      margin-bottom: 15px;
    }
    .upload-container {
      display: flex;
      .img-box {
        width: 280px;
        height: 342px;
        border: 1px solid rgba(215, 215, 215, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          max-width: 100%;
        }
      }
      .file-list {
        margin-left: 50px;
        flex: 1;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        justify-items: baseline;
        align-content: flex-start;
        .file-box {
          width: 30%;
          margin-bottom: 20px;
          height: 57px;
          text-align: center;
          line-height: 55px;
          border: 1px solid var(--mainColor);
          color: var(--mainColor);
          cursor: pointer;

          &.disabled {
            cursor: not-allowed;
            border-color: rgba(215, 215, 215, 1);
            color: rgba(215, 215, 215, 1);
          }
        }
      }
    }
  }
</style>
