<template>
	<div v-if="show">
		<el-row :gutter="20">
			<el-col :span="24">
				<canvas
					ref="canvas"
					class="drawing-canvas"
					@mousedown="handleMouseDown"
					@mousemove="handleMouseMove"
					@mouseup="handleMouseUp"
					@touchstart="handleTouchStart"
					@touchmove="handleTouchMove"
					@touchend="handleTouchEnd"
				></canvas>

				<canvas
					ref="canvas2"
					class="drawing-canvas"
					v-show="showCanvas2"
					@mousedown="handleMouseDown"
					@mousemove="handleMouseMove"
					@mouseup="handleMouseUp"
					@touchstart="handleTouchStart"
					@touchmove="handleTouchMove"
					@touchend="handleTouchEnd"
				></canvas>

				<!-- <canvas
					ref="canvas3"
					class="drawing-canvas screenshotCanvas"
					v-show="mode==='screenshot'"
					@mousedown="screenshotMouseDown"
					@mousemove="screenshotMouseMove"
					@mouseup="screenshotMouseUp"
					@touchstart="screenshotTouchStart"
					@touchmove="screenshotTouchMove"
					@touchend="screenshotTouchEnd"
				></canvas>

				<div class="screenshotBox" v-show="showCanvas4">
					<canvas ref="canvas4" :style="`position:absolute;left:${startX}px;top:${startY}px`">

					</canvas>
				</div> -->
			</el-col>
		</el-row>
		<el-row
			:gutter="20"
			class="toolbar"
			:style="`${showTool ? '' : 'display:none'}`"
		>
			<el-col :span="24" class="toolbar-container">
				<div class="brushBtn">
					<!-- <el-button
						@click="setMode('draw')"
						icon="el-icon-edit"
						:class="{ active: mode === 'draw' }"
						>画笔</el-button
					> -->
					<el-tooltip
						class="item"
						effect="light"
						content="画笔"
						placement="top"
					>
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							:style="
								mode === 'draw' && canDraw
									? `background-color:${brushColor}`
									: ''
							"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="setMode('draw')"
						>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M12 6.75C12.2508 6.75 12.4849 6.87533 12.624 7.08397L15.624 11.584C15.7062 11.7072 15.75 11.8519 15.75 12V21C15.75 21.4142 15.4142 21.75 15 21.75C14.5858 21.75 14.25 21.4142 14.25 21V12.75H9.75V21C9.75 21.4142 9.41421 21.75 9 21.75C8.58579 21.75 8.25 21.4142 8.25 21V12C8.25 11.8519 8.29383 11.7072 8.37596 11.584L11.376 7.08397C11.5151 6.87533 11.7492 6.75 12 6.75ZM10.4014 11.25H13.5986L12 8.85208L10.4014 11.25Z"
								:fill="
									mode === 'draw' && canDraw
										? brushColor === '#FFFFFF'
											? 'black'
											: '#fff'
										: '#3681FC'
								"
							/>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5Z"
								:fill="
									mode === 'draw' && canDraw
										? brushColor === '#FFFFFF'
											? 'black'
											: '#fff'
										: 'black'
								"
								fill-opacity="0.9"
							/>
						</svg>
					</el-tooltip>

					<el-tooltip
						class="item"
						effect="light"
						content="切换颜色与大小"
						placement="top"
					>
						<el-button
							class="selectBox"
							@click.stop="changeOpenBrushColorBox(!openBrushColorBox)"
							:icon="
								openBrushColorBox ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
							"
						></el-button>
					</el-tooltip>
					<div class="brushBtn_colorBox" v-if="openBrushColorBox"  v-click-outside="handleBlur">
						<div class="bb_cb_drawSize">
							<div>大小</div>
							<el-slider v-model="drawSize" :min="1" :max="20"></el-slider>
							<div>颜色</div>
						</div>
						<div class="bb_cb_drawColor">
							
							<span
							v-for="(item, index) in colorList"
							:key="index"
							:style="`background-color: ${item};${
								item === '#FFFFFF' ? 'border:solid 2px #E2E1E5' : ''
							}`"
							@click="setColor(item)"
						></span>
						</div>
						
					</div>
				</div>
				<!-- <div>
					<el-color-picker
						v-model="brushColor"
						@active-change="setColor"
					></el-color-picker>
				</div> -->
<!-- 
				<div>
					<el-slider v-model="drawSize" :min="1" :max="20" style="width: 100px;"></el-slider>
				</div> -->

				<div class="shape">
					<div
						:class="[
							['line', 'circle', 'arrow', 'rect'].includes(shape) && canShape
								? 'shapeActive'
								: '',
						]"
						@click.stop="setShape('open')"
					>
						<svg
							v-if="shape === 'line'"
							t="1723428738446"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="5383"
							width="200"
							height="200"
							fill="black"
						>
							<path
								d="M195.584 866.816l-38.4-38.4c-12.288-12.288-12.288-31.744 0-43.52L784.384 157.184c12.288-12.288 31.744-12.288 43.52 0l38.4 38.4c12.288 12.288 12.288 31.744 0 43.52L239.104 866.816c-11.776 12.288-31.232 12.288-43.52 0z"
								p-id="5384"
							></path>
						</svg>
						<svg
							v-else-if="shape === 'circle'"
							t="1723428969048"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="6395"
							width="200"
							height="200"
							fill="black"
						>
							<path
								d="M512 928C282.624 928 96 741.376 96 512S282.624 96 512 96s416 186.624 416 416-186.624 416-416 416z m0-768C317.92 160 160 317.92 160 512s157.92 352 352 352 352-157.92 352-352S706.08 160 512 160z"
								p-id="6396"
							></path>
						</svg>
						<svg
							v-else-if="shape === 'arrow'"
							t="1723429061277"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="7359"
							width="200"
							height="200"
						>
							<path
								d="M708.864 343.872l4.48 3.84 146.112 146.176a25.6 25.6 0 0 1 0 36.224l-146.112 146.112a40 40 0 0 1-60.416-52.032l3.84-4.48 67.584-67.712H168a40 40 0 1 1 0-80h556.48l-67.712-67.648a40 40 0 0 1-3.84-52.096l3.84-4.48a40 40 0 0 1 52.096-3.84z"
								p-id="7360"
							></path>
						</svg>
						<svg
							v-else
							t="1723428698910"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="4240"
							width="200"
							height="200"
							fill="black"
						>
							<path
								d="M864 896H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h704a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32zM192 832h640V192H192v640z"
								p-id="4241"
							></path>
						</svg>
					</div>
					<el-tooltip
						class="item"
						effect="light"
						content="切换形状"
						placement="top"
					>
						<el-button
							class="selectBox"
							@click.stop="changeOpenShape(!openShapeBox)"
							:icon="openShapeBox ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
						></el-button>
					</el-tooltip>
					<div class="shapeBox" v-if="openShapeBox" v-click-outside="handleBlur">
						<div
							class="shapeItem"
							:class="{ shapeItemActive: shape === 'line' }"
							@click.stop="setShape('line')"
						>
							<svg
								t="1723428738446"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="5383"
								width="200"
								height="200"
								fill="black"
							>
								<path
									d="M195.584 866.816l-38.4-38.4c-12.288-12.288-12.288-31.744 0-43.52L784.384 157.184c12.288-12.288 31.744-12.288 43.52 0l38.4 38.4c12.288 12.288 12.288 31.744 0 43.52L239.104 866.816c-11.776 12.288-31.232 12.288-43.52 0z"
									p-id="5384"
								></path>
							</svg>
							<span>直线</span>
						</div>
						<div
							class="shapeItem"
							:class="{ shapeItemActive: shape === 'circle' }"
							@click.stop="setShape('circle')"
						>
							<svg
								t="1723428969048"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="6395"
								width="200"
								height="200"
								fill="black"
							>
								<path
									d="M512 928C282.624 928 96 741.376 96 512S282.624 96 512 96s416 186.624 416 416-186.624 416-416 416z m0-768C317.92 160 160 317.92 160 512s157.92 352 352 352 352-157.92 352-352S706.08 160 512 160z"
									p-id="6396"
								></path>
							</svg>
							<span>圆形</span>
						</div>
						<div
							class="shapeItem"
							:class="{ shapeItemActive: shape === 'arrow' }"
							@click.stop="setShape('arrow')"
						>
							<svg
								t="1723429061277"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="7359"
								width="200"
								height="200"
							>
								<path
									d="M708.864 343.872l4.48 3.84 146.112 146.176a25.6 25.6 0 0 1 0 36.224l-146.112 146.112a40 40 0 0 1-60.416-52.032l3.84-4.48 67.584-67.712H168a40 40 0 1 1 0-80h556.48l-67.712-67.648a40 40 0 0 1-3.84-52.096l3.84-4.48a40 40 0 0 1 52.096-3.84z"
									p-id="7360"
								></path>
							</svg>
							<span>箭头</span>
						</div>
						<div
							class="shapeItem"
							:class="{ shapeItemActive: shape === 'rect' }"
							@click.stop="setShape('rect')"
						>
							<svg
								t="1723428698910"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="4240"
								width="200"
								height="200"
								fill="black"
							>
								<path
									d="M864 896H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h704a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32zM192 832h640V192H192v640z"
									p-id="4241"
								></path>
							</svg>
							<span>矩形</span>
						</div>
					</div>
					<!-- <div class="brushBtn_colorBox" v-if="openShapeBox">
						<span
							v-for="(item, index) in colorList"
							:key="index"
							:style="`background-color: ${item};${
								item === '#FFFFFF' ? 'border:solid 2px #E2E1E5' : ''
							}`"
							@click="setShapeColor(item)"
						></span>
						<div class="bb_cb_drawSize">
							<el-slider v-model="shapeSize" :min="1" :max="20"></el-slider>
						</div>
					</div> -->
				</div>

				<div class="eraserBtn">
					<el-tooltip
						class="item"
						effect="light"
						content="橡皮擦"
						placement="top"
					>
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							:class="{ eraserBtnActive: mode === 'erase' && canDraw }"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="setMode('erase')"
						>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M13.6464 6.14645C13.8417 5.95118 14.1583 5.95118 14.3536 6.14645L17.8536 9.64645C18.0488 9.84171 18.0488 10.1583 17.8536 10.3536L11.2071 17H17.5V18H10C9.86739 18 9.74021 17.9473 9.64645 17.8536L6.14645 14.3536C5.95118 14.1583 5.95118 13.8417 6.14645 13.6464L13.6464 6.14645ZM10 16.7929L7.20711 14L9 12.2071L11.7929 15L10 16.7929ZM12.5 14.2929L16.7929 10L14 7.20711L9.70711 11.5L12.5 14.2929Z"
								:fill="mode === 'erase' && canDraw ? '#fff' : 'black'"
								fill-opacity="0.9"
							/>
						</svg>
						
					</el-tooltip>
					<el-tooltip
						class="item"
						effect="light"
						content="选择大小"
						placement="top"
					>
						<el-button
							class="selectBox"
							@click.stop="changeOpenEraser(!openEraserBox)"
							:icon="openEraserBox ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
						></el-button>
					</el-tooltip>
					<div class="eb_changeSize" v-if="openEraserBox"  v-click-outside="handleBlur">
						<el-slider v-model="eraserSize" :min="5" :max="30" style="width: 150px;"></el-slider>
					</div>
				</div>

				<!-- <el-button
						@click="screenshot()"
						icon="el-icon-connection"
						:class="{ active: mode === 'screenshot' }"
						>截图</el-button
					> -->

				<!-- <el-button @click="setMode('line')" :class="{ active: mode === 'line' }"
          >直线</el-button
        >
        <el-button @click="setMode('rect')" :class="{ active: mode === 'rect' }"
          >矩形</el-button
        >
        <el-button
          @click="setMode('circle')"
          :class="{ active: mode === 'circle' }"
          >圆圈</el-button
        >

        <el-button
          @click="setMode('arrow')"
          :class="{ active: mode === 'arrow' }"
          >箭头</el-button
        > -->
				<div class="clearScreenBtn">
					<!-- <el-button @click="clearCanvas" icon="el-icon-refresh-left"
						>清空画布</el-button
					> -->
					<el-tooltip
						class="item"
						effect="light"
						content="清空"
						placement="top"
					>
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="clearCanvas"
						>
							<path
								d="M12.7622 15.8897C12.6906 16.186 12.327 16.8335 11.7485 17.7059C11.9071 17.7442 12.0584 17.7873 12.2123 17.8164C12.4925 17.8695 12.775 17.9108 13.0552 17.9642C13.147 17.9818 13.1937 17.9469 13.2428 17.8711C13.8067 16.9985 14.2612 16.0662 14.6425 15.0947C14.7917 14.7147 14.9193 14.3252 15.0568 13.9401C15.0706 13.901 15.0844 13.8619 15.101 13.8148C15.4032 13.9233 15.6984 14.0292 16.0076 14.1401C15.9522 14.309 15.9021 14.4686 15.8476 14.6265C15.3838 15.9675 14.806 17.25 14.0368 18.4337C13.9729 18.532 13.9007 18.6244 13.8375 18.7233C13.6927 18.9501 13.4901 19.0203 13.236 18.9951C12.2568 18.8983 11.308 18.6663 10.3886 18.3061C8.71606 17.6508 7.27596 16.648 6.13465 15.2025C5.9979 15.0293 5.95862 14.8374 6.04787 14.634C6.13399 14.4379 6.29961 14.3488 6.50182 14.346C7.37097 14.334 8.20886 14.1527 9.019 13.834C9.75205 13.5455 10.42 13.1461 10.9342 12.5139C11.0831 12.3307 11.2047 12.1233 11.3453 11.9175L12.1832 12.4089C12.0277 12.6431 11.8895 12.8771 11.7268 13.0911C11.3292 13.6144 10.8276 14.0121 10.2707 14.3343C9.43156 14.8197 8.52561 15.0995 7.58204 15.2585C7.56342 15.2616 7.545 15.2656 7.49965 15.2746C7.63454 15.4033 7.74824 15.5234 7.87332 15.6288C8.10763 15.8262 8.34592 16.019 8.58921 16.2041C8.63666 16.2403 8.71971 16.2556 8.77787 16.2419C9.26162 16.1281 9.70587 15.9268 10.0783 15.5679C10.0462 15.744 9.74006 16.192 9.3107 16.6905C9.58042 16.8303 9.85304 16.9528 10.107 17.1082C10.4358 17.3093 10.7502 17.2546 11.0731 17.1093C11.6185 16.864 12.0858 16.4972 12.5333 16.0991C12.6058 16.0345 12.6767 15.968 12.7622 15.8897ZM16.2967 13.3014C14.7658 12.5925 13.2459 11.8889 11.7148 11.18C11.8414 10.8741 12.04 10.6413 12.3083 10.4766C12.7564 10.2015 13.2256 10.1707 13.702 10.3865C14.3139 10.6636 14.925 10.9432 15.5305 11.235C16.2423 11.578 16.5769 12.3494 16.3604 13.1153C16.3436 13.1748 16.3204 13.2326 16.2967 13.3014ZM15.6169 10.5242C15.1348 10.3007 14.6589 10.0803 14.1831 9.85909C14.1731 9.85439 14.1659 9.84304 14.1522 9.82989C14.1699 9.79241 14.1866 9.75481 14.2053 9.71826C14.8011 8.55524 15.3972 7.39231 15.9933 6.22935C16.093 6.03469 16.2093 5.97585 16.424 6.0085C16.6213 6.03839 16.7885 6.12638 16.9169 6.28695C17.0015 6.39268 17.0224 6.50787 16.9755 6.64248C16.5306 7.91644 16.0885 9.19145 15.6454 10.466C15.64 10.4817 15.631 10.496 15.6169 10.5242V10.5242Z"
								fill="black"
							/>
						</svg>
					</el-tooltip>
				</div>
				<div class="cancelBtn">
					<el-tooltip
						class="item"
						effect="light"
						content="上一步"
						placement="top"
					>
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="undo"
						>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M11 6.61328L6 9.50003L11 12.3868V10H14.5C16.1569 10 17.5 11.3432 17.5 13C17.5 14.6569 16.1569 16 14.5 16H6C5.72386 16 5.5 16.2239 5.5 16.5C5.5 16.7762 5.72386 17 6 17H14.5C16.7091 17 18.5 15.2092 18.5 13C18.5 10.7909 16.7091 9.00003 14.5 9.00003H11V6.61328Z"
								fill="black"
								fill-opacity="0.9"
							/>
						</svg>
					</el-tooltip>

					<!-- <el-button-group style="display: flex">
						<el-button @click="undo" icon="el-icon-arrow-left"
							>上一步</el-button
						>
						<el-button @click="redo"
							>下一步<i class="el-icon-arrow-right el-icon--right"></i
						></el-button>
					</el-button-group> -->
				</div>

				<div class="cancelBtn">
					<el-tooltip
						class="item"
						effect="light"
						content="下一步"
						placement="top"
					>
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="redo"
						>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M13 6.61328L18 9.50003L13 12.3868V10H9.5C7.84315 10 6.5 11.3432 6.5 13C6.5 14.6569 7.84315 16 9.5 16H18C18.2761 16 18.5 16.2239 18.5 16.5C18.5 16.7762 18.2761 17 18 17H9.5C7.29086 17 5.5 15.2092 5.5 13C5.5 10.7909 7.29086 9.00003 9.5 9.00003H13V6.61328Z"
								fill="black"
								fill-opacity="0.9"
							/>
						</svg>
					</el-tooltip>
				</div>
				<!-- <div>
					<el-button @click="downloadCanvas" icon="el-icon-download"
						>下载</el-button
					>
				</div> -->

				<div class="closeBtn">
					<el-tooltip
						class="item"
						effect="light"
						content="结束绘画"
						placement="top"
					>
						<svg
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click.stop="close()"
						>
							<circle cx="12" cy="12" r="10" fill="#EE3E3E" />
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M9.1439 7.6929C9.29275 7.89983 9.24568 8.18824 9.03876 8.33709C7.75653 9.25949 6.92308 10.7631 6.92308 12.4615C6.92308 15.2654 9.19609 17.5384 12 17.5384C14.8039 17.5384 17.0769 15.2654 17.0769 12.4615C17.0769 10.7631 16.2435 9.25949 14.9612 8.33709C14.7543 8.18824 14.7073 7.89983 14.8561 7.6929C15.005 7.48598 15.2934 7.43891 15.5003 7.58776C17.0133 8.67615 18 10.4536 18 12.4615C18 15.7752 15.3137 18.4615 12 18.4615C8.68629 18.4615 6 15.7752 6 12.4615C6 10.4536 6.98673 8.67615 8.49971 7.58776C8.70663 7.43891 8.99504 7.48598 9.1439 7.6929Z"
								fill="white"
								fill-opacity="0.9"
							/>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M12 5.53845C12.2549 5.53845 12.4615 5.74509 12.4615 5.99999V11.5385C12.4615 11.7934 12.2549 12 12 12C11.7451 12 11.5385 11.7934 11.5385 11.5385V5.99999C11.5385 5.74509 11.7451 5.53845 12 5.53845Z"
								fill="white"
								fill-opacity="0.9"
							/>
						</svg>
					</el-tooltip>

					<!-- <el-button @click.stop="close()">退出绘画</el-button> -->
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import html2canvas from "html2canvas";
import "element-ui/lib/theme-chalk/index.css";
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function (event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event);
      }
    };
    // 在文档上添加点击事件监听器
    document.addEventListener("mousedown", el.clickOutsideEvent);
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener("mousedown", el.clickOutsideEvent);
  },
};
export default {
	emits: ["close"],
	directives: {
    "click-outside": clickOutside, // 注册自定义指令
  },
	data() {
		return {
			show: false,
			showTool: false,
			canvas: null,
			showCanvas2: false,
			showCanvas3: false,
			showCanvas4: false,
			canvas2: null,
			ctx2: null,
			// canvas3: null,
			// ctx3: null,
			// canvas4:null,
			// ctx4:null,
			ctx: null,
			brushColor: "#000000",
			shapeColor:"#000000",
			drawSize: 5,
			shapeSize:5,
			eraserSize:5,
			mode: "draw",
			canDraw: true,
			canShape: false,
			shape: "rect",
			history: [],
			historyStep: -1,
			startX: 0,
			startY: 0,
			isDrawing: false,
			tempShape: null,
			tempCtx: null,
			openBrushColorBox: false,
			openShapeBox: false,
			openEraserBox:false,
			colorList: [
				"#000000",
				"#E2E1E5",
				"#FFFFFF",
				"#E11E1E",
				"#FA6402",
				"#F8B501",
				"#58C215",
				"#17CCA4",
				"#0290FB",
				"#6235FF",
			],
		};
	},
	mounted() {
		// this.initCanvas();
		// this.open();
	},
	methods: {
		open() {
			this.show = true;
			this.showTool = true;
			this.mode = "draw";
			this.history = [];
			this.historyStep = -1;
			this.startX = 0;
			this.startY = 0;
			this.isDrawing = false;
			this.tempShape = null;
			this.tempCtx = null;
			this.$nextTick(() => {
				document.body.style.overflow = "hidden"; //禁止页面滚动
				this.initCanvas();
			});
			this.$emit("changeStatus", true);
		},
		close() {
			this.show = false;
			this.showTool = false;
			this.mode = "draw";
			this.history = [];
			this.historyStep = -1;
			this.startX = 0;
			this.startY = 0;
			this.isDrawing = false;
			this.tempShape = null;
			this.tempCtx = null;
			document.body.style.overflow = "auto"; //允许页面滚动
			this.$emit("changeStatus", false);
			this.$emit("close");
		},
		initCanvas() {
			this.canvas = this.$refs.canvas;
			this.canvas2 = this.$refs.canvas2;
			// this.canvas3 = this.$refs.canvas3;
			// this.canvas4 = this.$refs.canvas4;

			this.ctx = this.canvas.getContext("2d");
			this.ctx2 = this.canvas2.getContext("2d");
			// this.ctx3 = this.canvas3.getContext("2d");
			// this.ctx4 = this.canvas4.getContext("2d");

			this.canvas.width = window.innerWidth;
			this.canvas.height = window.innerHeight;

			this.canvas2.width = window.innerWidth;
			this.canvas2.height = window.innerHeight;

			// this.canvas3.width = window.innerWidth;
			// this.canvas3.height = window.innerHeight;

			// this.canvas4.width = window.innerWidth;
			// this.canvas4.height = window.innerHeight;
			this.saveState();
		},
		setMode(mode,type=true) {
			this.openBrushColorBox = false;
			this.openShapeBox = false;
			this.openEraserBox = false;
			if (this.mode == mode && this.canDraw && type) return (this.canDraw = false);
			this.canDraw = true;
			this.mode = mode;
			this.canShape = false;
			
			// this.mode = mode;
			// this.openShapeBox = false;
			// if(this.mode==="screenshot"){
			// 	this.ctx3.fillStyle = '#00000044';
			// 	this.ctx3.fillRect(0, 0, this.canvas3.width, this.canvas3.height);
			// }
		},
		setShape(shape) {
			this.openBrushColorBox = false;
			this.openShapeBox = false;
			this.openEraserBox = false;
			if (this.shape == shape && this.canShape) return (this.canShape = false);
			if (shape === "open") {
				if (this.canShape) this.canShape = false;
				else this.canShape = true;
				return (this.canDraw = false);
			}

			
			this.canShape = true;
			this.shape = shape;
			this.canDraw = false;
			
		},
		setShapeColor(newColor){
			this.shapeColor = newColor;
			this.openShapeColorBox = false;
		},
		changeOpenShape(newValue) {
			this.openShapeBox = newValue;
		},
		changeOpenEraser(newValue){
			this.openEraserBox = newValue
		},
		clearCanvas() {
			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
			this.saveState();
		},
		downloadCanvas() {
			return;
			const canvas = this.$refs.canvas;
			this.showTool = false;
			// console.log(window.scrollX)
			// console.log(window.scrollY)
			// console.log(window.innerWidth)
			// console.log(window.innerHeight)
			// console.log(window.document.documentElement.clientWidth)
			// console.log(window.document.documentElement.clientHeight)
			// return;
			this.$nextTick(() => {
				html2canvas(document.body, {
					x: window.scrollX,
					y: window.scrollY,
					width: window.innerWidth,
					height: window.innerHeight,
					windowWidth: document.documentElement.clientWidth,
					windowHeight: document.documentElement.clientHeight,
					scrollX: 0,
					scrollY: 0,
				}).then((capturedCanvas) => {
					const ctx = capturedCanvas.getContext("2d");
					ctx.drawImage(canvas, 0, 0);

					const link = document.createElement("a");
					link.href = capturedCanvas.toDataURL("image/png");
					link.download = "canvas-drawing.png";
					link.click();
					this.showTool = true;
				});
			});
		},
		undo() {
			if (this.historyStep > 0) {
				this.historyStep--;
				this.restoreState();
			}
		},
		redo() {
			if (this.historyStep < this.history.length - 1) {
				this.historyStep++;
				this.restoreState();
			}
		},
		saveState() {
			this.history = this.history.slice(0, this.historyStep + 1);
			this.history.push(this.canvas.toDataURL());
			this.historyStep++;
		},
		restoreState() {
			const img = new Image();
			img.src = this.history[this.historyStep];
			img.onload = () => {
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				this.ctx.drawImage(img, 0, 0);
			};
		},
		handleBlur(){
			this.openEraserBox = false;
			this.openShapeBox = false;
			this.openBrushColorBox = false;
		},
		handleMouseDown(event) {
			if (["erase", "draw"].includes(this.mode) && this.canDraw) {
				this.ctx.strokeStyle =
					this.mode === "erase" ? "white" : this.brushColor;
				this.ctx.lineWidth = this.mode=='draw'?this.drawSize:this.eraserSize;
				this.ctx.lineCap = "round";
				this.ctx.lineJoin = "round";
				this.isDrawing = true;
				this.ctx.beginPath();
				const rect = this.canvas.getBoundingClientRect();
				this.startX = event.clientX - rect.left;
				this.startY = event.clientY - rect.top;
				this.ctx.moveTo(this.startX, this.startY);
			} else if (
				["line", "rect", "circle", "arrow"].includes(this.shape) &&
				this.canShape
			) {
				this.showCanvas2 = true;
				// this.ctx2.strokeStyle = this.brushColor;
				this.ctx2.strokeStyle = "#000000";

				// this.ctx2.lineWidth = this.drawSize;
				this.ctx2.lineWidth = 5;

				// this.ctx2.fillStyle = this.brushColor;
				this.ctx2.fillStyle = "#000000";
				this.isDrawing = true;
				const rect = this.canvas2.getBoundingClientRect();
				this.startX = event.clientX - rect.left;
				this.startY = event.clientY - rect.top;
			}
		},
		handleMouseMove(event) {
			if (!this.isDrawing) return;

			const rect = this.canvas.getBoundingClientRect();
			const x = event.clientX - rect.left;
			const y = event.clientY - rect.top;

			if (this.mode === "draw" && this.canDraw) {
				this.ctx.lineTo(x, y);
				this.ctx.stroke();
			} else if (this.mode === "erase" && this.canDraw) {
				this.ctx.beginPath();
				this.ctx.clearRect(
					x - this.eraserSize / 2,
					y - this.eraserSize / 2,
					this.eraserSize * 3,
					this.eraserSize * 3
				);
			} else if (this.showCanvas2) {
				// 清除临时画布上的内容
				this.ctx2.clearRect(0, 0, this.canvas2.width, this.canvas2.height);

				if (this.shape === "line" && this.canShape) {
					this.ctx2.beginPath();
					this.ctx2.moveTo(this.startX, this.startY);
					this.ctx2.lineTo(x, y);
					this.ctx2.stroke();
				} else if (this.shape === "rect" && this.canShape) {
					this.ctx2.strokeRect(
						this.startX,
						this.startY,
						x - this.startX,
						y - this.startY
					);
				} else if (this.shape === "circle" && this.canShape) {
					const radius = Math.sqrt(
						Math.pow(x - this.startX, 2) + Math.pow(y - this.startY, 2)
					);
					this.ctx2.beginPath();
					this.ctx2.arc(this.startX, this.startY, radius, 0, Math.PI * 2);
					this.ctx2.stroke();
				} else if (this.shape === "arrow" && this.canShape) {
					// 计算箭头的角度
					const headlen = 5 * 5; // 箭头的长度
					const angle = Math.atan2(y - this.startY, x - this.startX);

					// 画箭头的主线
					this.ctx2.beginPath();
					this.ctx2.moveTo(this.startX, this.startY);
					this.ctx2.lineTo(x, y);
					this.ctx2.stroke();

					// 画箭头的两条边
					this.ctx2.moveTo(x - 1, y);
					this.ctx2.lineTo(
						x - headlen * Math.cos(angle - Math.PI / 6),
						y - headlen * Math.sin(angle - Math.PI / 6)
					);
					this.ctx2.moveTo(x + 1, y);
					this.ctx2.lineTo(
						x - headlen * Math.cos(angle + Math.PI / 6),
						y - headlen * Math.sin(angle + Math.PI / 6)
					);
					this.ctx2.stroke();
				}
			}
		},
		drawPreviewSize(x, y) {
			if (this.mode === "draw" || this.mode === "erase") {
				const previewSize = this.mode === "draw" ? this.brushSize : 20; // 设置橡皮擦的大小
				const previewColor = this.mode === "draw" ? this.brushColor : "#FFFFFF"; // 设置橡皮擦的颜色

				this.previewX = x;
				this.previewY = y;

				this.ctx.save();
				this.ctx.strokeStyle = previewColor;
				this.ctx.lineWidth = previewSize;
				this.ctx.beginPath();
				this.ctx.arc(x, y, previewSize / 2, 0, Math.PI * 2);
				this.ctx.stroke();
				this.ctx.restore();
			}
		},
		clearPreview() {
			this.ctx.clearRect(this.previewX - 12, this.previewY - 12, 25, 25); // 清除预览的区域
		},
		handleMouseUp() {
			if (!this.isDrawing) return;

			this.isDrawing = false;
			this.ctx.closePath();
			if (this.showCanvas2) {
				this.showCanvas2 = false;
				this.ctx.drawImage(this.canvas2, 0, 0);
				this.ctx2.clearRect(0, 0, this.canvas2.width, this.canvas2.height);
				//   // this.tempShape = null;
				//   // this.tempCtx = null;
			}
			this.saveState();
		},
		handleTouchStart(event) {
			event.preventDefault();
			const touch = event.touches[0];
			this.handleMouseDown({
				clientX: touch.clientX,
				clientY: touch.clientY,
			});
		},
		handleTouchMove(event) {
			event.preventDefault();
			const touch = event.touches[0];
			this.handleMouseMove({
				clientX: touch.clientX,
				clientY: touch.clientY,
			});
		},
		handleTouchEnd(event) {
			event.preventDefault();
			this.handleMouseUp();
		},
		setColor(newColor) {
			this.brushColor = newColor;
			this.openBrushColorBox = false;
			this.setMode("draw",false);
		},
		changeOpenBrushColorBox(newValue) {
			this.openBrushColorBox = newValue;
		},
		screenshotMouseDown(e) {
			this.isDrawing = true;
			this.ctx3.fillStyle = "#00000044";
			this.startX = e.clientX;
			this.startY = e.clientY;
		},
		screenshotMouseMove(e) {
			if (!this.isDrawing) return;
			this.ctx3.clearRect(0, 0, this.canvas3.width, this.canvas3.height);
			this.ctx3.fillStyle = "#00000044";
			this.ctx3.fillRect(0, 0, this.canvas3.width, this.canvas3.height);

			const width = e.clientX - this.startX;
			const height = e.clientY - this.startY;

			this.ctx3.globalCompositeOperation = "destination-out";
			this.ctx3.clearRect(this.startX, this.startY, width, height);
			this.ctx3.globalCompositeOperation = "source-over";
		},
		screenshotMouseUp(e) {
			if (!this.isDrawing) return;
			console.log("👇");
			console.log(this.startX, this.startY);
			console.log(e.clientX, e.clientY);
			console.log("👆");
			this.isDrawing = false;
			// 截取指定区域
			const rect = {
				x: Math.min(this.startX, e.clientX),
				y: Math.min(this.startY, e.clientY),
				width: Math.abs(e.clientX - this.startX),
				height: Math.abs(e.clientY - this.startY),
			};
			console.log(rect);
			html2canvas(document.body, {
				x: rect.x,
				y: rect.y,
				width: rect.width,
				height: rect.height,
				windowWidth: document.body.scrollWidth,
				windowHeight: document.body.scrollHeight,
				scale: window.devicePixelRatio,
			}).then((result) => {
				this.mode = "";
				this.showCanvas4 = true;
				this.canvas4.width = rect.width;
				this.canvas4.height = rect.height;
				this.ctx4.drawImage(result, 0, 0, rect.width, rect.height);
				// 移除覆盖的 canvas
			});
		},
		screenshotTouchStart(e) {
			e.preventDefault();
			const touch = e.touches[0];
			this.screenshotMouseDown({
				clientX: touch.clientX,
				clientY: touch.clientY,
			});
		},
		screenshotTouchMove(e) {
			e.preventDefault();
			const touch = e.touches[0];
			this.screenshotMouseMove({
				clientX: touch.clientX,
				clientY: touch.clientY,
			});
		},
		screenshotTouchEnd(e) {
			e.preventDefault();
			this.screenshotMouseUp();
		},
		screenshot(){
				// return console.log(document.clientWidth,document.clientHeight)
				html2canvas(document.body, {
					x: 0,
					y: 0,
					width: document.documentElement.clientWidth,
					height: document.documentElement.clientHeight,
					useCORS:true,
					windowWidth: 0,
					windowHeight: 0,
					scale: window.devicePixelRatio,
				}).then((result) => {
					console.log(result);
					// this.mode = "";
					// this.showCanvas4 = true;
					// this.canvas4.width = result.width/2;
					// this.canvas4.height = result.height/2;
					// this.ctx4.drawImage(
					// 	result,
					// 	0,
					// 	0,
					// 	document.clientWidth,
					// 	document.clientHeight
					// );
					// return
					var imgURL = result.toDataURL({
						format: "image/png",
						quality: 1,
						width: result.width,
						height: result.height,
					});
					var dlLink = document.createElement("a");
					dlLink.download = "fileName";
					dlLink.href = imgURL;
					dlLink.dataset.downloadurl = [
						"png",
						dlLink.download,
						dlLink.href,
					].join(":");
					document.body.appendChild(dlLink);
					dlLink.click();
					document.body.removeChild(dlLink);
					// 移除覆盖的 canvas
				});
				// this.ctx3.fillStyle = '#00000044';
				// this.ctx3.fillRect(0, 0, this.canvas3.width, this.canvas3.height);
		}
	},
	watch: {
		brushColor(newColor) {
			this.ctx.strokeStyle = newColor;
		},
		brushSize(newSize) {
			this.ctx.lineWidth = newSize;
		},
	},
};
</script>

<style scoped>
.drawing-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0);
}

.screenshotBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #00000044;
	z-index: 12;
}

.screenshotCanvas {
	z-index: 11;
}

.toolbar {
	position: fixed;
	bottom: 0;
	left: 50%;
	width: auto;
	background: #ffffff;
	color: white;
	padding: 10px;
	bottom: 3vh;
	border-radius: 8px 8px 0 0;
	box-shadow: 0px 8px 10px -5px #00000014;
	box-shadow: 0px 16px 24px 2px #0000000a;
	box-shadow: 0px 6px 30px 5px #0000000d;
	transform: translateX(-50%);
	max-width: 100vw;
	z-index: 10;
}

.toolbar-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.toolbar-container > div {
	margin: 0 20px;
	width: auto;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.el-button.active {
	background-color: #409eff;
	color: white;
}

.closeBtn > svg {
	width: 45px;
	height: 45px;
	cursor: pointer;
}

.cancelBtn > svg {
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.clearScreenBtn > svg {
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.eraserBtn{
	position: relative;
}

.eraserBtn > svg {
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.brushBtn > svg {
	width: 35px;
	height: 35px;
	cursor: pointer;
	border-radius: 8px;
	box-sizing: border-box;
	padding: 2px;
}

.brushBtn_colorBox {
	width: 250px;
	height: auto;
	background-color: #ffffff;
	position: absolute;
	bottom: 0;
	margin-bottom: 70px;
	padding: 4px, 8px, 4px, 8px;
	box-shadow: 0px 4px 10px 0px #1d398314;
	box-shadow: 1px 1px 20px 4px #1d39830d;
	left: 0;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.bb_cb_drawColor{
	width: 250px;
	height: auto;
	background-color: #ffffff;
	padding: 4px, 8px, 4px, 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.bb_cb_drawColor > span {
	width: 25px;
	height: 25px;
	border-radius: 100%;
	cursor: pointer;
	margin: 10px;
	box-sizing: border-box;
}

.selectBox {
	/* width: 30px;
	height: 30px; */
	display: flex !important;
	justify-content: center;
	align-items: center;
	padding: 5px !important;
	margin-left: 5px;
}

.shape {
	position: relative;
}

.shape > div {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 8px;
}

.shape > div > svg {
	width: 80%;
	height: 80%;
}
.shapeActive {
	background-color: #3681fc;
}

.shapeActive > svg {
	fill: #fff;
}

.shapeBox {
	position: absolute;
	left: 0;
	bottom: calc(100% + 10px);
	width: auto !important;
	height: auto !important;
	background-color: #fff;
	box-shadow: 0px 4px 10px 0px #1d398314;
	box-shadow: 1px 1px 20px 4px #1d39830d;
	border-radius: 6px;
	padding: 8px;
	cursor: default;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.shapeItem {
	width: auto;
	height: auto;
	padding: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 8px;
	color: black;
	margin-bottom: 5px;
}

.shapeItem > span {
	width: 2em;
}

.shapeItem > svg {
	width: 25px;
	height: 25px;
	margin-right: 10px;
}

.shapeItem:hover {
	background-color: #e6e6e6;
	color: black;
}

.shapeItemActive {
	background-color: #3681fc !important;
	color: #fff !important;
	fill: #fff !important;
}

.shapeItemActive > svg {
	fill: #fff !important;
}

.eraserBtnActive {
	background-color: #3681fc !important;
	color: #fff !important;
	fill: #fff !important;
	border-radius: 8px;
}

.bb_cb_drawSize {
	width: 100%;
	box-sizing: border-box;
	padding: 5px 20px;
	color: black;
}

.eb_changeSize{
	position: absolute;
	left: 0;
	bottom: calc(100% + 10px);
	width: auto !important;
	height: auto !important;
	background-color: #fff;
	box-shadow: 0px 4px 10px 0px #1d398314;
	box-shadow: 1px 1px 20px 4px #1d39830d;
	border-radius: 6px;
	padding: 8px 15px 8px 15px;
	cursor: default;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.selectBox{
	border: none;
	background-color: none;
}
</style>
