<template>
	<view class="contract-sign-container">
		<!-- 顶部操作栏 -->
		<view class="top-actions">
			<view class="clear-btn" @click="clearSignature">
				<text class="clear-text">清除签名</text>
			</view>
		</view>

		<!-- 合同信息 -->
		<view class="contract-info">
			<view class="info-card">
				<text class="contract-name">{{contractName}}</text>
				<text class="sign-tip">请在下方签名区域进行手写签名</text>
			</view>
		</view>

		<!-- 签名区域 -->
		<view class="signature-section">
			<view class="signature-title">
				<text class="title-text">请在此区域签名</text>
				<text class="tip-text">支持手指或触控笔签名</text>
			</view>

			<!-- Canvas 签名板 -->
			<view class="signature-canvas-container">
				<canvas 
					class="signature-canvas" 
					canvas-id="signatureCanvas"
					@touchstart="touchStart"
					@touchmove="touchMove"
					@touchend="touchEnd"
					disable-scroll="true">
				</canvas>
				
				<!-- 签名提示 -->
				<view v-if="!hasSigned" class="signature-placeholder">
					<text class="placeholder-icon">✍️</text>
					<text class="placeholder-text">请在此处签名</text>
				</view>
			</view>

			<!-- 签名工具栏 -->
			<view class="signature-tools">
				<view class="tool-group">
					<text class="tool-label">笔迹颜色：</text>
					<view class="color-picker">
						<view v-for="color in penColors" 
							  :key="color" 
							  class="color-item" 
							  :class="currentColor === color ? 'active' : ''"
							  :style="{ backgroundColor: color }"
							  @click="setPenColor(color)">
						</view>
					</view>
				</view>
				
				<view class="tool-group">
					<text class="tool-label">笔迹粗细：</text>
					<view class="width-picker">
						<view v-for="width in penWidths" 
							  :key="width" 
							  class="width-item" 
							  :class="currentWidth === width ? 'active' : ''"
							  @click="setPenWidth(width)">
							<view class="width-preview" :style="{ width: width + 'rpx', height: width + 'rpx' }"></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 签名预览 -->
		<view v-if="signatureImageUrl" class="preview-section">
			<view class="preview-title">签名预览</view>
			<view class="preview-image-container">
				<image :src="signatureImageUrl" class="preview-image" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="footer-actions">
			<button class="action-btn secondary" @click="previewSignature">预览签名</button>
			<button class="action-btn primary" 
					@click="submitSignature" 
					:disabled="!hasSigned || submitting"
					:loading="submitting">
				{{submitting ? '提交中...' : '确认签订'}}
			</button>
		</view>

		<!-- 签名预览弹窗 -->
		<view v-if="showPreview" class="preview-modal" @click="closePreview">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">签名预览</text>
					<view class="modal-close" @click="closePreview">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="modal-body">
					<image v-if="signatureImageUrl" :src="signatureImageUrl" class="modal-image" mode="aspectFit"></image>
					<text v-else class="no-signature">暂无签名</text>
				</view>
				<view class="modal-footer">
					<button class="modal-btn secondary" @click="closePreview">取消</button>
					<button class="modal-btn primary" @click="confirmSignature">确认签订</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import apiRoute from '@/common/axios.js'
import { uploadFile } from '@/common/util.js';

export default {
	data() {
		return {
			contractId: 0,
			contractName: '',
			canvas: null,
			ctx: null,
			isDrawing: false,
			lastPoint: null,
			hasSigned: false,
			signatureImageUrl: '',
			submitting: false,
			showPreview: false,
			
			// 画笔设置
			currentColor: '#000000',
			currentWidth: 6,
			penColors: ['#000000', '#FF0000', '#0000FF', '#008000', '#800080'],
			penWidths: [3, 6, 9, 12],
			
			// Canvas 尺寸
			canvasWidth: 0,
			canvasHeight: 0,
			pixelRatio: 1
		}
	},
	onLoad(options) {
		if (options.id) {
			this.contractId = parseInt(options.id)
		}
		if (options.contractName) {
			this.contractName = decodeURIComponent(options.contractName)
		}
		
		this.$nextTick(() => {
			this.initCanvas()
		})
	},
	onReady() {
		this.initCanvas()
	},
	methods: {
		// 初始化Canvas
		initCanvas() {
			const query = uni.createSelectorQuery().in(this)
			query.select('.signature-canvas').boundingClientRect((rect) => {
				if (rect) {
					this.canvasWidth = rect.width
					this.canvasHeight = rect.height
					
					// 获取设备像素比
					const systemInfo = uni.getSystemInfoSync()
					this.pixelRatio = systemInfo.pixelRatio || 1
					
					// 创建Canvas上下文
					this.canvas = uni.createCanvasContext('signatureCanvas', this)
					this.ctx = this.canvas
					
					// 设置Canvas尺寸
					this.ctx.scale(this.pixelRatio, this.pixelRatio)
					
					// 设置画笔属性
					this.ctx.lineWidth = this.currentWidth
					this.ctx.strokeStyle = this.currentColor
					this.ctx.lineCap = 'round'
					this.ctx.lineJoin = 'round'
					
					// 清空Canvas
					this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
					this.ctx.draw()
				}
			}).exec()
		},

		// 触摸开始
		touchStart(e) {
			if (!this.ctx) return
			
			this.isDrawing = true
			const touch = e.touches[0]
			this.lastPoint = {
				x: touch.x,
				y: touch.y
			}
			
			this.ctx.beginPath()
			this.ctx.moveTo(touch.x, touch.y)
		},

		// 触摸移动
		touchMove(e) {
			if (!this.ctx || !this.isDrawing) return
			
			const touch = e.touches[0]
			const currentPoint = {
				x: touch.x,
				y: touch.y
			}
			
			this.ctx.lineTo(currentPoint.x, currentPoint.y)
			this.ctx.stroke()
			this.ctx.draw(true)
			
			this.lastPoint = currentPoint
			this.hasSigned = true
		},

		// 触摸结束
		touchEnd(e) {
			this.isDrawing = false
			this.lastPoint = null
		},

		// 设置画笔颜色
		setPenColor(color) {
			this.currentColor = color
			if (this.ctx) {
				this.ctx.strokeStyle = color
			}
		},

		// 设置画笔粗细
		setPenWidth(width) {
			this.currentWidth = width
			if (this.ctx) {
				this.ctx.lineWidth = width
			}
		},

		// 清除签名
		clearSignature() {
			if (this.ctx) {
				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
				this.ctx.draw()
				this.hasSigned = false
				this.signatureImageUrl = ''
			}
		},

		// 预览签名
		previewSignature() {
			if (!this.hasSigned) {
				uni.showToast({
					title: '请先进行签名',
					icon: 'none'
				})
				return
			}
			
			this.generateSignatureImage(() => {
				this.showPreview = true
			})
		},

		// 生成签名图片
		generateSignatureImage(callback) {
			if (!this.canvas) return
			
			uni.canvasToTempFilePath({
				canvasId: 'signatureCanvas',
				success: (res) => {
					this.signatureImageUrl = res.tempFilePath
					if (callback) callback()
				},
				fail: (err) => {
					console.error('生成签名图片失败:', err)
					uni.showToast({
						title: '生成签名失败',
						icon: 'none'
					})
				}
			}, this)
		},

		// 关闭预览
		closePreview() {
			this.showPreview = false
		},

		// 确认签名
		confirmSignature() {
			this.closePreview()
			this.submitSignature()
		},

		// 提交签名
		submitSignature() {
			if (!this.hasSigned) {
				uni.showToast({
					title: '请先进行签名',
					icon: 'none'
				})
				return
			}

			this.generateSignatureImage(() => {
				this.uploadSignature()
			})
		},

		// 上传签名
		async uploadSignature() {
			if (!this.signatureImageUrl) {
				uni.showToast({
					title: '签名生成失败，请重试',
					icon: 'none'
				})
				return
			}

			this.submitting = true

			try {
				// 先上传签名图片
				const uploadResult = await this.uploadSignatureFile()
				
				if (!uploadResult.success) {
					throw new Error(uploadResult.message || '上传签名文件失败')
				}

				// 提交签名信息
				const response = await apiRoute.post('/member/contract_sign', {
					contract_sign_id: this.contractId,
					sign_file: uploadResult.url
				})

				if (response.code === 1) {
					uni.showToast({
						title: '签名提交成功',
						icon: 'success',
						duration: 2000
					})

					setTimeout(() => {
						// 返回到合同详情页面
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				} else {
					throw new Error(response.data.msg || '提交签名失败')
				}
			} catch (error) {
				console.error('提交签名失败:', error)
				uni.showToast({
					title: error.message || '网络错误，请稍后重试',
					icon: 'none'
				})
			} finally {
				this.submitting = false
			}
		},

		// 上传签名文件
		async uploadSignatureFile() {
			return new Promise((resolve, reject) => {
				uploadFile(
					this.signatureImageUrl,
					(fileData) => {
						resolve({ success: true, url: fileData.url });
					},
					(err) => {
						resolve({ success: false, message: '上传失败' });
					}
				);
			});
		},

	}
}
</script>

<style lang="scss" scoped>
.contract-sign-container {
	min-height: 100vh;
	background-color: #1a1a1a;
	padding-bottom: 120rpx;
}

/* 顶部操作栏 */
.top-actions {
	display: flex;
	justify-content: flex-end;
	padding: 20rpx 32rpx;

	.clear-btn {
		padding: 12rpx 24rpx;
		background-color: #29d3b4;
		border-radius: 8rpx;

		.clear-text {
			font-size: 28rpx;
			color: #fff;
		}
	}
}

/* 合同信息 */
.contract-info {
	padding: 20rpx;

	.info-card {
		background-color: #2a2a2a;
		border-radius: 16rpx;
		padding: 32rpx;
		text-align: center;
		border: 1rpx solid #444;

		.contract-name {
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			display: block;
			margin-bottom: 16rpx;
		}

		.sign-tip {
			font-size: 26rpx;
			color: #999;
		}
	}
}

/* 签名区域 */
.signature-section {
	padding: 0 20rpx;
	margin-bottom: 40rpx;

	.signature-title {
		text-align: center;
		margin-bottom: 24rpx;

		.title-text {
			font-size: 30rpx;
			font-weight: 600;
			color: #fff;
			display: block;
			margin-bottom: 8rpx;
		}

		.tip-text {
			font-size: 24rpx;
			color: #999;
		}
	}
}

.signature-canvas-container {
	position: relative;
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 32rpx;
	overflow: hidden;
	border: 2rpx dashed #29d3b4;

	.signature-canvas {
		width: 100%;
		height: 400rpx;
		display: block;
	}

	.signature-placeholder {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		pointer-events: none;

		.placeholder-icon {
			font-size: 60rpx;
			display: block;
			margin-bottom: 16rpx;
		}

		.placeholder-text {
			font-size: 28rpx;
			color: #999;
		}
	}
}

/* 签名工具栏 */
.signature-tools {
	background-color: #2a2a2a;
	border-radius: 16rpx;
	padding: 24rpx;
	border: 1rpx solid #444;

	.tool-group {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.tool-label {
			font-size: 26rpx;
			color: #ccc;
			margin-right: 20rpx;
			min-width: 120rpx;
		}
	}

	.color-picker {
		display: flex;
		gap: 16rpx;

		.color-item {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			border: 3rpx solid transparent;
			cursor: pointer;

			&.active {
				border-color: #29d3b4;
			}
		}
	}

	.width-picker {
		display: flex;
		gap: 20rpx;

		.width-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50rpx;
			height: 50rpx;
			border-radius: 8rpx;
			border: 2rpx solid #e5e5e5;
			cursor: pointer;

			&.active {
				border-color: #29d3b4;
				background-color: rgba(41, 211, 180, 0.1);
			}

			.width-preview {
				background-color: #333;
				border-radius: 50%;
			}
		}
	}
}

/* 签名预览 */
.preview-section {
	padding: 0 20rpx;
	margin-bottom: 40rpx;

	.preview-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #fff;
		text-align: center;
		margin-bottom: 24rpx;
	}

	.preview-image-container {
		background-color: #2a2a2a;
		border-radius: 16rpx;
		padding: 32rpx;
		border: 1rpx solid #444;

		.preview-image {
			width: 100%;
			height: 200rpx;
		}
	}
}

/* 底部操作按钮 */
.footer-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #2a2a2a;
	padding: 24rpx 32rpx;
	border-top: 1rpx solid #444;
	display: flex;
	gap: 24rpx;
	z-index: 100;

	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;

		&.primary {
			background-color: #29d3b4;
			color: #fff;

			&:active:not(:disabled) {
				background-color: #22b39a;
			}

			&:disabled {
				background-color: #666;
				color: #999;
			}
		}

		&.secondary {
			background-color: #444;
			color: #ccc;

			&:active {
				background-color: #555;
			}
		}
	}
}

/* 预览弹窗 */
.preview-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;

	.modal-content {
		background-color: #fff;
		border-radius: 20rpx;
		width: 80%;
		max-height: 70%;
		overflow: hidden;

		.modal-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			border-bottom: 1rpx solid #e5e5e5;

			.modal-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}

			.modal-close {
				width: 48rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.iconfont {
					font-size: 32rpx;
					color: #999;
				}
			}
		}

		.modal-body {
			padding: 32rpx;
			text-align: center;

			.modal-image {
				width: 100%;
				height: 300rpx;
			}

			.no-signature {
				font-size: 28rpx;
				color: #999;
				padding: 60rpx 0;
			}
		}

		.modal-footer {
			display: flex;
			gap: 24rpx;
			padding: 32rpx;
			border-top: 1rpx solid #e5e5e5;

			.modal-btn {
				flex: 1;
				height: 72rpx;
				border-radius: 12rpx;
				font-size: 28rpx;
				font-weight: 600;
				border: none;

				&.primary {
					background-color: #29d3b4;
					color: #fff;
				}

				&.secondary {
					background-color: #f5f5f5;
					color: #666;
				}
			}
		}
	}
}
</style>