<template>
	<div id="container">
		<el-row :gutter="12">
			<el-col :offset="8" :span="8">
				<el-card shadow="always">
					<div slot="header" class="clearfix">
						<span>简单实例</span>
					</div>

					<div>
						<el-form label-width="80px">
							<el-form-item label="菜名">
								<el-input v-model="formData.name"></el-input>
							</el-form-item>
							<el-form-item label="条形码">
								<el-input v-model="formData.code"></el-input>
							</el-form-item>
							<el-form-item label="页数">
								<el-input-number v-model="formData.number" controls-position="right" :min="1" :max="10">
								</el-input-number>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="print">生成打印文件</el-button>
							</el-form-item>
						</el-form>
					</div>

				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import PrintTemplate from 'print-template'
	export default {
		name: 'SupplierBankInfoIndex',
		data() {
			return {
				template: null,
				formData: {
					number: 1,
					name: '泡菜肉丝',
					code: 'PCRS11886622'
				}
			}
		},

		created() {
			this.initPrintTemplate()
		},
		methods: {

			initPrintTemplate() {
				this.template = new PrintTemplate()
				this.template.push({
					name: 'printTemplate',
					size: [210, 297], // a4 或 [221,291]
					fixed: [

						{
							type: 'text',
							fontWeight: 400,
							x: 88,
							y: 3,
							default: '汇融惠享礼包卡',
							fontSize: '5', // 字体大小
							fontFamily: '微软雅黑', // 字体类型   默认 '微软雅黑'
							fontWeight: null, // 字体宽度
							fontStyle: 'normal', // 字体样式 normal / 斜体
							maxWidth: null, // 最大换行宽度
							orientation: 'l', // 方向 默认 l 横向  / p 竖向
							color: 'red' // 字体颜色 (1.2.8版本新增) 
						},
						// 1号
						{
							type: 'line',
							x: 10,
							y: 12,
							length: 90,
							color: 'blue', // 线段颜色 (1.2.8版本新增)
							orientation: 'l', // 方向 默认 l 横向  / p 竖向
						},
						{
							type: 'line',
							x: 10,
							y: 12,
							length: 40,
							color: 'red', // 线段颜色 (1.2.8版本新增)
							orientation: 'p', // 方向 默认 l 横向  / p 竖向
						},
						{
							type: 'line',
							x: 10,
							y: 52,
							length: 90,
							color: 'blue', // 线段颜色 (1.2.8版本新增)
							orientation: 'l', // 方向 默认 l 横向  / p 竖向
						},
						{
							type: 'line',
							x: 100,
							y: 12,
							length: 40,
							color: 'red', // 线段颜色 (1.2.8版本新增)
							orientation: 'p', // 方向 默认 l 横向  / p 竖向
						},

						{
							type: 'line',
							x: 10,
							y: 20,
							length: 90,
							color: 'blue', // 线段颜色 (1.2.8版本新增)
							orientation: 'l', // 方向 默认 l 横向  / p 竖向
						},

						{
							type: 'line',
							x: 32,
							y: 20,
							length: 14,
							color: 'blue', // 线段颜色 (1.2.8版本新增)
							orientation: 'p', // 方向 默认 l 横向  / p 竖向
						},


						{
							type: 'line',
							x: 10,
							y: 34,
							length: 90,
							color: 'blue', // 线段颜色 (1.2.8版本新增)
							orientation: 'l', // 方向 默认 l 横向  / p 竖向
						},

						{
							type: 'text', // 类型  文本 line / text / image / barcode / qrcode
							// default: '家庭菜窖-白菜券', // 默认值  \n 换行  或设置maxWidth大小
							x: 30, // x
							y: 14, // y
							fontSize: '5', // 字体大小
							fontFamily: '微软雅黑', // 字体类型   默认 '微软雅黑'
							fontWeight: null, // 字体宽度
							fontStyle: 'normal', // 字体样式 normal / 斜体
							maxWidth: null, // 最大换行宽度
							orientation: 'l', // 方向 默认 l 横向  / p 竖向
							color: 'red' // 字体颜色 (1.2.8版本新增)
						},
						{
							type: 'text', // 类型  文本 line / text / image / barcode / qrcode
							default: '手机提货:\n扫描下方\n  二维码', // 默认值  \n 换行  或设置maxWidth大小
							x: 14, // x
							y: 23, // y
							fontSize: '3', // 字体大小
							fontFamily: '微软雅黑', // 字体类型   默认 '微软雅黑'
							fontWeight: null, // 字体宽度
							fontStyle: 'normal', // 字体样式 normal / 斜体
							maxWidth: null, // 最大换行宽度
							orientation: 'l', // 方向 默认 l 横向  / p 竖向
							color: 'red' // 字体颜色 (1.2.8版本新增)
						},

						{
							type: 'text', // 类型  文本 line / text / image / barcode / qrcode
							default: '提货券使用说明:\n· 本券概不挂失,不兑换现金\n· 本券提货编码和提货密码为兑换的唯一凭证\n· 手机扫描二维码可查询券卡状态', // 默认值  \n 换行  或设置maxWidth大小
							x: 35, // x
							y: 21, // y
							fontSize: '3', // 字体大小
							fontFamily: '微软雅黑', // 字体类型   默认 '微软雅黑'
							fontWeight: null, // 字体宽度
							fontStyle: 'normal', // 字体样式 normal / 斜体
							maxWidth: null, // 最大换行宽度
							orientation: 'l', // 方向 默认 l 横向  / p 竖向
							color: 'red' // 字体颜色 (1.2.8版本新增)
						},

						{
							type: 'text', // 类型  文本 line / text / image / barcode / qrcode
							default: '提货编码', // 默认值  \n 换行  或设置maxWidth大小
							x: 12, // x
							y: 37, // y
							fontSize: '3', // 字体大小
							fontFamily: '微软雅黑', // 字体类型   默认 '微软雅黑'
							fontWeight: null, // 字体宽度
							fontStyle: 'normal', // 字体样式 normal / 斜体
							maxWidth: null, // 最大换行宽度
							orientation: 'p', // 方向 默认 l 横向  / p 竖向
							color: 'red' // 字体颜色 (1.2.8版本新增)
						},



						// 2号
						{
							type: 'line',
							x: 110,
							y: 12,
							length: 90,
							color: 'green', // 线段颜色 (1.2.8版本新增)
							orientation: 'l', // 方向 默认 l 横向  / p 竖向
						},
						{
							type: 'line',
							x: 110,
							y: 12,
							length: 40,
							color: 'orange', // 线段颜色 (1.2.8版本新增)
							orientation: 'p', // 方向 默认 l 横向  / p 竖向
						},
						{
							type: 'line',
							x: 110,
							y: 52,
							length: 90,
							color: 'green', // 线段颜色 (1.2.8版本新增)
							orientation: 'l', // 方向 默认 l 横向  / p 竖向
						},
						{
							type: 'line',
							x: 200,
							y: 12,
							length: 40,
							color: 'orange', // 线段颜色 (1.2.8版本新增)
							orientation: 'p', // 方向 默认 l 横向  / p 竖向
						},
						// {
						// 	type: 'line',
						// 	x: 2,
						// 	y: 12,
						// 	orientation: 'p', //  l 横向  / p 竖向
						// 	length: 110
						// },
						// {
						// 	type: 'line',
						// 	x: 74,
						// 	y: 12,
						// 	orientation: 'p',
						// 	length: 110
						// },
						// {
						// 	type: 'text',
						// 	x: 10,
						// 	y: 30,
						// 	fontSize: 3,
						// 	default: '菜名'
						// },
						// {
						// 	type: 'line',
						// 	x: 25,
						// 	y: 27,
						// 	orientation: 'p',
						// 	length: 8
						// },
						// {
						// 	type: 'line',
						// 	x: 2,
						// 	y: 35,
						// 	length: 72
						// },
						// {
						// 	type: 'line',
						// 	x: 2,
						// 	y: 27,
						// 	length: 72
						// },
						// {
						// 	type: 'text',
						// 	x: 10,
						// 	y: 50,
						// 	fontSize: 3,
						// 	default: '二维码'
						// },
						// {
						// 	type: 'line',
						// 	x: 25,
						// 	y: 35,
						// 	orientation: 'p',
						// 	length: 30
						// },
						// {
						// 	type: 'line',
						// 	x: 2,
						// 	y: 65,
						// 	length: 72
						// },
						// {
						// 	type: 'line',
						// 	x: 2,
						// 	y: 122,
						// 	length: 72
						// },
						// {
						// 	type: 'text',
						// 	fontSize: 3.8,
						// 	fontWeight: 700,
						// 	x: 33,
						// 	y: 5,
						// 	default: '标题'
						// },
						// {
						// 	type: 'qrcode',
						// 	x: 30,
						// 	y: 38,
						// 	width: 18,
						// 	default: 'https://supervise.yxtsoft.com/lpkapi?code=20231130110815671089'
						// }

					],

					data: {
						name: {
							type: 'text',
							x: 30, // x
							y: 14, // y
							fontSize: '5', // 字体大小
						},
						name2: {
							type: 'text',
							x: 17, // x
							y: 48, // y
							fontSize: '3', // 字体大小
						},
						code: {
							x: 16,
							y: 35,
							type: 'qrcode',
							default: 'https://supervise.yxtsoft.com/lpkapi?code=20231130110815671089',
							width: 13
						}
					}

				})
			},

			print() {
				let printData = []
				let printUrl = null
				for (let index = 0; index < this.formData.number; index++) {
					printData.push({
						code: "	",
						name: "家庭菜窖-白菜券",
						name2: "222222"
					})
				}
				this.template.print('printTemplate', printData).then(printPdf => {
					if (printPdf) {
						this.$message.success('生成成功')
						printUrl = printPdf.output('bloburi', {
							filename: '打印文件'
						})
						window.open(printUrl, '_blank')
					} else {
						this.$message.warring('生成失败')
					}
				})
			}
		}
	}
</script>
<style scoped>
	#container {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>