<template>
	<view class="draw-all">
		<!-- <video v-if="showVideo" :src="videoSrc" controls class="video-popup"></video> -->
		<view class="draw-title">
			<view class="draw-title-gun"></view>
			<view class="draw-title-font">转单执行</view>
		</view>

		<view class="draw-contain">
			<view class="container-father">
				<view class="draw-contain-white-sha"></view>
				<view class="container">
					<div class="line" :style="{width: lineWidth}"></div>
					<div class="line-gray"></div>
					<template v-for="(item, index) in circles" :key="index">
						<div :class="circlesNumber>=index?  `outer-circle-target`:`outer-circle`"
							@click="circlesNumber=index">
							<div :class="circlesNumber>=index?  `inner-circle-target`:`inner-circle`">
								<span>{{ item.label }}</span>
							</div>
						</div>
					</template>
				</view>
				<view class="draw-contain-gray"></view>
				<view class="draw-contain-white"></view>

			</view>
			<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">
							<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>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits } from 'vue';
	const circles = [
		{ label: '指令' },
		{ label: '转单' },
		{ label: '完成' }
	];
	const handleBlur = (event : any) => {
		// console.log('输入框失去焦点，当前值为：', event.detail.value);
	}
	const clickitemNumber = ref(-1);
	const postItems = ref(0);
	const clickitem = (index : number) => {
		clickitemNumber.value = index
	}
	// 计算宽度
	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;
				// background-color: red;
				display: flex;
				justify-content: center;
				align-items: center;
			}


		}

		.container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 1000rpx;
			height: 200rpx;
			margin: 0 auto;
			position: relative;

		}

		.outer-circle-target {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background: rgba(2, 136, 217, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;
		}

		.outer-circle {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			// background: rgba(2, 136, 217, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;
		}

		.inner-circle-target {
			width: 95rpx;
			height: 95rpx;
			border-radius: 50%;
			background: #0288D9;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
			position: absolute;
			z-index: 3;
		}

		.inner-circle {
			width: 95rpx;
			height: 95rpx;
			border-radius: 50%;
			background: #dfecfa;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
			position: absolute;
			z-index: 3;
		}

		.inner-circle-target span {
			color: #fff;
			font-size: 30rpx;
			font-family: Arial, sans-serif;
			z-index: 4;
		}

		.inner-circle span {
			// color: #fff;
			font-size: 30rpx;
			font-family: Arial, sans-serif;
			z-index: 4;
		}

		.line {
			width: calc(100% - 120rpx);
			height: 15rpx;
			background: linear-gradient(to right, #0288D1, #0288D1);
			position: absolute;
			top: 50%;
			left: 60rpx;
			z-index: 1;
			border-radius: 5rpx;
			box-shadow:
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8),
				/* 内部高光 */
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.4),
				/* 内部阴影 */
				0 0 8rpx rgba(2, 136, 209, 0.8);
			/* 外部发光 */
			filter: brightness(1.2);
			z-index: 1;
			transition: width 0.5s ease;
			/* 设置宽度变化的过渡效果 */
		}

		.line-gray {
			width: calc(100% - 120rpx);
			height: 15rpx;
			background: #c9dbee;
			position: absolute;
			top: 50%;
			left: 60rpx;
			z-index: 0;
			border-radius: 5rpx;
			/* 外部发光 */
			filter: brightness(1.2);
		}

		.container-father {
			width: 100%;
			height: 200rpx;
			// background-color: rgba(187, 203, 236, 0.6);

			.draw-contain-white-sha {
				width: 100%;
				height: 1rpx;
				background-color: #fff;
				box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
			}
		}

		.draw-contain-gray {
			width: 100%;
			height: 3rpx;
			background-color: #d0e0ef;
		}

		.draw-contain-white {
			width: 100%;
			height: 1rpx;
			background-color: #fff;
		}

	}

	.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;
				}
			}
		}
	}
</style>