<template>
	<div id="baseCanvas" @mouseover="mouseOver" @mouseleave="mouseLeave">
		<BaseCanvas class="sign-canvas" ref="SignCanvas" :options="options"/>
		<div class="canvas-tools animated fadeIn" ref="canvasTools">
			<span class="canvas-tools-item" style="border-radius: 15px 0 0 0;">
				<Poptip trigger="hover">
					<div class="flex-center">
						<Icon type="md-brush" />
						<span>粗细</span>
					</div>
					<div slot="content" class="widthDotBox">
						<span class="widthDot widthDot5" :style="{ backgroundColor: (activeDot === 2 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(2,$event)"></span>
						<span class="widthDot widthDot1" :style="{ backgroundColor: (activeDot === 5 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(5,$event)"></span>
						<span class="widthDot widthDot2" :style="{ backgroundColor: (activeDot === 10 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(10,$event)"></span>
						<span class="widthDot widthDot3" :style="{ backgroundColor: (activeDot === 15 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(15,$event)"></span>
						<span class="widthDot widthDot4" :style="{ backgroundColor: (activeDot === 20 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(20,$event)"></span>
					</div>
				</Poptip>
			</span>
			<span class="canvas-tools-item" v-if="!isStudent">
				<Poptip trigger="hover">
					<div class="flex-center">
						<Icon type="md-color-palette" :color="activeColor" />
						<span>画笔颜色</span>
					</div>
					<div slot="content" class="widthDotBox">
						<span class="color-item color-item-black" :style="{ borderColor: (activeColor === 'black' ? 'black' : 'transparent')}"
						 @click="onSelectWriteColor('black',$event)"></span>
						<span class="color-item color-item-blue" :style="{ borderColor: (activeColor === 'blue' ? 'black' : 'transparent')}"
						 @click="onSelectWriteColor('blue',$event)"></span>
						<span class="color-item color-item-red" :style="{ borderColor: (activeColor === 'red' ? 'black' : 'transparent')}"
						 @click="onSelectWriteColor('red',$event)"></span>
					</div>
				</Poptip>
			</span>
			<span class="canvas-tools-item" @click="addText()">
				<Icon type="md-text" />
				<span>文本输入</span>
			</span>
			<span class="canvas-tools-item" @click="canvasClear()">
				<Icon type="md-refresh" />
				<span>清屏</span>
			</span>
			<span class="canvas-tools-item" @click="closeModal()">
				<Icon type="md-close" />
				<span>关闭</span>
			</span>
			<span class="canvas-tools-item" @click="downloadSignImg()" style="border-radius:  0 15px 0 0 ;">
				<Icon type="md-cloud-download" />
				<span>保存</span>
			</span>
		</div>
		
		<Modal v-model="addTextModal" title="添加文本" ref="pointRef" width="400px" class="related-point-modal" style="z-index:99999">
			<span>输入文本内容</span>
			<Input v-model="addTextVal"  style="margin:10px 0" />
			<div slot="footer">
				<Button type="primary" style="width: 100px;" @click="doAddText">确认</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
	import BaseCanvas from './BaseCanvas.vue';
	export default {
		components: {
			BaseCanvas
		},
		props: {
			isStudent: {
				type: Boolean,
				default: false
			},
			hideBorder: {
				type: Boolean,
				default: false
			},
			bgImg: {
				type: String,
				default: ''
			},
			writeColor: {
				type: String,
				default: 'black'
			}
		},
		data() {
			return {
				value: null,
				addTextModal:false,
				addTextVal:'',
				activeDot: 5,
				activeColor: 'black',
				options: {
					isDpr: false, //是否使用dpr兼容高分屏 [Boolean] 可选
					lastWriteSpeed: 1, //书写速度 [Number] 可选
					lastWriteWidth: 2, //下笔的宽度 [Number] 可选
					lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
					lineJoin: 'bevel', //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
					canvasWidth: 1200, //canvas宽高 [Number] 可选
					canvasHeight: 480, //高度  [Number] 可选
					isShowBorder: true, //是否显示边框 [可选]
					bgColor: '#ebebeb', //背景色 [String] 可选
					borderWidth: 2, // 网格线宽度  [Number] 可选
					borderColor: "#7c7c7c", //网格颜色  [String] 可选
					writeWidth: 5, //基础轨迹宽度  [Number] 可选
					writeColor: '#000', // 轨迹颜色  [String] 可选
					isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
					imgType: 'png' //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
				}
			}
		},
		created() {
			this.initBgImg()
		},
		methods: {
			// 移入
			mouseOver() {
				this.$refs.canvasTools.style.display = 'flex'
			},
			// 移出
			mouseLeave() {
				this.$refs.canvasTools.style.display = 'none'
			},
			onChangeWriteColor(val) {
				this.options.writeColor = val
			},
			
			addText(){
				this.addTextModal = true
			},
			
			doAddText(){
				this.$refs.SignCanvas.doAddText(this.addTextVal);
				this.addTextModal = false
			},

			onSelectWriteColor(val) {
				console.log(val)
				this.options.writeColor = val
				this.activeColor = val
			},

			onChangeBgColor(val) {
				this.options.bgColor = val
			},

			onSelectWriteWidth(val) {
				console.log(val)
				this.options.writeWidth = val
				this.activeDot = val
			},

			closeModal() {
				this.$emit('onCloseModal')
			},
			/**
			 * 清除画板
			 */
			canvasClear() {
				this.$refs.SignCanvas.canvasClear();
				this.initBgImg()
			},

			initBgImg() {
				if (this.bgImg) {
					this.$nextTick(() => {
						var img = new Image()
						img.setAttribute('crossOrigin', 'anonymous');
						img.src = this.bgImg
						img.onload = () => {
							let renderWidth = img.width > 1200 ? 1200 : img.width
							let renderHeight = renderWidth * (img.height / img.width)
							this.options.canvasWidth = renderWidth
							this.options.canvasHeight = renderHeight
							setTimeout(() => {
								this.$refs.SignCanvas.context.drawImage(img, 0, 0, img.width, img.height, 0, 0, renderWidth, renderHeight);
							}, 10)
						}
					})
				}
			},

			/**
			 * 下载图片
			 */
			async downloadSignImg() {
				const img = await this.$refs.SignCanvas.saveAsImg();
				this.$emit('onSaveCanvas', img)
			},

		},
		mounted() {
			this.activeColor = this.writeColor || 'black'
			/* 如果有传背景图片 则接收后绘制作为Canvas的背景 */

		},
		watch: {
			writeColor: {
				handler(n, o) {
					this.onSelectWriteColor(n)
				},
				immediate: true
			},
			hideBorder:{
				handler(n, o) {
					if(n){
						this.options.borderWidth = 0
						this.options.borderColor = 'transparent'
					}
				},
				immediate: true
			}
		}
	}
</script>
<style lang="less" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	#baseCanvas {
		position: relative;
	}

	.sign-canvas {
		display: block;
		margin: 0 auto;
	}

	.canvas-tools {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
		display: none;
		background-color: #696969;
		border-radius: 15px 15px 0 0;

		&-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;
			padding: 10px 20px;
			font-size: 10px;
			cursor: pointer;

			&:hover {
				background-color: rgba(255, 255, 255, .6);
				color: #000;
			}

			.ivu-icon {
				font-size: 20px;
				margin-bottom: 5px;
			}

			.ivu-poptip-title {
				display: none;
			}

			.widthDotBox {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}

			.widthDot {
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #827a7a;
				position: relative;


				&2 {
					width: 15px;
					height: 15px;
				}

				&3 {
					width: 20px;
					height: 20px;
				}

				&4 {
					width: 25px;
					height: 25px;
				}

				&5 {
					width: 5px;
					height: 5px;
				}
			}

			.color-item {
				display: inline-block;
				width: 30px;
				height: 20px;
				background: #827a7a;
				position: relative;
				border-radius: 5px;
				border: 2px solid transparent;

				&-black {
					background-color: #000;
				}

				&-red {
					background-color: #ff0000;
				}

				&-blue {
					background-color: blue;
				}
			}
		}

		.flex-center {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
</style>
