<template>
	<view class="autograph-wrap">
		<!-- <view class="handRight">
			<view class="handTitle">手写板</view>
		</view>	
		<view class="handBtn">
			<view class="slide-wrapper">
				<text>选择粗细</text>
				<slider @change="updateValue" value="50" show-value class="slider" step="25" />
			</view>
			<view class="color">
				<text>选择颜色</text>
				<image @click="selectColorEvent('black')" :src="selectColor === 'black' ? require('./img/color_black_selected.png') : require('./img/color_black.png')" :class="selectColor === 'black' ? 'color_select' : ''" class="black-select"></image>
				<image @click="selectColorEvent('red')" :src="selectColor === 'red' ? require('./img/color_red_selected.png') : require('./img/color_red.png') " :class="selectColor === 'red' ? 'color_select' : ''"  class="red-select" ></image>
			</view>
		</view> -->
		<view class="handCenter">
			<canvas class="handWriting" disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove" @touchend="uploadScaleEnd" :id="canvasId" :canvas-id="canvasId"></canvas>
		</view>
		<!-- <view class="showimg">
			<image v-if="showimg" :src="showimg" mode=""></image>
			<text v-else >图片展示</text>
		</view> -->
		<view class="buttons">
			<!-- <button @click="retDraw" class="delBtn">重写</button> -->
			<u-button size="mini" @click="retDraw" class="delBtn">重写</u-button>
			<!-- <button @click="subCanvas" class="subBtn">保存</button> -->
		</view>
	</view>
</template>

<script>
import Handwriting from './js/signature.js'
import { saveImgToAliOss } from '@/libs/tools.js'
export default {
	props: {
		//  签字画布id
		canvasId: {
			type: String,
			default: ''
		},
	},
	data(){
		return{
			lineColor:'black',
			slideValue:50,
			handwriting:'',
			selectColor:'black',
			color:'',
			showimg:'',
			share_popup:false,
			isEmpty: true
		}
	},
	mounted() {
		this.handwriting = new Handwriting({
		  lineColor: this.lineColor,
		  slideValue: this.slideValue, // 0, 25, 50, 75, 100
		  canvasName: this.canvasId,
		})
	},
	methods:{
		// 选择画笔颜色
		selectColorEvent(event) {
			this.selectColor = event
			if(event=='black'){
				this.color= '#1A1A1A'
			}else if(event=='red'){
				this.color= '#ca262a'
			} 
			this.handwriting.selectColorEvent(this.color)
		},
		//  重写
		retDraw() {
			this.handwriting.retDraw()
			this.isEmpty = true
		},
		// 笔迹粗细滑块
		updateValue(e) {
			this.slideValue = e.detail.value
			this.handwriting.selectSlideValue(this.slideValue)
		},
		// 绑定到canvas的touchstart事件
		uploadScaleStart(event){
			this.handwriting.uploadScaleStart(event)
		},
		// 绑定到canvas的touchmove事件
		uploadScaleMove(event){
			this.handwriting.uploadScaleMove(event)
		},
		// 绑定到canvas的uploadScaleEnd事件
		uploadScaleEnd(event){
			this.handwriting.uploadScaleEnd(event)
			this.isEmpty = false
		},
		// 保存  生成图片
		subCanvas(){
			const _this = this
			this.handwriting.saveCanvas().then(res=>{
				this.showimg = res
				console.log(res)
				saveImgToAliOss(res, function(ret) {
					console.log(ret,'-----阿里云')
					_this.$emit('generatePictures', ret)
				})
			}).catch(err=>{
				console.log(err)
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.autograph-wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-content: center;
	flex-direction: column;
	justify-content: center;
	font-size: 28upx;
	.handRight {
		align-items: center;
		.handTitle {
			flex: 1;
			color: #666;
			justify-content: center;
			font-size: 30upx;
		}
	}
	.handBtn {
		flex-direction: column;
		padding: 40upx 20upx;
		.slide-wrapper {
			align-items: center;
			margin-bottom: 20upx;
			.slider{
				width: 400upx;
				padding-left: 20upx;
			}
		}
		.color{
			align-items: center;
			text{
				margin-right: 20upx;
			}
			.black-select, .red-select {
			  width: 60upx;
			  height: 60upx;
			  vertical-align: super;
			}
			.black-select.color_select, .red-select.color_select {
			  width: 90upx;
			  height: 90upx;
			  vertical-align: sub;
			}
		}
	}
	.handCenter {
		border: 4upx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
		width: 90%;
		margin: 0 auto;
		.handWriting {
			background: #fff;
			width: 100%;
			height: 300upx;
		}
	}
	.showimg{
		border: 4upx solid #e9e9e9;
		overflow: hidden;
		width: 90%;
		margin: 0 auto;
		background: #eee;
		height: 350upx;
		margin-top: 40upx;
		align-items: center;
		justify-content: center;
		image{
			width: 100%;
			height: 100%;	
		}
		text{
			font-size: 40upx;
			color: #888;
		}
	}
	.buttons{
		margin: 20upx 5%;
		text-align: right;
		.delBtn {
			color: #666;
		}
		.subBtn {
			background: #008ef6;
			color: #fff;
			text-align: center;
			justify-content: center;
		}
	}
}
.drop {
	width: 50upx;
	height: 50upx;
	border-radius: 50%;
	background: #FFF;
	position: absolute;
	left: 0upx;
	top: -10upx;
	box-shadow: 0px 1px 5px #888888;
}
.slide {
	width: 250upx;
	height: 30upx;
}
</style>
