<template>
	<div class="passwordIdx">
		<s-header :name="$t('device.devicePasswordPage.title')" :noback="false"></s-header>
		<div class="headerCon kBordBott o-plr-10 o-ptb-16 l-flex-RC">
			<div class="line o-mr-6"></div>
			<div>
				<span class="c-color c-text-14">{{ $t('device.devicePasswordPage.equipmentName') }}：</span>
				<span class="c-text-color c-text-14">{{ equipmentName }}</span>
			</div>
		</div>
	</div>
	<van-config-provider :theme-vars="themeVars">
		<van-dropdown-menu active-color="#1989fa">
			<van-dropdown-item v-model="pwdValue" :options="pwdType" />
		</van-dropdown-menu>
		<van-form v-if="pwdValue == 0" @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="adminPwd" type="password" :label="$t('device.devicePasswordPage.deivcePwd')"
					:placeholder="$t('device.devicePasswordPage.passwordPlaceholder')"
					:rules="[{ validator, message: $t('device.devicePasswordPage.passwordPlaceholder') }]" />
				<van-field v-model="checkAmdinPwd" type="password" :label="$t('device.devicePasswordPage.checkDeivcePwd')"
					:placeholder="$t('device.devicePasswordPage.passwordCheckRequired')"
					:rules="[{ validator, message: $t('device.devicePasswordPage.passwordPlaceholder') }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					{{ $t('device.submitAndPushDeviceUpdates') }}
				</van-button>
			</div>
		</van-form>
		<van-form v-else @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="guestPwd" type="password" :label="$t('device.devicePasswordPage.deivcePwd')"
					:placeholder="$t('device.devicePasswordPage.passwordPlaceholder')"
					:rules="[{ validator, message: $t('device.devicePasswordPage.passwordPlaceholder') }]" />
				<van-field v-model="checkGuestPwd" type="password" :label="$t('device.devicePasswordPage.checkDeivcePwd')"
					:placeholder="$t('device.devicePasswordPage.passwordCheckRequired')"
					:rules="[{ validator, message: $t('device.devicePasswordPage.passwordPlaceholder') }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					{{ $t('device.submitAndPushDeviceUpdates') }}
				</van-button>
			</div>
		</van-form>
	</van-config-provider>
</template>

<script>
// 导入接口
import {
	updateDevicePassword
} from '@/service/device/index';
import sHeader from "@/components/SimpleHeader";
import {
	ref,
	reactive
} from "@vue/reactivity";
import {
	onMounted
} from '@vue/runtime-core';
import {
	useRoute, useRouter
} from 'vue-router';
import {
	showNotify, showDialog, showConfirmDialog, showFailToast
} from 'vant';
import {
	useI18n
} from "vue-i18n";
import { styleUrl } from "../../../common/js/utils";
export default {
	components: {
		sHeader
	},
	setup() {
		// 引入语言
		const { t } = useI18n();
		// 路由
		const route = useRoute();
		const router = useRouter();
		// 设备名称
		const equipmentName = ref('');
		const pwdValue = ref();
		const adminPwd = ref();
		const checkAmdinPwd = ref();
		const guestPwd = ref();
		const checkGuestPwd = ref();

		const validator = (val) => /\w{6,}/.test(val);
		const themeVars = {
			dropdownMenuTitleTextColor: '#404d74'
		};
		const pwdType = [{
			text: t('device.devicePasswordPage.adminPassword'),
			value: 0
		},
		{
			text: t('device.devicePasswordPage.guestPassword'),
			value: 1
		},
		]
		// 刚进页面
		onMounted(() => {
			styleUrl('device');
			// console.log(pwdType[0].value)
			pwdValue.value = pwdType[0].value;
			// console.log(pwdValue.value)
			const id = route.query.deviceId || "";
			const name = route.query.name || "";
			if (id) {
				passwordForm.equipmentId = id;
				equipmentName.value = name;
			}

		});
		// 修改的价格
		const passwordForm = reactive({
			equipmentId: '',
			adminPwd: '',
			guestPwd: ''
		});

		// 点击提交
		const onSubmit = () => {
			passwordForm.adminPwd = adminPwd.value;
			passwordForm.guestPwd = guestPwd.value;
			console.log(passwordForm);
			if ((passwordForm.adminPwd != checkAmdinPwd.value) || (passwordForm.guestPwd != checkGuestPwd.value)) {
				showNotify({
					type: 'danger',
					message: t('device.devicePasswordPage.passwordMatch')
				});
				return;
			}
			if (pwdValue.value == 0) {
				passwordForm.guestPwd = "";
			}
			if (pwdValue.value == 1) {
				passwordForm.adminPwd = "";
			}
			showConfirmDialog({
				// title: "提示",
				message: t('device.editCheck'),
			}).then(() => {
				console.log(passwordForm);
				updateDevicePassword({
					"equipmentId": passwordForm.equipmentId,
					"adminPwd": passwordForm.adminPwd,
					"guestPwd": passwordForm.guestPwd
				}).then((res) => {
					if (res.data.code == "A0001") {
						showFailToast(t('device.unknownError'));
						return;
					}
					showDialog({
						message: t('device.modificationSucceeded'),
					}).then(() => {
						//返回上一页
						router.go(-1);
					});
				});
			});
		}

		return {
			passwordForm,
			equipmentName,
			pwdType,
			pwdValue,
			adminPwd,
			checkAmdinPwd,
			guestPwd,
			checkGuestPwd,
			onSubmit,
			validator,
			themeVars
		};
	},
};
</script>

<style lang="less" scoped></style>
