<template>
  <div class="baseinfo-container">
    <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>
        {{ information.code }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 房屋建筑物名称 </template>
        {{ information.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 牌号</template>
        {{ information.brandNum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 计量单位 </template>
        {{ information.measuringUnit }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 包装单位 </template>
        {{ information.packingUnit }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label"> 分类 </template>
        {{ information.categoryLevelPath }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="basic-details-title border-none">
      <span class="border-span">房屋建筑物明细</span>
    </div>
    <div>
      <el-form label-width="80px" :model="searchForm" ref="formName">
        <el-row>
          <el-col :md="6" :xs="8" :sm="8">
            <el-form-item
              :label="activeName == 'inLibrary' ? '入库单号' : '出库单号'"
              prop=""
            >
              <el-input
                type="text"
                size="small"
                placeholder="请输入"
                v-model="searchForm.sourceBizNo"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="6" :xs="8" :sm="8">
            <el-form-item label="批次号" prop="">
              <el-input
                type="text"
                size="small"
                placeholder="请输入"
                v-model="searchForm.sourceBatchNo"
              ></el-input
            ></el-form-item>
          </el-col>
          <el-col :md="12" :xs="12" :sm="12" style="text-align: right">
            <el-button icon="el-icon-refresh-left" size="small" @click="reset"
              >重置</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="doSearch"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>

      <div class="tabbox">
        <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-button icon="el-icon-printer" size="small" @click="handlPrint"
          >打印条码</el-button
        > -->
      </div>
      <el-table
        :data="tableData"
        class="table-box"
        :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <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="sourceBatchNo" label="批次号"> </el-table-column>
        <el-table-column prop="bucketNum" label="包装编码"> </el-table-column>
        <el-table-column prop="minPackUnit" label="最小包装单元">
        </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-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>
      <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>

    <!--    <QrPrint
      ref="QrPrint"
      @close="QrPrintClose"
      :config="barCodeConfig"
      :openBarCode.sync="openWindows"
    /> -->
  </div>
</template>

<script>
  // import { getDetails } from '@/api/stockManagement/itemInformation'
  // import { getAssetPage, getCount } from '@/api/ledgerAssets/asset'
  // import { batchBarPrint } from '@/api/ledgerAssets/booksList'
  // import QrPrint from '@/components/print/printPDF.vue'
  import { getPageSingle, getCount } from '@/api/ledgerAssets';
  import { getDetails } from '@/api/classifyManage/itemInformation.js';
  export default {
    props: {
      rowId: {
        type: String,
        default: ''
      }
    },
    // components: { QrPrint },
    data() {
      return {
        information: {},
        activeName: 'inUse',
        tableData: [],
        pagination: {
          pageNum: 1,
          size: 15
        },
        total: 0,
        searchForm: {
          categoryId: this.rowId,
          positionType: 2
        },
        multipleSelection: [],
        openWindows: false, //打印弹窗
        barCodeConfig: [],
        positionType: 1,
        countInfo: {}
      };
    },
    watch: {},
    created() {
      this.getDetilInfo();
      this.handleList();
      this.getCountNum();
    },
    methods: {
      getDetilInfo() {
        getDetails(this.rowId).then((res) => {
          this.information = res.category;
        });
      },

      tabClick(val) {
        switch (this.activeName) {
          case 'inUse': {
            this.positionType = 2;
            break;
          }
          case 'inLibrary': {
            this.positionType = 1;
            break;
          }
          case 'hasConsume': {
            this.positionType = 3;
            break;
          }
          default:
            break;
        }
        this.searchForm.positionType = this.positionType;
        this.handleList();
      },

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

      // 搜索
      doSearch() {
        this.pagination.pageNum = 1;
        this.handleList();
      },
      // 重置
      reset() {
        this.searchForm = {
          categoryId: this.rowId,
          positionType: 1
        };
        this.doSearch();
      },

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

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      QrPrintClose() {
        this.barCodeConfig = [];
      },

      async handlPrint() {
        this.openWindows = true;
        const barType = 4;
        let params = this.multipleSelection.map((item) => {
          return {
            barType: barType,
            bizId: item.id
          };
        });
        let _this = this;
        const res = await batchBarPrint(params);
        async function getResList() {
          for (const el of res.data) {
            const fontTypeObj = { 1: '宋体', 2: '微软雅黑', 3: 'Arial' };
            let item = el;
            item.useModeList = item.useModeList.sort((a, b) => {
              return a.barAvg.substr(4) - b.barAvg.substr(4);
            });
            const useModeList = item.useModeList;
            // 条码框数据
            _this.barCodeConfig.push({
              putType: el.putType,
              qrCode: el.qrCode,
              sizeLong: el.sizeLong,
              sizeWide: el.sizeWide,
              codeNumber: useModeList[0].sampleData,
              code2: useModeList[1].sampleData,
              code3: useModeList[2].sampleData,
              code4: useModeList[3].sampleData,
              code5: useModeList[4].sampleData,
              code6: useModeList[5].sampleData,
              code7: useModeList[6].sampleData,
              code8: useModeList[7].sampleData,
              code9: useModeList[8].sampleData,
              code10: useModeList[9].sampleData,
              code11: useModeList[10].sampleData,
              code12: useModeList[11].sampleData,
              code13: useModeList[12].sampleData,
              code14: useModeList[13].sampleData,
              fontSizeCode1: useModeList[0].fontSize,
              fontSizeCode2: useModeList[1].fontSize,
              fontSizeCode3: useModeList[2].fontSize,
              fontSizeCode4: useModeList[3].fontSize,
              fontSizeCode5: useModeList[4].fontSize,
              fontSizeCode6: useModeList[5].fontSize,
              fontSizeCode7: useModeList[6].fontSize,
              fontSizeCode8: useModeList[7].fontSize,
              fontSizeCode9: useModeList[8].fontSize,
              fontSizeCode10: useModeList[9].fontSize,
              fontSizeCode11: useModeList[10].fontSize,
              fontSizeCode12: useModeList[11].fontSize,
              fontSizeCode13: useModeList[12].fontSize,
              fontSizeCode14: useModeList[13].fontSize,
              typefaceCode1: fontTypeObj[useModeList[0].fontType],
              typefaceCode2: fontTypeObj[useModeList[1].fontType],
              typefaceCode3: fontTypeObj[useModeList[2].fontType],
              typefaceCode4: fontTypeObj[useModeList[3].fontType],
              typefaceCode5: fontTypeObj[useModeList[4].fontType],
              typefaceCode6: fontTypeObj[useModeList[5].fontType],
              typefaceCode7: fontTypeObj[useModeList[6].fontType],
              typefaceCode8: fontTypeObj[useModeList[7].fontType],
              typefaceCode9: fontTypeObj[useModeList[8].fontType],
              typefaceCode10: fontTypeObj[useModeList[9].fontType],
              typefaceCode11: fontTypeObj[useModeList[10].fontType],
              typefaceCode12: fontTypeObj[useModeList[11].fontType],
              typefaceCode13: fontTypeObj[useModeList[12].fontType],
              typefaceCode14: fontTypeObj[useModeList[13].fontType]
            });
          }
        }
        getResList();
      },

      getCountNum() {
        const params = {
          categoryId: this.rowId,
          sourceBizNo: this.searchForm.sourceBizNo
            ? this.searchForm.sourceBizNo
            : '',
          sourceBatchNo: this.searchForm.sourceBatchNo
            ? this.searchForm.sourceBatchNo
            : ''
        };
        getCount(params).then((res) => {
          this.countInfo = res;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .baseinfo-container {
    background-color: #fff;
    padding: 0 20px 20px;
    .tabbox {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .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>
