<template>
	<el-dialog :model-value="props.showes" @close="closeFun" width="70%">
		<div ref="ceshiRef">
			<ceshi id="ceshi" :data="props.listData"></ceshi>
		</div>

		<div class="btnList">
			<el-button type="primary" @click="printElement">打印</el-button>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { defineProps, reactive, ref, nextTick, defineEmits } from 'vue';
import ceshi from './ceshi.vue';
import printJS from 'print-js';
import html2canvas from 'html2canvas';

const ceshiRef = ref();
const emits = defineEmits(['close']);
const props = defineProps({
	listData: {
		type: Array,
		default: () => [],
	},
	showes: {
		type: Boolean,
		default: true,
	},
});
const state = reactive({
	snapshotUrl: '',
});
const closeFun = () => {
	emits('close');
};
const printElement = () => {
	captureSnapshot();
	// 获取 DOM 元素的 HTML

};
// 截图函数
const captureSnapshot = async () => {
	const canvas = await html2canvas(ceshiRef.value, {
		allowTaint: true, // 允许跨域图片
		useCORS: true, // 使用 CORS 加载图片
		scale: 2, // 提高截图分辨率
		width: ceshiRef.value.clientWidth,
		height: ceshiRef.value.clientHeight,
	});
	state.snapshotUrl = canvas.toDataURL('image/png');
  printJS({
    printable: state.snapshotUrl,
    type: 'image',
    style: `
        @page {
          size: auto;
          margin: 0mm;
        }
        body {
          margin: 0;
          padding: 36px;
        }
      `,
  });
};
</script>
<style scoped lang="scss">
.btnList {
	margin-top: 26px;
	display: flex;
	justify-content: center;
}
:deep(.el-form){
  border-right: 0 !important;
}
.shuming {
  width: 100%;
  display: flex;
  justify-content: space-between;
  //text-align: left;
}
.nameText {
  margin-right: 120px;
  margin-top: 80px;
}
.dateTime {
  margin-right: 50px;
  margin-top: 16px;
}
.dateTime > span {
  margin-left: 42px;
}
:deep(.el-table__inner-wrapper) {
  box-sizing: border-box;
  //border: 1px solid black;
}

:deep(.is-leaf) {
  border-color: black;
}

:deep(.el-table__cell) {
  border-color: black;
}

:deep(.el-table__cell) {
  border-color: black !important;
}

:deep(.el-card) {
  border: 1px solid black !important;
}

:deep(.avue-crud__header) {
  display: none;
}

:deep(.avue-crud__body) {
  padding: 0 !important;
}

.orderPrinting {
  width: 100%;

  .title {
    width: 100%;
    height: 50px;
    background-color: #deeaf6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    letter-spacing: 10px;
  }

  .orderPrintingTop {
    height: 161px;
    border: 1px solid #000000;
    box-sizing: border-box;
    display: flex;

    .item1 {
      width: 33.33%;
      height: 160px;
      border-right: 1px solid #000000;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .item2 {
      width: 33.33%;
      height: 160px;
      border-right: 1px solid #000000;
      box-sizing: border-box;
      padding: 16px;

      .dataText {
        font-size: 16px;
        margin-bottom: 16px;
        color: #000000;
      }
    }

    .item2 {
      width: 33.33%;
      height: 160px;
      //border-right: 1px solid black;
    }

    .item3 {
      width: 33.33%;
      height: 160px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
