<template>
	<div :id="id" class="print_table_container" :style="styles">
		<slot name="header"></slot>
		<h4 v-if="title" class="print_table_title" :style="titleStyles">{{ title }}</h4>
		<div class="print_table_box">
			<table border="1" cellspacing="1" collapse="collapse">
				<tr>
					<th v-for="(th, thindex) in ths" :key="thindex" :style="thStyle" >{{ th.label }}</th>
				</tr>
				<template v-for="(item, index) in datas" :key="index">
					<tr v-if="item.distribution" >
						<td class="th_one" :colspan="ths.length">{{ item.distributionCentent }}</td>
					</tr>
					<tr v-for="(tds, tdi) in item.list" :key="tdi">
                        <td v-if="isHaveNo">{{ tdi + 1 }}</td>
                        <template v-for="(td, tdi) in ths" :key="tdi">
                            <td v-if="td.label !== 'NO' && td.type !== 'index' && td.label !== 'No' && td.label !== 'no' && td.label !== 'nO'">
                                {{ tds[td.prop] }}
                            </td>
                        </template>
					</tr>
				</template>
			</table>
		</div>
		<slot name="footer"></slot>
	</div>
</template>

<script lang="ts" setup>
import printJs from 'print-js';
import { defineProps, withDefaults, computed, onMounted, watch } from 'vue';

type AlignType = 'center' | 'left' | 'right';

interface PrintTableThs {
	label: string;
	prop: string;
	type?: 'index' | '';
}

interface DataType {
	distribution: boolean;
	distributionCentent?: string;
	list: any[];
}

export interface Props {
	title?: string; // 标题
	titleColor?: string; // 标题颜色
	titleSize?: number; // 标题字体大小
	titleAlign?: AlignType; // 标题对齐方式
	ths: PrintTableThs[]; // 标题和对应的字段
	thStyle?: string; // 表头的样式
	styles?: string; // 总样式
	datas: DataType[]; // 渲染数据源
	id?: string;
}

const props = withDefaults(defineProps<Props>(), {
	title: '',
	titleAlign: 'center',
	titleSize: 16,
	titleColor: '#333333',
	ths: () => [],
	styles: '',
	thStyle: '',
	datas: () => [],
	fontSize: 12,
	id: 'pdfDom'
});

const titleStyles = computed(() => {
	return {
		'text-align': props.titleAlign,
		color: props.titleColor,
		'font-size': props.titleSize + 'px',
	};
});


const isHaveNo = computed(() => {
    return !!props.ths.find(e => (e.label === 'NO' || e.type === 'index' || e.label === 'No' || e.label === 'no' || e.label === 'nO'))
})

const printDom = async () => {
	printJs({
		printable: props.id,
		type: 'html',
		style:
			'@page{size: Tabloid;}' +
			'@media print { #pdfDom{text-align: center; width:100% }' +
			'table {border-top: 1px solid #999999;border-left: 1px solid #999999;border-spacing: 0; table-layout: auto;width:100%;}' +
            `table th { font-size: ${props.fontSize}px; font-weight: 400; }` +
			`table td {border-bottom: 1px solid #999999;border-right: 1px solid #999999; font-size:${props.fontSize}px;text-align: center; color: #000; word-wrap: break-word; word-break: break-word; }` +
            'table .th_one { height: 50px }}'
            ,
		scanStyles: false,
		targetStyles: ['*'],
	});
};


// eslint-disable-next-line no-undef
defineExpose({printDom})

</script>

<style lang="less" scoped>
.print_table_container {
    position: fixed;
    left: -100000px;
    width: 100%;
	background: #fff;
	.print_table_title {
		line-height: 4rem;
	}
	.print_table_box {
		width: 100%;
		table {
			width: 100%;
			overflow: hidden;
			border-collapse: collapse;
			table-layout: auto; /* 表格自动分配宽度 */
			white-space: normal; /* 换行显示内容 */
			border-color: #999999;
			th {
				text-align: center;
				font-size: 12px;
				font-weight: 600;
			}
			td {
				text-align: center;
				font-size: 12px;
			}
			.th_one {
				text-align: center;
			}
		}
	}
}
</style>
<style>
@media print { #pdfDom{text-align: center; width:100%; } }
</style>