<!-- 标签打印 -->
<script setup lang="ts" name="LabelPrint">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, dayjs } from 'element-plus'
import JsBarcode from 'jsbarcode'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { printHtml } from '@/utils/printUtils'
const emits = defineEmits(['changeVisible', 'confirmCheckout'])
// 表头
const columns = ref<TableColumn[]>([
  { text: '客户单位', value: 'customerName', align: 'center', fixed: true },
  { text: '仪器名称', value: 'sampleName', align: 'center' },
  { text: '型号', value: 'sampleModel', align: 'center' },
  { text: '出厂编号', value: 'manufacturingNo', align: 'center' },
  { text: '备注', value: 'remark', align: 'center' },
  { text: '送检时间', value: 'realDeliverTime', align: 'center', width: '180' },
])
const visible = ref(false) // 对话框显隐
const list = ref([]) as any // 表格数据
// 点击取消
const cancle = () => {
  visible.value = false
}

// 点击确定
const printObj = ref({
  id: 'labelHtml', // 需要打印元素的id
  popTitle: '', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewBeforeOpenCallback() { console.log('正在加载预览窗口！') }, // 预览窗口打开之前的callback
  previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
  beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
  openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
  closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() { console.log('点击v-print绑定的按钮了！') },
  standard: '',
  extarCss: '',
})

// 点击删除
const deleteRow = (index: number) => {
  list.value.splice(index, 1)
}

function initDialog(value: any) {
  list.value = value.map((item: { sampleStatus: string; remark: string; realDeliverTime: string }) => {
    return {
      ...item,
      realDeliverTime: `${item.sampleStatus}` === '1' ? dayjs().format('YYYY-MM-DD HH:mm:ss') : item.realDeliverTime, // 待收入送检时间默认今天
      remark: item.remark || '无',
      measured: false, // 是否自检
      backMeasure: false, // 是否退检
    }
  })
  visible.value = true
  nextTick(() => {
    JsBarcode('#barcode').init()
  })
}

defineExpose({ initDialog })
</script>

<template>
  <el-dialog :modelValue="visible" title="标签打印" width="1300px" @close="cancle">
    <div style="display: flex;overflow: hidden;position: relative;">
      <normal-table
        :data="list"
        :pagination="false"
        :columns="columns"
        :is-showmulti-select="false"
        :max-height="460"
        style="width: 860px;margin-right: 40px;"
      >
        <!-- 序号 -->
        <template #preColumns>
          <el-table-column label="#" width="55" align="center" fixed>
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
        <template #columns>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="90"
          >
            <template #default="scope">
              <el-button
                size="small"
                type="danger"
                link
                @click="deleteRow(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>

      <div style="height: 460px;overflow-y: auto;">
        <!-- 标签 -->
        <div style="background-color: #fff;">
          <div style="display: flex;flex-direction: column;width: 330px;">
            <div v-for="(item, index) in list" :key="index" style="margin-bottom: 10px;width: 300px; height: 240px; box-sizing: border-box; border: 1px solid #606266; border-radius: 3px; padding: 8px 10px;display: flex;flex-direction: column;line-height: 20px;">
              <div style="display: flex;">
                <span style="margin-right: 16px;white-space: nowrap;">送检时间</span>
                <span style="color: #000;">{{ item.realDeliverTime }}</span>
              </div>
              <div style="display: flex;">
                <span style="margin-right: 16px;white-space: nowrap;">客户单位</span>
                <span style="color: #000;">{{ item.customerName }}</span>
              </div>
              <div style="display: flex;">
                <span style="margin-right: 16px;white-space: nowrap;">仪器名称</span>
                <span style="color: #000;">{{ item.sampleName }}</span>
              </div>
              <div style="display: flex;">
                <span style="margin-right: 16px;white-space: nowrap;">型ㅤㅤ号</span>
                <span style="color: #000;">{{ item.sampleModel }}</span>
              </div>
              <div style="display: flex;">
                <span style="margin-right: 16px;white-space: nowrap;">出厂编号</span>
                <span style="color: #000;">{{ item.manufacturingNo }}</span>
              </div>
              <div style="display: flex;">
                <span style="margin-right: 16px;white-space: nowrap;">备ㅤㅤ注</span>
                <span class="label-print-remark">{{ item.remark || '无' }}</span>
              </div>
              <div style="display: flex;justify-content: space-around;">
                <el-checkbox v-model="item.measured" disabled>
                  已检
                </el-checkbox>
                <el-checkbox v-model="item.backMeasure" disabled>
                  退检
                </el-checkbox>
              </div>
              <img
                id="barcode"
                style="width: 200px;margin-left: 44px;"
                :jsbarcode-value="item.sampleNo"
                jsbarcode-textmargin="0"
                jsbarcode-fontoptions="bold"
                jsbarcode-fontSize="32"
                :jsbarcode-height="48"
              >
            </div>
          </div>
        </div>

        <div id="labelHtml" style="display: flex;flex-direction: column;position: absolute;top: 0;right: 0;z-index: -999999;">
          <div v-for="(item, index) in list" :key="index" style="width: 300px; height: 240px; box-sizing: border-box; padding: 8px 10px;display: flex;flex-direction: column;line-height: 20px;">
            <div style="display: flex;">
              <span style="margin-right: 16px;white-space: nowrap;">送检时间</span>
              <span style="color: #000;">{{ item.realDeliverTime }}</span>
            </div>
            <div style="display: flex;">
              <span style="margin-right: 16px;white-space: nowrap;">客户单位</span>
              <span style="color: #000;">{{ item.customerName }}</span>
            </div>
            <div style="display: flex;">
              <span style="margin-right: 16px;white-space: nowrap;">仪器名称</span>
              <span style="color: #000;">{{ item.sampleName }}</span>
            </div>
            <div style="display: flex;">
              <span style="margin-right: 16px;white-space: nowrap;">型ㅤㅤ号</span>
              <span style="color: #000;">{{ item.sampleModel }}</span>
            </div>
            <div style="display: flex;">
              <span style="margin-right: 16px;white-space: nowrap;">出厂编号</span>
              <span style="color: #000;">{{ item.manufacturingNo }}</span>
            </div>
            <div style="display: flex;">
              <span style="margin-right: 16px;white-space: nowrap;">备ㅤㅤ注</span>
              <span class="label-print-remark">{{ item.remark || '无' }}</span>
            </div>
            <div style="display: flex;justify-content: space-around;">
              <el-checkbox v-model="item.measured">
                已检
              </el-checkbox>
              <el-checkbox v-model="item.backMeasure">
                退检
              </el-checkbox>
            </div>
            <img
              id="barcode"
              style="width: 100px;margin-left: 44px;"
              :jsbarcode-value="item.sampleNo"
              jsbarcode-textmargin="0"
              jsbarcode-fontoptions="bold"
              jsbarcode-fontSize="32"
              :jsbarcode-height="48"
            >
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button v-print="printObj" type="primary">
        打印
      </el-button>
      <!-- <el-button type="primary" @click="printHtml('labelHtml')">
        打印
      </el-button> -->
      <el-button @click="cancle">
        取消
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.label-print-remark {
  color: #000;

  @include text-overflow(1, false);
}
</style>