<template>
	<main>
		<div class="ml-[20px]">
			<el-tabs v-model="activeName" class="demo-tabs">
				<el-tab-pane label="设备调试" name="debug"></el-tab-pane>
				<el-tab-pane label="应用调试" name="app"></el-tab-pane>
			</el-tabs>
		</div>
		<div v-if="activeName == 'debug'">
			<div class="debug_axis">
				<div class="axis">
					<div class="w-[3rem]">X轴：</div>
					<input
						v-model="machineryForm.X"
						type="number"
						class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
					<div class="w-[3rem]">毫米</div>
					<div class="flex">
						<el-button type="primary" @click="onMoveMachinery('X')">移动</el-button>
						<el-button type="primary" @click="onStopRotate('X')">停止</el-button>
					</div>
				</div>
				<div class="axis">
					<div class="w-[4rem]">Y轴：</div>
					<input
						v-model="machineryForm.Y"
						type="number"
						class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
					<div class="w-[2.5rem]">毫米</div>
					<div class="flex">
						<el-button type="primary" @click="onMoveMachinery('Y')">移动</el-button>
						<el-button type="primary" @click="onStopRotate('Y')">停止</el-button>
					</div>
				</div>
				<div class="axis">
					<div class="w-[3rem]">Z轴：</div>
					<input
						v-model="machineryForm.Z"
						type="number"
						class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
					<div class="w-[2.5rem]">毫米</div>
					<div class="flex">
						<el-button type="primary" @click="onMoveMachinery('Z')">移动</el-button>
						<el-button type="primary" @click="onStopRotate('Z')">停止</el-button>
					</div>
				</div>
			</div>
			
			<div class="debug_main">
				<div class="debug_left">
					<div class="">
						<el-row>
							<el-col :span="6" class="text-right">指定电机转速</el-col>
							<el-col :span="20" class="ml-[5rem]">
								<el-radio-group v-model="rotateForm.axis">
									<el-radio value="X">X</el-radio>
									<el-radio value="Y">Y</el-radio>
									<el-radio value="Z">Z</el-radio>
								</el-radio-group>
								<div class="flex">
									<div>
										速度:<input
											type="number"
											v-model="rotateForm.speed"
											placeholder=""
											class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />毫米/秒
									</div>
									<div class="ml-[20px]">
										<el-button type="primary" @click="onRotate">确定</el-button>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-divider />
						<el-row>
							<el-col :span="6" class="text-right"> 电压控制器： </el-col>
							<el-col :span="6" class="ml-[20px]">
								<input
									v-model="voltageValue"
									placeholder="0~5000v"
									type="number"
									class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
							</el-col>
							<el-col :span="8">
								<el-button type="primary" @click="onTurnOnHighVoltage">开启</el-button>
								<el-button @click="onTurnOffHighVoltage">关闭</el-button>
							</el-col>
						</el-row>
						<el-divider />
						<el-row class="mt-[10px]">
							<el-col :span="4" class="text-right"> 注射泵： </el-col>
							<el-col :span="20">
								<div class="ml-[20px]">
									<input
										v-model="syringeForm.rotationSpeed"
										placeholder="转速"
										type="number"
										class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />微升/每分钟
								</div>
								<div class="mt-[10px] ml-[20px]">
									<input
										v-model="syringeForm.time"
										placeholder="时间"
										type="number"
										class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />秒
								</div>
								<div class="ml-[20px] mt-[10px]">
									方向：
									<el-radio v-model="syringeForm.direction" value="0">后退</el-radio>
									<el-radio v-model="syringeForm.direction" value="1">前进</el-radio>
									<br />
									<el-button type="primary" @click="onTurnOnSyringePump">开始</el-button>
									<el-button type="primary" class="ml-[20px]" @click="onTurnOffSyringePump">停止</el-button>
								</div>
							</el-col>
						</el-row>
						<el-divider />
						<el-row class="mt-[10px]">
							<el-col :span="6" class="text-right"> 湿度： </el-col>
							<el-col :span="12" class="ml-[20px]">
								<input
									placeholder="湿度"
									type="number"
									class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
								<div class="flex mt-[10px]">
									<el-button type="primary">开始除湿</el-button>
									<el-button type="primary">结束除湿</el-button>
								</div>
							</el-col>
						</el-row>
						<el-divider />
					</div>
				</div>
				<div class="debug_right">
					<div>
						<el-button type="primary">急停</el-button>
            <div class="mt-[20px]">
              <input
									v-model="brightness"
									placeholder="亮度"
									type="number"
									class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
              <el-button class="ml-[20px]" type="primary" @click="onTurnOnLightPanel">开启照明灯</el-button>
              <el-button @click="onTurnOffLightPanel">关闭照明灯</el-button>
            </div>
					</div>
					<el-divider />
					<div>
						<div>切换三通</div>
						<el-button type="primary" @click="onSwitchThreeWayValve('clean')">管路切换到基质</el-button>
						<el-button type="primary" @click="onSwitchThreeWayValve('spray')">管路切换到清洗</el-button>
					</div>
					<el-divider />
					<div>
						<div>气压阀</div>
						<div>
							<el-button type="primary" @click="onControlValve('Cleaning', true)">打开清洗阀</el-button>
							<el-button @click="onControlValve('Cleaning', false)">关闭清洗阀</el-button>
						</div>
						<div class="mt-[10px]">
							<el-button type="primary" @click="onControlValve('Nozzle', true)">打开喷嘴阀</el-button>
							<el-button @click="onControlValve('Nozzle', false)">关闭喷嘴阀</el-button>
						</div>
						<div class="mt-[10px]">
							<el-button type="primary" @click="onControlValve('Dehumidification', true)">打开除湿阀</el-button>
							<el-button @click="onControlValve('Dehumidification', false)">关闭除湿阀</el-button>
						</div>
					</div>
					<el-divider />
					<div class="mt-[10px]">
            <el-button type="primary" @click="onStartWash('injector')">开始清洗注射器</el-button>
            <el-button type="primary" @click="onStartWash('nozzle')">开始清洗喷涂部分</el-button>
            <el-button @click="onStopWash">停止清洗</el-button>
          </div>
					<!-- <el-divider />
          <div class="h-[13rem] bg-[#f4f4f4] p-[10px]">
            <div>状态反馈区</div>
             
          </div> -->
				</div>
			</div>
		</div>
		<div v-if="activeName == 'app'">
			<div class="bg-[#FBFBFB] h-[75vh] p-[10px]">
				<el-row class="mt-[10px]">
					<el-col :span="3" class="text-right"> 开始喷涂： </el-col>

					<el-col :span="12" class="ml-[20px]">
						<div>喷涂路线</div>
						<div>
							<el-radio-group v-model="workForm.routeType">
								<el-radio :value="1">横向</el-radio>
								<el-radio :value="2">纵向</el-radio>
							</el-radio-group>
						</div>
						<div class="mt-[20px]">
							选择玻片：
							<el-radio-group v-model="axis.index">
								<el-radio :value="0">玻片1</el-radio>
								<el-radio :value="1">玻片2</el-radio>
								<el-radio :value="2">玻片3</el-radio>
								<el-radio :value="3">玻片4</el-radio>
							</el-radio-group>
						</div>
						<div class="mt-[20px]">
							行间距：
							<input
								v-model="workForm.space"
								placeholder=""
								type="number"
								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
							毫米
						</div>

						<div class="mt-[20px]">
							氮气流速：
							<input
								v-model="workForm.nitrogenFlowVelocity"
								placeholder=""
								type="number"
								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
							毫米/秒
						</div>

						<div class="mt-[20px]">
							氮气气压：
							<input
								v-model="workForm.matrixFlowVelocity"
								placeholder=""
								type="number"
								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
							Mp
						</div>

						<div class="mt-[20px]">
							电压：
							<input
								v-model="workForm.voltage"
								placeholder=""
								type="number"
								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
							V
						</div>

						<div class="mt-[20px]">
							喷针距离玻片高度：
							<input
								v-model="workForm.height"
								placeholder=""
								type="number"
								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
							毫米
						</div>

						<div class="mt-[20px]">
							移速：
							<input
								v-model="workForm.movementSpeed"
								placeholder=""
								type="number"
								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
							毫米/秒
						</div>

						<div>起始坐标：</div>
						<div>
							X:<input
								v-model="axis.x1"
								placeholder=""
								type="number"
								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
							Y:<input
								v-model="axis.y1"
								placeholder=""
								type="number"
								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
						</div>
						<div class="mt-[10px]">结束坐标：</div>
						<div class="flex">
							X:<input
								v-model="axis.x2"
								placeholder=""
								type="number"
								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
							Y:<input
								v-model="axis.y2"
								placeholder=""
								type="number"
								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
						</div>
						<div class="mt-[20px] text-center">
							<el-button type="primary" class="ml-[10px] w-[100px]" @click="onStartWork">开始喷涂</el-button>
							<el-button type="primary" class="ml-[10px] w-[100px]" @click="onStopWork">结束喷涂</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</main>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import { createWebSocket, sharedWsUrl } from "@/services/socket";
import { ElMessage } from "element-plus";
import type {
	ControlNitrogen,
	MachineryType,
	SyringeType,
	SyringeParams,
	VoltageType,
	ControlValueType,
	Axis,
} from "@/services/globalCmd/cmdTypes";
import {
	moveMotorToPosition,
	switchThreeWayValve,
	controlValve,
	turnOnHighVoltage,
	turnOffHighVoltage,
	turnOnSyringePump,
	turnOffSyringePump,
	startWork,
	stopWork,
	stopMotor,
	turnOffLightPanel,
	turnOnLightPanel,
	stopWash,
	stopDehumidify,
	setMotorSpeed,
  type WashType,
  startWash
} from "@/services/globalCmd/globalCmd";
import type { BaseResponse } from "@/services/httpRequest";
import type { WorkType } from '../../services/globalCmd/cmdTypes';
const activeName = ref("debug");
const voltageValue = ref();
const syringeForm = ref<SyringeParams>({
	rotationSpeed: 1,
	time: 0,
	direction: "1",
});
const workForm = ref<WorkType>({
	routeType: 1,
	space: 2,
	nitrogenFlowVelocity: 1,
	nitrogenAirPressure: 1,
	matrixFlowVelocity: 1,
	voltage: 1,
	needPower: false,
	height: 6,
	movementSpeed: 10,
	position: [],
});
const axis = ref<Axis>({
	index: 0,
	x1: 10,
	y1: 10,
	x2: 20,
	y2: 20,
});

const rotateForm = ref<{ axis: "X" | "Y" | "Z"; speed: number }>({ axis: "X", speed: 20 });

watch(voltageValue,(newVal)=>{
  if(newVal > 5000){
    voltageValue.value = 5000
  }
  if(newVal < 0){
    voltageValue.value = 0
  }
})


onMounted(() => {
	//连接websocket
	const wsClient = createWebSocket(sharedWsUrl);
	const subscription = wsClient.dataOb.subscribe(data => {
	});
	wsClient.connect();

	onUnmounted(() => {
		subscription && subscription.unsubscribe();
	});
});



const machineryForm = ref<Record<string, string>>({});
const onMoveMachinery = (axis: string) => {
	if (!axis) return;
	const params = <MachineryType>{
			axis,
			position: parseFloat(machineryForm.value[axis]),
	};
	moveMotorToPosition(params).then((res) => {
		console.log("-----moveMotorToPosition----res---", res);
		success(res);
	});
};

const onSwitchThreeWayValve = (type: string) => {
	const params = {
		type,
	};
	switchThreeWayValve(params).then((res) => {
		console.log("---onSwitchThreeWayValve---res---", res);
		success(res);
	});
};

const onControlValve = (type: ControlNitrogen, open: boolean) => {
	const params = <ControlValueType>{
		params: {
			valveType: type,
			isOpen: open,
		},
	};
	controlValve(params).then((res) => {
		console.log("---onControlValve---res---", res);
		success(res);
	});
};

const onStopDehumidify = () => {
	stopDehumidify().then((res) => {
		success(res);
	});
};

function onStartWash(type: WashType) {
	startWash({ type }).then(res => {
		if (res.success) {
			ElMessage.success("已经开始清洗");
		} else {
			ElMessage.error(res.msg);
		}
	});
}

const onStopWash = () => {
	stopWash({}).then((res) => {
		success(res);
	});
};

//电压控制 开启
const onTurnOnHighVoltage = () => {
	const params = <VoltageType>{
		params: { voltage: +voltageValue.value },
	};
	turnOnHighVoltage(params).then((res) => {
		console.log("---onTurnOnHighVoltage-  电压控制 on --res---", res);
		success(res);
	});
};

//电压控制 关闭
const onTurnOffHighVoltage = () => {
	turnOffHighVoltage().then((res) => {
		console.log("---onTurnOffHighVoltage- 电压控制 off--res---", res);
		success(res);
	});
};

//注射泵开启
const onTurnOnSyringePump = () => {
	// SyringeType
	const params = <SyringeType>{
		params: {
			rotationSpeed: syringeForm.value.rotationSpeed,
			// direction: syringeForm.value.direction,
			// time: syringeForm.value.time,
		},
	};
	turnOnSyringePump(params).then((res) => {
		console.log("---onTurnOffHighVoltage- 电泵开启--res---", res);
		success(res);
	});
};

const onTurnOffSyringePump = () => {
	turnOffSyringePump().then((res) => {
		success(res);
	});
};

const onStartWork = () => {
	const params = <WorkType>{
			...workForm.value,
			position: [axis.value],
	};

	startWork(params).then((res) => {
		success(res);
	});
};

function onStopWork() {
	stopWork().then((res) => {
		success(res);
	});
}

const onRotate = () => {
	const params = {
		...rotateForm.value,
	};

	setMotorSpeed(params).then((res) => {
		success(res);
	});
};

const onStopRotate = (axis: string) => {
	stopMotor({axis}).then((res) => {
		success(res);
	});
};

let brightness = ref()
const onTurnOnLightPanel = () => {
	turnOnLightPanel({brightness: brightness.value}).then(res => {
		success(res);
	});
};

function onTurnOffLightPanel() {
	const params = {
		brightness: brightness.value,
	};
	turnOffLightPanel(params).then((res) => {
		success(res);
	});
}


function success(data:BaseResponse) {
	if (data && data.msg == "ok") {
		ElMessage.success("发送成功");
	} else {
		ElMessage.error(data.msg);
	}
}
</script>
<style lang="scss" scoped>
div {
	color: #0349a8;
}
.el-button--primary {
	background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);
}
.debug_axis {
	height: 3rem;
	background: #fbfbfb;
	margin-left: 3.5rem;
	margin-right: 3.5rem;
	border-radius: 6px;
	display: flex;
	align-items: center;

	.axis {
		display: flex;
		align-items: center;
		color: #0349a8;
	}
}

.debug_main {
	display: flex;
	align-items: center;
	margin-left: 4rem;
	margin-top: 2rem;
	.debug_left {
		width: 42vw;
		height: 18.75rem;
		background: #fbfbfb;
		height: 70vh;
		padding: 2rem;
	}
	.debug_right {
		width: 42vw;
		height: 70vh;
		background: #fbfbfb;
		margin-left: 2rem;
		padding: 2rem;
	}
}
</style>
