<template>
	<div class="px-6 pt-6 pb-3 flex justify-between">
		<div class="w-full">
			<div class="flex items-center mb-3 gap-5">
				<p class="font-medium text-primary">喷涂路线</p>
				<img :src="route_v" alt="icon" />
				<img :src="route_h2" alt="icon" />
			</div>
			<!-- <p class="mx-9 mt-5 mb-4 font-medium text-primary">选择喷涂区域</p> -->
			<section class="">
				<Spray
					:width="840"
					:height="640"
					:left-padding="4"
					:right-padding="4"
					:top-padding="4"
					:bottom-padding="4"
					:columns="4"
					:rows="3"
					:cell-num="25"
					@select-area="onSelectArea" />
				<van-checkbox-group shape="square" v-model="checked" checked-color="#26509c" icon-size="28px" direction="horizontal" class="flex justify-around w-[840px] mt-3 ">
					<van-checkbox name="a"></van-checkbox>
					<van-checkbox name="b"></van-checkbox>
                    <van-checkbox name="c"></van-checkbox>
					<van-checkbox name="d"></van-checkbox>
				</van-checkbox-group>
			</section>
		</div>
		<div class="shadow-card absolute top-[calc(var(--headerHeight)+16px)] right-[calc(var(--borderWidth)+20px)] w-[476px]">
			<el-collapse accordion>
				<el-collapse-item name="1">
					<template #title>
						<section class="flex items-center gap-3 px-4">
							<div>
								<span class="self-center text-right text-primary font-medium mr-3">选择基质</span>
								<input
									type="text"
									class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
							</div>
							<div>
								<span class="self-center text-right text-primary font-medium mr-3">工艺</span>
								<input
									type="text"
									class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
							</div>
						</section>
					</template>
					<div class="wrapper grid grid-cols-3 gap-x-3 gap-y-4">
						<span class="self-center text-right text-primary font-medium">Z轴高度</span>
						<input
							type="text"
							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
						<span class="self-center text-primary font-medium">毫米</span>

						<span class="self-center text-right text-primary font-medium">氮气流速</span>
						<input
							type="text"
							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
						<span class="self-center text-primary font-medium">毫米/每秒</span>

						<span class="self-center text-right text-primary font-medium">氮气气压</span>
						<input
							type="text"
							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
						<span class="self-center text-primary font-medium">MPa≥0.35</span>

						<span class="self-center text-right text-primary font-medium">基质流速</span>
						<input
							type="text"
							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
						<span class="self-center text-primary font-medium">ul/min</span>

						<span class="self-center text-right text-primary font-medium">是否加电</span>
						<div class="flex items-center gap-x-8 col-span-2">
							<div class="true">是</div>
							<div class="false">否</div>
						</div>
						<span class="self-center text-right text-primary font-medium">喷雾电压</span>
						<input
							type="text"
							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
						<span class="self-center text-primary font-medium">V</span>

						<span class="self-center text-right text-primary font-medium">移动速度</span>
						<input
							type="text"
							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
						<span class="self-center text-primary font-medium">毫米/每秒</span>

						<span class="self-center text-right text-primary font-medium">行间距</span>
						<input
							type="text"
							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
						<span class="self-center text-primary font-medium">毫米</span>
					</div>
				</el-collapse-item>
			</el-collapse>
		</div>
	</div>
</template>
<script setup lang="ts">
import route_v from "@/assets/route_vertical.png";
import route_v2 from "@/assets/route_vertical2.png";
import route_h from "@/assets/route_horizontal.png";
import route_h2 from "@/assets/route_horizontal2.png";
import Spray, { type GridArea } from "@/components/Spray.vue";
import { ref } from "vue";

const selectedArea = ref<GridArea>();
const checked = ref(['a', 'b']);

function onSelectArea(area: GridArea) {
	selectedArea.value = area;
}
</script>
<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
	background-color: transparent;
}
:deep(.el-collapse-item__wrap) {
	background-color: transparent;
}
</style>
