<template>
	<view class="draw-all">
		<view class="draw-title">
			<view class="draw-title-gun"></view>
			<view class="draw-title-font">转单执行</view>
		</view>
		<view class="draw-contain">
			<view class="downitems-father">
				<view class="downitems-left">
					<view class="downitems-left-mar">
						<image class="downitems-left-img" src="/static/index/teeth.png" />
						<view class="downitems-left-father">
							<image class="downitems-father-img" src="/static/index/helpdo/zero.png" />
							<view class="downitems-father-font">清洁照料</view>
						</view>
						<view class="downitems-left-father">
							<image class="downitems-father-img" src="/static/index/helpdo/one.png" />
							<view class="downitems-father-font">四肢清洁</view>
						</view>
						<view class="downitems-left-father">
							<image class="downitems-father-img" src="/static/index/helpdo/two.png" />
							<view class="downitems-father-font-laba">协助清洁（四肢）</view>
							<image class="downitems-father-img-laba" src="/static/index/helpdo/laba.png" />
						</view>
						<view class="downitems-left-father">
							<image class="downitems-father-img" src="/static/index/helpdo/three.png" />
							<view class="downitems-father-font-small">准备清水，一次性面巾，香皂，清洁后涂身体保湿乳。</view>
						</view>
						<view class="downitems-kuai" @click="showVideo=true">
							<image class="downitems-kuai-img" src="/static/index/helpdo/video.png" />
						</view>
						<view class="downitems-says">
							视频讲解
						</view>
					</view>
				</view>
				<image class="downitems-shu" src="/static/index/helpdo/xian.png" />
				<view class="downitems-center">
					<view class="downitems-center-title">
						<view class="downitems-center-title-gun"></view>
						<view class="downitems-center-title-font">转单原因</view>
						<view class="downitems-center-says">
							<view class="downitems-center-father">
								<image class="downitems-center-says-maike" src="/static/index/helpdo/maike.png" />
							</view>
							<view class="">语音输入</view>
						</view>
					</view>
					<view class="downitems-textarea">
						<textarea class="custom-textarea" @blur="handleBlur" placeholder="请输入" />
					</view>
					<view class="downitems-center-title">
						<view class="downitems-center-title-gun"></view>
						<view class="downitems-center-title-font">转单方式</view>
					</view>
					<view class="radio-circle-top-father">
						<view class="radio-circle-top">
							<view :class="!postItems?`radio-circle-target`: `radio-circle`" @click="postItems=0"></view>
							<view class="radio-font" @click="postItems=0">重新派单</view>
						</view>
						<view class="radio-circle-top">
							<view :class="postItems?`radio-circle-target`: `radio-circle`" @click="postItems=1;"></view>
							<view class="radio-font" @click="postItems=1">定向派单</view>
						</view>
					</view>
					<view class="downitems-button">
						确认
					</view>
				</view>
				<image class="downitems-shu" style="transform: rotate(180deg);margin-left: 0rpx;"
					src="/static/index/helpdo/xian.png" />
				<view class="downitems-right">
					<view class="downitems-all" v-show="!postItems">
						<view class="downitems-center-title">
							<view class="downitems-center-title-gun"></view>
							<view class="downitems-center-title-font">重新派单</view>
						</view>
						<view class="downitems-all-font">
							选择重新派单，平台自动将服务指令重新派发给其他员工，等待执行。
						</view>
					</view>
					<view class="downitems-all" v-show="postItems">
						<view class="downitems-center-title">
							<view class="downitems-center-title-gun"></view>
							<view class="downitems-center-title-font">定向派单</view>
						</view>
						<view class="downitems-all-font">
							选择定向转单，请选择要执行服务指令的员工。
						</view>
						<view class="downitems-card-all">
							<view class="downitems-card" v-for="(item,index) in [0,1,2,3,4,5,6,7]">
								<view
									:class="clickitemNumber===index ? `downitems-card-one-target`:`downitems-card-one`"
									@click="clickitem(index)">
									<view class="downitems-card-father">
										<image class="downitems-card-img" src="/static/index/helpdo/people.png" />
									</view>

									<view class="downitems-card-font">
										李金福
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗遮罩层，点击背景可关闭弹窗 -->
		<view v-show="showVideo" class="modal" @click="closeVideo">
			<view class="modal-content" @click.stop>
				<!-- 视频组件，可替换 src 地址 -->
				<!-- <video id="myVideo" src="@/static/index/ceshi.mp4" controls style="width:100%;height:100%;"></video> -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
	const circles = [
		{ label: '指令' },
		{ label: '转单' },
		{ label: '完成' }
	];
	const handleBlur = (event : any) => {
		// console.log('输入框失去焦点，当前值为：', event.detail.value);
	}
	const showVideo = ref(false);
	const videoRef = ref(null)
	const clickitemNumber = ref(-1);
	const postItems = ref(0);
	const videoContext = uni.createVideoContext('myVideo');
	const clickitem = (index : number) => {
		clickitemNumber.value = index
	}
	const closeVideo = () => {
		videoContext.pause();
		showVideo.value = false;
	}
	// 计算宽度
	const lineWidth = computed(() => {
		switch (circlesNumber.value) {
			case 0:
				return '0';
			case 1:
				return 'calc(100% - 600rpx)';
			case 2:
				return 'calc(100% - 120rpx)';
			default:
				return '100%';
		}
	});
	const circlesNumber = ref(0);
</script>

<style lang="less" scoped>
	// 抽屉的css
	.draw-all {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
		background-blend-mode: screen;
		border-top-left-radius: 80rpx;
		border-bottom-left-radius: 80rpx;
		overflow: hidden;

		// position: relative;
		.draw-title {
			width: 100%;
			height: 140rpx;
			// background: linear-gradient(to bottom, #dfecfa, #c9dbee);
			display: flex;
			// 为啥在这里hidden，是因为有个半圆，没法hidden

			.draw-title-gun {
				margin-top: 70rpx;
				margin-left: 40rpx;
				margin-right: 20rpx;
				width: 13rpx;
				height: 50rpx;
				background: linear-gradient(to bottom, #04BCED, #0160CE);
				border-radius: 10rpx;
			}

			.draw-title-font {
				margin-top: 68rpx;
				font-size: 40rpx;
				font-weight: 700;
			}
		}

		.draw-contain {
			width: 100%;
			height: calc(100vh - 140rpx);

			.draw-contain-jindu {
				width: 100%;
				height: 250rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.downitems-father {
		width: 100%;
		height: calc(100% - 205rpx);
		display: flex;

		.downitems-left {
			height: 100%;
			width: 550rpx;

			.downitems-left-mar {
				// margin: 0 50rpx;
				margin-left: 65rpx;

				// margin-right: 50rpx;
				.downitems-left-img {
					width: 420rpx;
					height: 300rpx;
					margin-top: 80rpx;
				}
			}

			.downitems-left-father {
				display: flex;
				margin-top: 20rpx;

				.downitems-father-img {
					width: 38rpx;
					height: 38rpx;
					margin: 6rpx 13rpx 0 20rpx;
				}

				.downitems-father-img-laba {
					width: 38rpx;
					height: 38rpx;
					margin-top: 6rpx;
					// margin: 2rpx 13rpx 0 20rpx;
				}

				.downitems-father-font {
					// font-weight: 700;
					font-size: 40rpx;
					width: 300rpx;
				}

				.downitems-father-font-laba {
					// font-weight: 700;
					font-size: 40rpx;
					// width: 400rpx;

				}

				.downitems-father-font-small {
					// font-weight: 700;
					font-size: 35rpx;
					width: 400rpx;

				}
			}

			.downitems-kuai {
				margin-left: 37rpx;
				background-color: rgba(236, 240, 251, 0.4);
				border-radius: 20rpx;
				width: 350rpx;
				height: 230rpx;
				margin-top: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.downitems-kuai-img {
					width: 120rpx;
					height: 120rpx;
				}
			}

			.downitems-says {
				color: #6F7FA3;
				font-size: 35rpx;
				margin-left: 142rpx;
				margin-top: 20rpx;
			}
		}

		.downitems-right {
			height: 100%;
			width: 650rpx;

			.downitems-all {
				margin-left: 60rpx;

				.downitems-all-font {
					margin-top: 30rpx;
					font-size: 40rpx;
					// color:#6F7FA3;
				}
			}

		}

		.downitems-center {
			height: 100%;
			width: 600rpx;
			position: relative;

			.downitems-button {
				position: absolute;
				left: 30%;
				bottom: 80rpx;
				background: linear-gradient(to right, #00c9ff, #0076ff);
				width: 270rpx;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 40rpx;
			}

		}
	}

	.downitems-center-title {
		width: 100%;
		display: flex;

		.downitems-center-title-gun {
			margin-top: 50rpx;
			margin-left: 0rpx;
			margin-right: 18rpx;
			width: 13rpx;
			height: 50rpx;
			background: linear-gradient(to bottom, #04BCED, #0160CE);
			border-radius: 10rpx;
		}

		.downitems-center-title-font {
			margin-top: 50rpx;
			font-size: 40rpx;
			font-weight: 700;
		}

		// .downitems-center-title-star {
		// 	margin-top: 50rpx;
		// 	margin-left: 10rpx;
		// 	font-size: 32rpx;
		// 	font-weight: 700;
		// 	color: red;
		// }

		.downitems-center-says {
			display: flex;
			margin-top: 50rpx;
			margin-left: 180rpx;
			// margin-right: 50rpx;
			// flex: 1;
			text-align: right;
			color: #6F7FA3;
			font-size: 36rpx
		}

		.downitems-center-father {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background-color: #BAC5DE;
			margin-right: 10rpx;
			margin-top: 0rpx;

			.downitems-center-says-maike {

				width: 40rpx;
				height: 40rpx;
			}
		}

	}

	.downitems-shu {
		width: 70rpx;
		height: 100%;
		margin-top: 4rpx;

	}

	.downitems-textarea {
		margin-top: 20rpx
	}

	.custom-textarea {
		color: #6F7FA3;
		background-color: rgba(255, 255, 255, 0.3);
		width: 570rpx;
		height: 240rpx;
		border-radius: 20rpx;
		font-size: 40rpx;
		padding-left: 30rpx;
		padding-top: 20rpx;
	}

	.radio-circle-top-father {
		margin-left: 30rpx;

		.radio-circle-top {
			margin-top: 30rpx;
			display: flex;
		}
	}

	.radio-circle {
		position: relative;
		margin-top: 2rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid rgb(2, 171, 254);
		background-color: transparent;
	}

	.radio-circle-target {
		position: relative;
		margin-top: 2rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid rgb(2, 171, 254);
		background-color: transparent;
	}

	.radio-circle-target::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 30rpx;
		height: 30rpx;
		background-color: rgb(2, 171, 254);
		border-radius: 50%;
	}

	.radio-font {
		margin-left: 15rpx;
		margin-right: 60rpx;
		font-size: 36rpx;
	}

	.downitems-card-all {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.downitems-card-one {
			width: 270rpx;
			height: 150rpx;
			margin-right: 20rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			background-color: rgb(243, 248, 253);
			border: 1rpx solid #52668C;
			box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.downitems-card-one-target {
			width: 270rpx;
			height: 150rpx;
			margin-right: 20rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			background: linear-gradient(to bottom, #B8E5FF, #F7D0EF);
			border: 1rpx solid #fff;
			box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.downitems-card {
			display: flex;
			justify-content: center;
			align-items: center;

			.downitems-card-font {
				font-weight: 700;
				margin-left: 10rpx;
				margin-right: 10rpx;
				font-size: 40rpx;
			}

			.downitems-card-father {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50rpx;
				border: 1rpx solid #94B0C3;
				background-color: #fff;
				display: flex;
				justify-content: center;
				overflow: hidden;

				// align-items: center;
				.downitems-card-img {
					width: 80rpx;
					height: 80rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	/* 弹窗遮罩层 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		/* 半透明背景 */
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
	}

	/* 弹窗内容，宽高占屏幕70% */
	.modal-content {
		width: 80vw;
		height: 80vh;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
	}
</style>