<script setup lang="ts">

import {computed, nextTick, ref} from "vue";
import PrintCodeTypeFormatter from "@/plugin/formatter/PrintCodeTypeFormatter.ts"
import type {IPrintParams} from "@/interface/page/printCode/IPrintParams.ts";
import VueQrcode from '@chenfengyuan/vue-qrcode';
import VueBarcode from '@chenfengyuan/vue-barcode';
import printJS from "print-js";

const props = defineProps(['isFull']);

const isFull = computed(() => {
  return props.isFull ?? false;
});

const printCodeTypeFormatter = new PrintCodeTypeFormatter();
const codeType = ref<number>(1); // 条码类型
const paperWidth = ref<number>(80); // 纸张宽度
const paperHeight = ref<number>(60); // 纸张高度
const codeSize = ref<number>(200); // 条码大小
const codeHeight = ref<number>(150); // 条码高度，仅一维码生效
const printParams = ref<IPrintParams>({
  startString: "",
  endString: "",
  numberLength: 4,
  startNo: 1,
  tagCount: 1,
  printCount: 1
});
const printCodeList = ref<string[]>([]); // 要打印的条码

const changeCodeType = (value: number) => {
  if(value === 0) {
    codeSize.value = 2;
    return;
  }
  if(value === 1) {
    codeSize.value = 200;
    return;
  }
};

const printCode = () => {
  preview();
  nextTick(() => {
    printJS({
      printable: 'codePrintDiv',// 标签元素id
      type: 'html',
      header: '',
      targetStyles: ['*']
    });
  })

}

const preview = () => {
  printCodeList.value = [];
  let codes: string[] = [];
  let startNo = printParams.value.startNo;
  const tagCount = printParams.value.tagCount;
  const startString = printParams.value.startString ?? "";
  const endString = printParams.value.endString ?? "";
  const numberLength = printParams.value.numberLength;
  const printCount = printParams.value.printCount;
  for (let j = 0; j < tagCount; j++) {
    let code = startString + startNo.toString().padStart(numberLength, '0') + endString;
    for(let i = 0; i < printCount; i++) {
      codes.push(code);
    }
    startNo++;
  }
  printCodeList.value = codes;
}


</script>

<template>
  <div :style="{marginLeft: '10px',marginTop: '10px', width: isFull ? 'calc(100vw - 20px)' : 'calc(100vw - 280px)' }">
    <h3>条码打印</h3>
    <el-row>
      <el-col :span="12">
        <el-card style="width: calc(100% - 10px); margin-right: 10px; height: 300px">
          <el-text type="warning">基础设置</el-text>
          <el-form label-width="160px">
            <el-form-item label="条码类型：">
              <el-select v-model="codeType" placeholder="请选择条码类型" @change="changeCodeType">
                <el-option v-for="item in printCodeTypeFormatter.codeType" :label="item.label" :key="item.value"  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="条码纸宽度（mm）：">
              <el-input-number v-model="paperWidth" :min="20" :max="9999" :step="10"/>
            </el-form-item>
            <el-form-item label="条码纸高度（mm）：">
              <el-input-number v-model="paperHeight" :min="20" :max="9999" :step="10"/>
            </el-form-item>
            <el-form-item label="条码大小：">
              <el-input-number v-model="codeSize" :min="1" :max="9999" :step="1" :precision="2"/>
            </el-form-item>
            <el-form-item label="一维码条码高度：">
              <el-input-number v-model="codeHeight" :min="1" :max="9999" :step="10"/>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card style="width: calc(100% - 10px); margin-right: 10px; height: calc(100vh - 445px); margin-top: 10px">
          <el-text type="primary">打印设置</el-text>
          <el-form label-width="160px">
            <el-form-item label="起始字符串：">
              <el-input v-model="printParams.startString" placeholder="请输入起始字符串"/>
            </el-form-item>
            <el-form-item label="结束字符串：">
              <el-input v-model="printParams.endString" placeholder="请输入结束字符串"/>
            </el-form-item>
            <el-form-item label="编号长度：">
              <el-input-number v-model="printParams.numberLength" :min="1" :max="9999" :step="1"/>
            </el-form-item>
            <el-form-item label="起始编号：">
              <el-input-number v-model="printParams.startNo" :min="1" :max="9999" :step="1"/>
            </el-form-item>
            <el-form-item label="标签数量：">
              <el-input-number v-model="printParams.tagCount" :min="1" :max="9999" :step="1"/>
            </el-form-item>
            <el-form-item label="打印数量：">
              <el-input-number v-model="printParams.printCount" :min="1" :max="9999" :step="1"/>
            </el-form-item>
          </el-form>
          <el-row>
            <el-text type="danger">您必须点击预览后才能执行打印和下载动作</el-text>
          </el-row>
          <el-row>
            <el-button-group>
              <el-button type="info" @click="preview">预览</el-button>
              <el-button type="primary" @click="printCode">打印</el-button>
            </el-button-group>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="width: 100%">
          <el-text type="success">打印预览区</el-text>
          <el-scrollbar style="height: calc(100vh - 200px);">
            <div id="codePrintDiv">
              <!--            二维码区域-->
              <div v-if="codeType === 1" v-for="item in printCodeList" :style="{width: paperWidth.toString() + 'mm', height:  paperHeight.toString() + 'mm', textAlign: 'center', border: '#2c3e5040 solid 1px', marginTop: '8px'}">
                <div style="width: 100%; height: calc(100% - 25px);">
                  <VueQrcode :value="item" tag="svg" style="margin: auto auto;overflow: visible" :options="{width: codeSize}"/>
                </div>
                <div style="margin: auto auto; height: 20px;width: 100%; font-size: large;font-weight: bolder; transform: translateY(-5px)">{{item}}</div>
              </div>
              <!--            code 128 区域-->
              <div v-if="codeType === 0" v-for="item in printCodeList" :style="{width: paperWidth.toString() + 'mm', height:  paperHeight.toString() + 'mm', textAlign: 'center', border: '#2c3e5040 solid 1px', marginTop: '8px'}">
                <div style="width: 100%; height: calc(100% - 25px);">
                  <VueBarcode :value="item" tag="svg" style="margin: auto auto;overflow: visible" :options="{width: codeSize, displayValue: false, height: codeHeight}"/>
                </div>
                <div style="margin: auto auto; height: 20px;width: 100%; font-size: large;font-weight: bolder; transform: translateY(-5px)">{{item}}</div>
              </div>
            </div>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<style scoped>

</style>