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

// 点击取消
const cancle = () => {
  visible.value = false
}

// 点击确定
const clickConfirm = () => {
  // if (!checkoutList.value.length) {
  //   ElMessage({
  //     message: '请选中',
  //     type: 'warning',
  //   })
  // }
  // emits('confirmCheckout', checkoutList.value)
  // cancle()
}

function initDialog(value: any) {
  list.value = value
  visible.value = true
  nextTick(() => {
    JsBarcode('#barcode').init()
  })
}

defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-model="visible" title="标签打印" width="85%" @close="cancle">
    <div style="display: flex;">
      <normal-table
        :data="list"
        :pagination="false"
        :columns="columns"
        :is-showmulti-select="false"
        style="width: 50%;"
      >
        <!-- 序号 -->
        <template #preColumns>
          <el-table-column label="#" width="55" align="center" fixed>
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
      </normal-table>
      <!-- 标签 -->
      <div v-for="(item, index) in list" :key="index">
        <div style="width: 300px; height: 240px; margin-left: 20px;box-sizing: border-box; border: 1px solid #606266; border-radius: 3px; padding: 10px 20px;display: flex;flex-direction: column;line-height: 24px;">
          <div style="white-space: nowrap;">
            <span style="margin-right: 16px;">送检时间</span>
            <span style="font-weight: 600;">{{ item.realDeliverTime }}</span>
          </div>
          <div>
            <span style="margin-right: 16px;">仪器名称</span>
            <span style="font-weight: 600;">{{ item.sampleName }}</span>
          </div>
          <div>
            <span style="margin-right: 16px;">型ㅤㅤ号</span>
            <span style="font-weight: 600;">{{ item.sampleModel }}</span>
          </div>
          <div>
            <span style="margin-right: 16px;">出厂编号</span>
            <span style="font-weight: 600;">{{ item.manufacturingNo }}</span>
          </div>
          <div>
            <span style="margin-right: 16px;">备ㅤㅤ注</span>
            <span style="font-weight: 600;">{{ item.remark || '无' }}</span>
          </div>
          <svg
            id="barcode"
            style="width: 300px;height: 240px;"
            :jsbarcode-value="item.sampleNo"
            jsbarcode-textmargin="0"
            jsbarcode-fontoptions="bold"
          />
        </div>
      </div>
    </div>

    <template #footer>
      <el-button type="primary" @click="clickConfirm">
        确定
      </el-button>
      <el-button @click="cancle">
        取消
      </el-button>
    </template>
  </el-dialog>
</template>