<template>
	<!-- 远程开门 -->
	<div class="pageDoor flex-col">
		<s-header :name="$t('device.remoteDoorOpening')" :noback="false"></s-header>
		<div class="box1">
			<div class="block2 flex-row justify-between">
				<div class="block3 flex-col"></div>
				<span class="info2">{{ $t('device.equipmentName') }}：{{ deviceDetal ? deviceDetal.name : '' }}</span>
			</div>
			<van-field colon readonly :label="`${$t('device.outDoor')}`" label-width="40px">
				<template #input>
					<div class="l-flex-RC">
						<van-switch :model-value="deviceDetal.outDoor" @update:model-value="outDoorChg" size="22"
							active-value="1" inactive-value="0" />
					</div>
					<span class="info3 o-pl-50">{{ $t("device.status") }}: </span>
					<span class="info3 o-pl-10">{{ deviceDetal.outDoor != 1 ? $t("device.close") : $t("device.open")
					}}</span>
				</template>
			</van-field>

			<van-field colon readonly :label="`${$t('device.inDoor')}`" label-width="40px">
				<template #input>
					<div class="l-flex-RC">
						<van-switch :model-value="deviceDetal.inDoor" @update:model-value="inDoorChg" size="22"
							active-value="1" inactive-value="0" />
					</div>
					<span class="info3 o-pl-50">{{ $t("device.status") }}: </span>
					<span class="info3 o-pl-10">{{ deviceDetal.inDoor != 1 ? $t("device.close") : $t("device.open")
					}}</span>
				</template>
			</van-field>
		</div>
	</div>
</template>
  
<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { useRoute } from 'vue-router';
import { getDeviceDetal, Api_openDoor } from '@/service/device'
import { showFailToast, showToast, showConfirmDialog } from 'vant';
import { useI18n } from "vue-i18n";
import { styleUrl } from "../../common/js/utils";

export default {
	setup() {
		const route = useRoute();
		const deviceId = route.query.deviceId;
		const deviceDetal = ref({});
		const { t } = useI18n();

		// 初始化页面获取列表
		onMounted(async () => {
			// 加载样式
			styleUrl('deviceOper');
			getDeviceDetalFun();
			console.log(deviceDetal.value)
		});

		// 获取设备列表数据
		const getDeviceDetalFun = async () => {
			const {
				data
			} = await getDeviceDetal({
				id: deviceId
			});
			if (data.code === '00000') {
				// outDoor如果是null，默认是关闭
				if (data.data.outDoor == null) {
					data.data.outDoor = "0";
				}
				// inDoor如果是null，默认是关闭
				if (data.data.inDoor == null) {
					data.data.inDoor = "0";
				}
				deviceDetal.value = data.data;
			} else {
				showFailToast(data.message);
			}
		}

		// 点击外门开关
		const outDoorChg = (outDoor) => {
			showConfirmDialog({
				title: t('device.openRemind'),
				message: t('device.openRemindOut'),
			}).then(() => {
				Api_openDoor({
					equipmentId: deviceDetal.value.id,
					type: 0,
					status: outDoor,
				}).then((res) => {
					if (res.data.code == "00000") {
						showToast(t('device.sentSuccessfully'));
					}
					setTimeout(() => {
						getDeviceDetalFun();
					}, 1500);
				});
			});
		};

		// 点击内门开关
		const inDoorChg = (inDoor) => {
			showConfirmDialog({
				title: t('device.openRemind'),
				message: t('device.openRemindIn'),
			}).then(() => {
				Api_openDoor({
					equipmentId: deviceDetal.value.id,
					type: 1,
					status: inDoor,
				}).then((res) => {
					if (res.data.code == "00000") {
						showToast(t('device.sentSuccessfully'));
					}
					setTimeout(() => {
						getDeviceDetalFun();
					}, 1500);
				});
			});
		};

		return {
			deviceDetal,
			outDoorChg,
			inDoorChg
		};
	},
	components: {
		sHeader
	},
}
</script>
  
<style lang="less" scoped>
@import "../../common/style/common";
</style>