<template>
  <el-dialog :visible.sync="visible" title="导出条码" width="500px">
    <div class="select-box">
      <div style="text-align: center">
        <el-radio-group v-model="type" @change="handleRadioChange">
          <el-radio label="1">货架码</el-radio>
          <el-radio label="2">货位码</el-radio>
        </el-radio-group>
      </div>
      <div class="area" :key="forceUpdate">
        <el-form label-width="50px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="库区">
                <el-select
                  filterable
                  v-model="area"
                  placeholder=""
                  @change="handleChange"
                >
                  <el-option
                    v-for="(item, index) in warehouseAreasSaveList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10" v-if="type == 2">
              <el-form-item label="货架">
                <el-select filterable v-model="shilves" @change="handleChange">
                  <el-option
                    v-for="(item, index) in areaGoodsshelvesList"
                    :key="item.id"
                    :label="item.goodsshelvesCode"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button type="text" @click="selectAll = !selectAll"
            >全选</el-button
          >
        </el-form>
      </div>
    </div>
    <div class="select-wrapper">
      <el-row :gutter="10">
        <el-col
          :span="type == 1 ? 8 : 12"
          v-for="(item, index) in showList"
          :key="item.id + '*' + index"
        >
          <div
            class="items"
            :class="{
              'item-active': !!selectList.find((i) => i.id === item.id)
            }"
            @click="handleCheck(item)"
          >
            <template v-if="type == 1">{{
              `${item.warehouseAreaName}-${item.goodsshelvesCode}`
            }}</template>
            <template v-else>{{
              `${item.warehouseAreaName}-${item.warehouseAreaGoodsCode}-${item.goodsAllocationCode}`
            }}</template>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
    <PrintWarehouse
      ref="printWarehouseRef"
      :config="barCodeConfig"
      @close="QrPrintClose"
      :openBarCode.sync="openWindows"
    />
  </el-dialog>
</template>

<script>
  // import PrintWarehouse from '@/components/print/PrintWarehouse';
  // import { batchBarPrint } from '@/api/ledgerAssets/booksList'
  export default {
    // components: { PrintWarehouse },
    data() {
      return {
        openWindows: false,
        forceUpdate: false,
        visible: false,
        warehouseAreasSaveList: [],
        type: '1',
        shilves: '',
        area: '',
        selectList: [],
        barCodeConfig: []
      };
    },
    computed: {
      areaGoodsshelvesList() {
        this.shilves = '';
        const obj = this.warehouseAreasSaveList.find(
          (item) => item.id == this.area
        );
        return (obj?.children || []).map((item) => {
          item.checked = false;
          return item;
        });
      },
      allocationReqList() {
        const obj = this.areaGoodsshelvesList.find(
          (item) => item.id == this.shilves
        );

        return (obj?.children || []).map((item) => {
          item.checked = false;
          return item;
        });
      },
      showList() {
        if (this.type == 1) {
          return this.areaGoodsshelvesList;
        } else {
          return this.allocationReqList;
        }
      },
      selectAll: {
        get() {
          return !!(
            this.selectList.length &&
            this.selectList.length === this.showList.length
          );
        },
        set(val) {
          this.selectList = val ? this.showList.slice(0) : [];
        }
      }
    },
    methods: {
      open(list) {
        this.warehouseAreasSaveList = list;
        this.visible = true;
      },
      handleCheck(item) {
        let index = this.selectList.findIndex((i) => i.id === item.id);
        if (index > -1) {
          this.selectList.splice(index, 1);
        } else {
          this.selectList.push(item);
        }
      },
      cancel() {
        this.visible = false;
        this.warehouseAreasSaveList = [];
        this.selectList = [];
      },
      confirm() {
        //  const list =
        if (!this.selectList?.length) {
          this.$message.error(`请选择${this.type == 1 ? '货架' : '货位'}`);
          return;
        }
        this.handlPrint();
      },
      handleRadioChange() {
        this.selectList = [];
      },
      handleChange() {
        this.selectList = [];
      },
      QrPrintClose() {
        this.barCodeConfig = [];
      },
      async handlPrint() {
        this.openWindows = true;
        const barType = this.type == 1 ? 7 : 2;
        let params = this.selectList.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,
              code1: 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();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .select-box {
    .area {
      padding: 20px 10px;
      position: relative;

      .el-button {
        position: absolute;
        right: 0;
        bottom: 0;
        transform: translateY(-50%);
      }
    }
  }

  .select-wrapper {
    .items {
      padding: 10px 0;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      text-align: center;
      cursor: pointer;

      &:hover {
        // background-color: rgba($color: $mainColor, $alpha: 0.2);
      }
      &.item-active {
        // background-color: $mainColor;
        color: #fff;
      }
    }
  }

  .footer {
    padding-top: 20px;
    text-align: right;
  }
</style>
