<!--
 * @Author: your name
 * @Date: 2021-04-11 08:24:41
 * @LastEditTime: 2021-04-13 09:23:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vue-hiprint/src/components/HelloWorld.vue
-->
<template>
  <div class="print_template_container">
		<el-container class="print_template_main" style="height: 100vh;">
			<el-aside width="240px">
				<el-row>
					<el-col :span="24" class="rect-printElement-types hiprintEpContainer">
						<el-row class="drag_item_title">拖拽组件列表</el-row>
						<el-row style="height: 100px;">
							<el-col :span="12" class="drag_item_box">
								<div>
									<a class="ep-draggable-item" tid="defaultModule.text" style>
										<span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
										<p class="glyphicon-class">文本</p>
									</a>
								</div>
							</el-col>
							<el-col :span="12" class="drag_item_box" tid="defaultModule.text">
								<div>
									<a class="ep-draggable-item" tid="defaultModule.image" style>
										<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
										<p class="glyphicon-class">图片</p>
									</a>
								</div>
							</el-col>
						</el-row>
						<el-row style="height: 100px;">
							<el-col :span="12" class="drag_item_box" tid="defaultModule.text">
								<div>
									<a class="ep-draggable-item" tid="defaultModule.longText">
										<span class="glyphicon glyphicon-subscript" aria-hidden="true"></span>
										<p class="glyphicon-class">长文</p>
									</a>
								</div>
							</el-col>
							<el-col :span="12" class="drag_item_box" tid="defaultModule.text">
								<div>
									<a class="ep-draggable-item" tid="defaultModule.tableCustom" style>
										<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
										<p class="glyphicon-class">表格</p>
									</a>
								</div>
							</el-col>
						</el-row>
						<el-row class="drag_item_title">辅助</el-row>
						<el-row style="height: 100px;">
							<el-col :span="12" class="drag_item_box" tid="defaultModule.text">
								<div>
									<a class="ep-draggable-item" tid="defaultModule.hline" style>
										<span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
										<p class="glyphicon-class">横线</p>
									</a>
								</div>
							</el-col>
							<el-col :span="12" class="drag_item_box" tid="defaultModule.text">
								<div>
									<a class="ep-draggable-item" tid="defaultModule.vline" style>
										<span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
										<p class="glyphicon-class">竖线</p>
									</a>
								</div>
							</el-col>
						</el-row>
						<el-row style="height: 100px;">
							<el-col :span="12" class="drag_item_box" tid="defaultModule.text">
								<div>
									<a class="ep-draggable-item" tid="defaultModule.rect">
										<span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
										<p class="glyphicon-class">矩形</p>
									</a>
								</div>
							</el-col>
							<el-col :span="12" class="drag_item_box" tid="defaultModule.text">
								<div>
									<a class="ep-draggable-item" tid="defaultModule.oval">
										<span class="glyphicon glyphicon-record" aria-hidden="true"></span>
										<p class="glyphicon-class">椭圆</p>
									</a>
								</div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-aside>
			<el-container>
				<el-header style="display:flex">
					<el-row style="height: 100%">
						<el-col :span="24" style="height: 100%">
							<el-button-group>
								<el-button :type="currentPaperType === 'A3' ? 'primary' : 'info'" @click="setPaper('A3')">A3</el-button>
								<el-button :type="currentPaperType === 'A4' ? 'primary' : 'info'" @click="setPaper('A4')">A4</el-button>
								<el-button :type="currentPaperType === 'A5' ? 'primary' : 'info'" @click="setPaper('A5')">A5</el-button>
								<el-button :type="currentPaperType === 'B3' ? 'primary' : 'info'" @click="setPaper('B3')">B3</el-button>
								<el-button :type="currentPaperType === 'B4' ? 'primary' : 'info'" @click="setPaper('B4')">B4</el-button>
								<el-button :type="currentPaperType === 'B5' ? 'primary' : 'info'" @click="setPaper('B5')">B5</el-button>
							</el-button-group>
							<el-popover
								placement="bottom"
								title="请输入自定义纸张宽高"
								trigger="click">
								<el-form ref="otherPaperForm" label-position="left" :model="otherPaper" label-width="30px">
									<el-row>
										<el-col :span="16">
											<el-form-item label="宽">
												<el-input v-model="otherPaper.width">
													<template slot="append">mm</template>
												</el-input>
											</el-form-item>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="16">
											<el-form-item label="高">
												<el-input v-model="otherPaper.height">
													<template slot="append">mm</template>
												</el-input>
											</el-form-item>
										</el-col>
									</el-row>
									<el-form-item>
										<el-button type="primary" @click="setPaper('other', otherPaper.width, otherPaper.height)">确定</el-button>
										<el-button @click="setPaper('other', '', '')">清空</el-button>
									</el-form-item>
									</el-form>
								<el-button slot="reference" :type="currentPaperType === 'other' ? 'primary' : 'info'">自定义纸张</el-button>
							</el-popover>
							<el-button-group>
								<!-- <el-button type="info" icon="el-icon-refresh-right" @click="rotatePaper">旋转</el-button> -->
								<el-button type="info" icon="el-icon-delete" @click="clearTemplate">清空</el-button>
							</el-button-group>
							<el-button-group>
								<el-button type="info" icon="el-icon-view" @click="previewTemplate()">快速预览</el-button>
								<!-- <el-button type="info" icon="el-icon-document" @click="getJson()">预览JSON</el-button> -->
								<!-- <el-button type="info" icon="el-icon-tickets" @click="getHtml(printData)">预览HTML</el-button> -->
							</el-button-group>
							<el-button-group>
								<el-button
									type="info"
									icon="el-icon-full-screen"
									v-if="!fullDialogStatus"
									@click="fullDialogStatus = true"
								>全屏</el-button>
								<el-button
									type="info"
									icon="el-icon-full-screen"
									v-if="fullDialogStatus"
									@click="fullDialogStatus = false"
								>正常屏幕</el-button>
							</el-button-group>
							<!-- <el-button-group>
								<el-button type="info" icon="el-icon-printer" @click="printTemplate(printData)">打印</el-button>
							</el-button-group> -->
							<el-button-group>
								<el-button type="info" icon="el-icon-coin" @click="bindDataSources">数据源</el-button>
							</el-button-group>
              <el-button-group>
								<el-button type="info" icon="el-icon-coin" @click="saveTemplate">保存模板</el-button>
							</el-button-group>
						</el-col>
					</el-row>
				</el-header>
				<el-main>
					<el-row>
						<el-col
							style="padding: 20px"
							:span="18"
							id="hiprint-printTemplate"
							class="hiprint-printTemplate"
						></el-col>
						<el-col :span="6" style="display:none" class="params_setting_container">
							<el-row class="hinnn-layout-sider" style="padding: 10px;">
								<div id="PrintElementOptionSetting"></div>
							</el-row>
						</el-col>
					</el-row>

					<el-drawer
						size="100%"
						class="params_drawer"
						:title="paramsDrawerTitle"
						:modal="false"
						:wrapperClosable="true"
						@opened="handleParamsOpened"
						:visible.sync="paramsDrawerStatus"
						direction="rtl"
					>
						<h4 slot="title">参数设置: {{ paramsDrawerTitle }}</h4>
						<div id="params_content"></div>
					</el-drawer>
				</el-main>
			</el-container>
		</el-container>

		<el-dialog
			class="preview_dialog"
			ref="previewDialog"
			title="快速预览"
			@opened="handlePreviewOpened(printData)"
			:width="currentPaper.width * 1 + 'mm'"
			:visible.sync="previewDialogStatus"
		>
			<div id="preview_content"></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="previewDialogStatus = false">取 消</el-button>
				<el-button type="primary" @click="previewDialogStatus = false">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog
			ref="infoDialog"
			:title="infoDialogTitle"
			:lock-scroll="true"
			:visible.sync="infoDialogStatus"
		>
			<el-input
				type="textarea"
				:readonly="true"
				:autosize="{ minRows: 17}"
				placeholder="请输入内容"
				v-model="infoTextarea"
			></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="infoDialogStatus = false">取 消</el-button>
				<el-button type="primary" @click="infoDialogStatus = false">复 制</el-button>
			</span>
		</el-dialog>

		<el-dialog ref="infoDialog" title="数据源绑定" :lock-scroll="true" :visible.sync="dataDialogStatus">
			<el-table :data="dataSources" style="width: 100%">
				<el-table-column label="组件" width="100">
					<template slot-scope="scope">
						{{ scope.row.printElementType.title }}
					</template>
				</el-table-column>
				<el-table-column label="类型" width="100">
					<template slot-scope="scope">
						{{ scope.row.printElementType.type }}
					</template>
				</el-table-column>
				<el-table-column label="字段" width="100">
					<template slot-scope="scope">
						{{ scope.row.options.field }}
					</template>
				</el-table-column>
				<el-table-column label="标题">
					<template slot-scope="scope">
						{{ scope.row.options.title }}
					</template>
				</el-table-column>
				<el-table-column label="远程数据源">
					<template slot-scope="scope">
						<el-select :value="scope.row.options.field" placeholder="请选择">
							<el-option
							:label="'名称数据'"
							:value="'name'">
							</el-option>
							<el-option
							:label="'描述数据'"
							:value="'desc'">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dataDialogStatus = false">取 消</el-button>
				<el-button type="primary" @click="dataDialogStatus = false">复 制</el-button>
			</span>
		</el-dialog>

		<el-dialog
			class="full_screen_dialog"
			:show-close="false"
			:visible.sync="fullDialogStatus"
			:modal="false"
			@opened="openFullScreen"
			@close="closeFullScreen"
			:fullscreen="true"
		>
			<div class="full_content_container" style="width:100%; height: 100%"></div>
		</el-dialog>
    <div id="html"></div>
	</div>
</template>

<script>
import $ from 'jquery';
//封装的hiprint方法
import { newHiprint ,initHiprint ,bindBtnEvent } from  '../assets/hiprint/index.js';

import { printData } from '../assets/hiprint/custom_test/print-data';
var hiprintTemplate;
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      printData: printData,
			previewDialogStatus: false,
			paramsDrawerStatus: false,
			infoDialogStatus: false,
			fullDialogStatus: false,
			dataDialogStatus: false,
			infoTextarea: '',
			infoDialogTitle: '',
			paramsDrawerTitle: '',
			previewHtml: null,
			paperMap: {
				A3: {
					width: 420,
					height: 296.6
				},
				A4: {
					width: 210,
					height: 296.6
				},
				A5: {
					width: 210,
					height: 147.6
				},
				B3: {
					width: 500,
					height: 352.6
				},
				B4: {
					width: 250,
					height: 352.6
				},
				B5: {
					width: 250,
					height: 175.6
				}
			},
			currentPaper: {
				width: null,
				height: null
			},
			otherPaper: {
				width: '',
				height: ''
			},
			dataSources: []
    }
  },
  methods:{
    getTemplate(){
      let url = 'http://localhost:3000/api/user/template';
      return new Promise ((resolve,reject)=>{
          this.$http.get(url+'?id=20').then((data)=>{
            resolve(data);
          }).catch(err=>{
            reject(err);
          })
      })
    },
    saveTemplate(){
      let url = 'http://localhost:3000/api/user/template';
      let headers = {
        'Content-Type': 'application/json'
      }
      this.$http.post(url,JSON.stringify(hiprintTemplate.getJson()),{headers: headers}).then(data=>{
        console.log(data);
      })
    },
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 10:19:43
		 * @Desc: 设置纸张属性
		 * @param width 当前纸张宽度 mm
		 * @param height 当前纸张高度 mm
		 */
		setCurrentPaper(obj) {
			let { width, height } = obj;
			this.currentPaper.width = width;
			this.currentPaper.height = height;
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 09:35:36
		 * @Desc: 设置纸张
		 * @param type [A3, A4, A5, B3, B4, B5, other]
		 * @param width 自定义高度
		 * @param height 自定义高度
		 */
		setPaper(type, width, height) {
			try {
				if (type === 'other') {
					if (width === '' && height === '') {
						hiprintTemplate.setPaper('A4', null);
						this.setCurrentPaper(this.paperMap['A4'])
						this.otherPaper = {width: '', height: ''}
					} else {
						hiprintTemplate.setPaper(width, height);
						this.setCurrentPaper({ width: width, height: height })
					}
				} else {
					hiprintTemplate.setPaper(type, null);
					this.setCurrentPaper(this.paperMap[type])
					this.otherPaper = {width: '', height: ''}
				}
			} catch (error) {
				this.$message({
					message: '操作失败:' + error,
					type: 'error'
				});
			}
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 09:41:02
		 * @Desc: 旋转
		 */
		rotatePaper() {
			try {
				hiprintTemplate.rotatePaper();
			} catch (error) {
				this.$message({
					message: '操作失败:' + error,
					type: 'error'
				});
			}
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 09:41:38
		 * @Desc: 清除配置
		 */
		clearTemplate() {
			try {
				hiprintTemplate.clear();
			} catch (error) {
				this.$message({
					message: '操作失败:' + error,
					type: 'error'
				});
			}
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 09:56:28
		 * @Desc: 快速预览
		 */
		previewTemplate() {
			this.previewDialogStatus = true;
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 10:45:49
		 * @Desc: 打开预览dialog回调
		 */
		handlePreviewOpened(printData) {
			$('#preview_content').html(hiprintTemplate.getHtml(printData))
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 10:46:07
		 * @Desc: 打印
		 */
		printTemplate(printData) {
			hiprintTemplate.print(printData);
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 11:21:20
		 * @Desc: 设置element click事件监听
		 */
		elementAddEventListen() {
			let self = this
			window.hinnn.event.on(hiprintTemplate.getPrintElementSelectEventKey(), function (t) {
				self.paramsDrawerTitle = t.printElementType.title
				self.paramsDrawerStatus = true
			})
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 11:21:05
		 * @Desc: 参数设置drawer回调,将参数设置dom添加到弹出层中
		 */
		handleParamsOpened() {
			$('#params_content').append($('.hinnn-layout-sider'))
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 17:05:25
		 * @Desc: 获取配置JSON
		 */
		getJson() {
			this.infoTextarea = JSON.stringify(hiprintTemplate.getJson());
			this.infoDialogTitle = '预览JSON'
			this.infoDialogStatus = true;
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 17:05:07
		 * @Desc: 获取配置HTML
		 * @param printData
		 */
		getHtml(printData) {
			this.infoTextarea = hiprintTemplate.getHtml(printData)[0].outerHTML;
			this.infoDialogTitle = '预览HTML'
			this.infoDialogStatus = true;
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-31 09:45:15
		 * @Desc: 打开全屏
		 */
		openFullScreen() {
			$('.full_content_container').append($('.print_template_main'))
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-31 09:45:08
		 * @Desc: 关闭全屏
		 */
		closeFullScreen() {
			$('.print_template_container').append($('.print_template_main'))
		},
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-31 09:44:53
		 * @Desc: 绑定数据源
		 */
		bindDataSources() {
			let eles = hiprintTemplate.getJson().panels[0].printElements
			if (eles) {
				this.dataSources = eles
			} else {
				this.dataSources = []
			}
			this.dataDialogStatus = true;
		}
  },
  computed: {
		/**
		 * @Author: TangLiangcheng
		 * @Date: 2019-07-30 16:06:13
		 * @Desc: 处理当前选中纸张
		 */
		currentPaperType() {
			let type = null;
			if (this.otherPaper.width !== '' && this.otherPaper.height !== '') {
				type = 'other'
			} else {
				for (const key in this.paperMap) {
					let item = this.paperMap[key]
					let { width, height } = this.currentPaper
					if (item.width === width && item.height === height) {
						type = key
					}
				}
			}

			return type
		}
	},
  mounted(){
    var self = this;
    let printData =  this.getTemplate();
    $(document).ready(function () {
			//初始化打印插件
      initHiprint();
			//设置左侧拖拽事件
      bindBtnEvent($('.ep-draggable-item'));
      //设置模板
      printData.then((res)=>{
        let _customPrintJson = {panels:[res.data.data]};

        // _customPrintJson = []
        hiprintTemplate = newHiprint(_customPrintJson,'#PrintElementOptionSetting','.hiprint-printPagination');
        //打印设计
        hiprintTemplate.design('#hiprint-printTemplate');
        self.setCurrentPaper(self.paperMap.A4);
        self.elementAddEventListen();
        $('.params_drawer').width($('.params_setting_container').width() * 1) //动态设置右部参数设置框宽度
      })
		});
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-header,
.el-footer {
	background-color: #b3c0d1;
	color: #333;
	line-height: 60px;
}

.el-aside {
	background-color: #d3dce6;
	color: #333;
	padding: 6px;
}

.el-main {
	background-color: #e9eef3;
	color: #333;
	padding: 0;
}

.drag_item_box {
	height: 100%;
	padding: 6px;
}

.drag_item_box > div {
	height: 100%;
	width: 100%;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.drag_item_box > div > a {
	text-align: center;
	text-decoration-line: none;
}

.drag_item_box > div > a > span {
	font-size: 28px;
}

.drag_item_box > div > a > p {
	margin: 0;
}

.drag_item_title {
	font-size: 16px;
	padding: 12px 6px 0 6px;
	font-weight: bold;
}

.preview_dialog .el-dialog__body {
	padding: 0;
}

#params_content .container {
	width: 100% !important;
}

.params_drawer .el-drawer.rtl {
	overflow: auto;
}

.params_drawer .el-drawer__header {
	margin-bottom: 0;
}

.params_drawer {
	left: auto;
}

.hiprint-printTemplate {
	overflow-x: auto;
}

.hiprint-printPaper {
	background-color: #fff;
}

.full_screen_dialog .el-dialog__header {
	padding: 0;
	margin: 0;
}

.full_screen_dialog .el-dialog__body {
	padding: 0;
}
</style>
