<template>
	<div id="baseCanvas" @mouseover="mouseOver" @mouseleave="mouseLeave">
		<!-- <BaseCanvas class="sign-canvas" ref="SignCanvas" :options="options"/> -->
		<BaseKonva class="sign-canvas" ref="SignCanvas" :options="options"/>
		<div class="canvas-tools animated fadeIn" ref="canvasTools">
			<span :class="['canvas-tools-item',curMode === 'move' ? 'tools-active' : '']" @click="doMove()" style="border-radius: 15px 0 0 0;">
				<Icon custom="iconfont icon-left-arrow" size="20"/>
				<!-- <span>{{ Object.keys(vm).length ? vm.$t('utils.clear') : $t('utils.clear')  }}</span> -->
				<span>选择</span>
			</span>
			<span :class="['canvas-tools-item',curMode === 'paint' ? 'tools-active' : '']" @click="doPaint()">
				<Poptip trigger="click">
					<div class="flex-center">
						<Icon custom="iconfont icon-brush" size="20"/>
						<span>{{ Object.keys(vm).length ? vm.$t('utils.draw') : $t('utils.draw') }}</span>
					</div>
					<div slot="content" class="textBox">
						 <p class="text-tools-title">{{ Object.keys(vm).length ? vm.$t('utils.width') : $t('utils.width') }} <span style="font-weight: bold;color: #0086E6;margin-left: 15px;font-size: 18px;">{{ options.textSize }}</span> </p>
						 <Slider v-model="options.writeWidth"></Slider>
						 <p class="text-tools-title">{{ Object.keys(vm).length ? vm.$t('utils.color') : $t('utils.color') }}</p>
						 <ColorPicker v-model="options.writeColor" />
					</div>
				</Poptip>
			</span>
			<span :class="['canvas-tools-item',curMode === 'text' ? 'tools-active' : '']" @click="addText()">
				<Poptip trigger="click">
					<div class="flex-center">
						<Icon custom="iconfont icon-text" size="20"/>
						<span>{{ Object.keys(vm).length ? vm.$t('utils.text') : $t('utils.text') }}</span>
					</div>
					<div slot="content" class="textBox">
						 <p class="text-tools-title">{{ Object.keys(vm).length ? vm.$t('utils.fontSize') : $t('utils.fontSize') }} <span style="font-weight: bold;color: #0086E6;margin-left: 15px;font-size: 18px;">{{ options.textSize }}</span> </p>
						 <Slider v-model="options.textSize"></Slider>
						 <p class="text-tools-title">{{ Object.keys(vm).length ? vm.$t('utils.fontColor') : $t('utils.fontColor') }}</p>
						 <ColorPicker v-model="options.textColor" />
					</div>
				</Poptip>
			</span>
			<span class="canvas-tools-item" @click="canvasClear()">
				<Icon custom="iconfont icon-clear" size="20"/>
				<span>{{ Object.keys(vm).length ? vm.$t('utils.clear') : $t('utils.clear')  }}</span>
			</span>
			<span class="canvas-tools-item" @click="undo()">
				<Icon custom="iconfont icon-undo" size="20"/>
				<span>{{ Object.keys(vm).length ? vm.$t('utils.undo') : $t('utils.undo') }}</span>
			</span>
			<span class="canvas-tools-item" @click="closeModal()">
				<Icon type="md-close" size="20"/>
				<span>{{ Object.keys(vm).length ? vm.$t('utils.close') : $t('utils.close') }}</span>
			</span>
			<span class="canvas-tools-item" @click="downloadSignImg()" style="border-radius:  0 15px 0 0 ;">
				<Icon custom="iconfont icon-save" size="20"/>
				<span>{{ Object.keys(vm).length ? vm.$t('utils.save') : $t('utils.save') }}</span>
			</span>
		</div>
	</div>
</template>
<script>
	import BaseCanvas from './BaseCanvas.vue';
	export default {
		components: {
			BaseCanvas
		},
		props: {
			vm:{
				type:Object,
				default:() => {
					return {}
				}
			},
			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',
				curMode:'paint',
				options: {
					textColor:'red',
					textSize:16,
					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: 'red', // 轨迹颜色  [String] 可选
					isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
					imgType: 'png' //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
				}
			}
		},
		created() {
			this.initBgImg()
			// this.vm = Object.keys(this.vm).length ?  this.vm : this
		},
		methods: {
			// 移入
			mouseOver() {
				// this.$refs.canvasTools.style.display = 'flex'
			},
			// 移出
			mouseLeave() {
				// this.$refs.canvasTools.style.display = 'none'
			},
			onChangeWriteColor(val) {
				this.options.writeColor = val
			},
			
			addText(){
				this.curMode = 'text'
				this.$refs.SignCanvas.isText = true
				this.$refs.SignCanvas.mode = 'text'
			},
			
			doPaint(){
				this.curMode = 'paint'
				this.$refs.SignCanvas.mode = 'paint'
			},
			
			doMove(){
				this.curMode = 'move'
				this.$refs.SignCanvas.mode = 'move'
			},
			
			doAddText(){
				this.$refs.SignCanvas.doAddText(this.addTextVal);
				this.addTextModal = false
			},

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

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

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

			closeModal() {
				this.$emit('onCloseModal')
			},
			
			undo(){
				this.$refs.SignCanvas.doUndo();
				if (this.bgImg) {
					this.$nextTick(() => {
						this.$refs.SignCanvas.doRenderImg(this.bgImg)
					})
				}
			},
			
			/**
			 * 清除画板
			 */
			canvasClear() {
				this.$refs.SignCanvas.canvasClear();
				this.initBgImg()
			},

			initBgImg() {
				if (this.bgImg) {
					this.$nextTick(() => {
						this.$refs.SignCanvas.doRenderImg(this.bgImg)
					})
				}
			},

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

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

		},
		watch: {
			writeColor: {
				handler(n, o) {
					this.onSelectWriteColor(n)
					this.options.writeColor = n || 'black'
				},
				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: flex;
		background-color: #696969;
		border-radius: 15px 15px 0 0;
		
		.tools-active{
			background-color: #2d8cf0;
		}

		&-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: #2d8cf0;
				// 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;
				}
			}
		}
		
		.textBox{
			color: #717171;
			width: 200px;
			
			.text-tools-title{
				margin: 10px 0;
			}
		}

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