<template>
	<page-meta><navigation-bar :title="$tt('deviceAdd.addDevice')" title-align="center"
			background-color="#007AFF" /></page-meta>
	<view class="container">
		<view class="card">
			<u--form labelPosition="left" :model="form" ref="form" labelWidth="80" labelAlign="center">
				<view style="padding:10px 0;;border-bottom:1px solid #EFEFEF;display:flex;">
					<u--text prefixIcon="grid-fill" iconStyle="font-size: 16px;color:#606266"
						:text="$tt('deviceAdd.fillcontent')" bold color="#606266"></u--text>
					<u-button type="success" :text="$tt('linkDevice.scan')" icon="scan" size="small"
						customStyle="margin-left:20px;width:90px;" @click="openScan(form.serialNumber)"></u-button>
				</view>
				<u-form-item :label="$tt('deviceAdd.productname')" prop="SSID">
					<u-input v-model="form.deviceName" :placeholder="$tt('deviceAdd.inputdevicename')">
					</u-input>
				</u-form-item>

				<u-form-item :label="$tt('deviceAdd.Product')" prop="productId">
					<uni-data-select v-model="form.productId" :localdata="list"
						:placeholder="$tt('deviceAdd.inputproduct')" @change="handleProductChange" />
				</u-form-item>



				<u-form-item :label="$tt('deviceAdd.equipment')" prop="imei">
					<u-input v-model="form.serialNumber" :placeholder="$tt('deviceAdd.inputequipment')"
						:type="passwordShow ? 'text' : 'password'">

					</u-input>
				</u-form-item>

				<u-form-item :label="$tt('deviceAdd.longitude')" prop="longitude">
					<u-input v-model="form.longitude" :placeholder="$tt('deviceAdd.inputlongitude')"
						:type="passwordShow ? 'text' : 'password'">

					</u-input>
				</u-form-item>



				<u-form-item :label="$tt('deviceAdd.latitude')" prop="latitude">
					<u-input v-model="form.latitude" :placeholder="$tt('deviceAdd.inputlatitude')"
						:type="passwordShow ? 'text' : 'password'">

					</u-input>
				</u-form-item>

				<!-- 修改分组选择/输入组件 -->
				<u-form-item label="设备分组" prop="groupId">
					<uni-data-select v-model="form.groupId" :localdata="groupListWithOther" :placeholder="'请选择分组'"
						@change="handleGroupChange" />
				</u-form-item>

				<!-- 新增一个独立的表单项用于其他分组名称输入 -->
				<u-form-item v-if="showCustomGroupInput" label="分组名称" prop="groupName">
					<u-input v-model="form.groupName" placeholder="请输入新分组名称" />
				</u-form-item>

				<u-form-item>
					<u-button type="primary" @click="getCurrentLocation">获取当前位置</u-button>
				</u-form-item>


				<u-form-item>
					<u-button type="primary" @click="phoneadddevice">添加</u-button>
				</u-form-item>




			</u--form>
		</view>
	</view>
</template>

<script>
import {
	getProfile
} from '@/apis/modules/common';
import {
	getProductList
} from '@/apis/modules/product';

import {
	addDevice
} from '@/apis/modules/device.js';
import {
	getGroupList,
	updateDeviceGroups,
	addGroup
} from '@/apis/modules/group';
export default {
	data() {
		return {
			// 是否为微信小程序
			isWeChat: false,
			// 复选框配置remeber、advance
			checkboxConfigs: ['remeber'],
			// 配网模式选项卡索引
			tabIndex: 0,
			// wifi密码可见性
			passwordShow: true,
			// 用户编号是否可编辑
			userIdDisabled: true,

			// form: {
			// 	productId: 0,
			// 	status: 1,
			// 	locationWay: 3,
			// 	firmwareVersion: 1.0,
			// 	serialNumber: '',
			// 	deviceType: 1,
			// 	isSimulate: 0,
			// 	productName: '',
			// 	deviceId: "0",
			// },

			form: {
				productId: 0,
				status: 1,
				locationWay: 3,
				firmwareVersion: 1,
				serialNumber: "",
				deviceType: 2,
				isSimulate: 0,
				deviceId: "0",
				deviceName: "",
				productName: "",
				tenantId: 0,
				tenantName: "",
				longitude: "",
				latitude: "",
				groupId: '', // 添加分组ID字段
				groupName: '', // 添加分组名称字段
			},
			queryParams: {
				pageNum: 1,
				pageSize: 12,
				productName: null,
				categoryId: null,
				categoryName: null,
				tenantId: null,
				tenantName: null,
				isSys: null,
				status: 2, //已发布
				// deviceType: 3, // 监控设备
				networkMethod: null,
			},

			list: [], // 产品列表

			// 计数
			count: {
				// 进度定时器
				timer: {},
				// 显示文本
				text: this.$tt('deviceAdd.noDevice'),
				// 文字类型
				type: 'warning'
			},
			// 发现设备计时器
			discoverTimer: {},
			// 单设备配网进度
			progress: 0,
			// 单设备配网步骤
			step: 1,

			// wifi列表加载
			loading: false,
			// wifi列表


			mstep: 0,
			// 更新WIFI按钮
			updateDisable: false,
			groupList: [], // 分组列表
			isNewGroup: false, // 是否新建分组
			showCustomGroupInput: false, // 控制自定义分组输入框显示
		};
	},
	computed: {
		// 添加"其他"选项到分组列表
		groupListWithOther() {
			return [
				...this.groupList,
				{
					value: 'other',
					text: '其他分组'
				}
			]
		}
	},
	created() {
		// #ifdef MP-WEIXIN
		// this.initInWeChat();
		this.tabIndex = 1;
		this.isWeChat = true;
		// #endif

		// #ifndef MP-WEIXIN
		this.tabIndex = 0;
		// #endif

		//获取登录用户信息
		// 获取登录用户信息
		if (this.profile == null) {
			this.getProfile();
		} else {
			this.form.tenantId = this.profile.userId;
			this.form.tenantName = this.profile.userName;
			console.log("profile:", JSON.stringify(this.profile)); // 打印出用户ID
		}
		this.getList();

		// 断开Mqtt连接
		this.endMqtt();
		// 获取WIFI信息
		// this.getWifi();
		// if (this.tabIndex == 0) {
		// 	// 发现设备
		// 	this.discoverDevice();
		// }
		this.getGroupList(); // 获取分组列表
	},
	onUnload() {
		clearInterval(this.discoverTimer);
		// 页面卸载时连接mqtt
		this.connectMqtt();
	},
	methods: {
		/* 断开Mqtt消息服务器 */
		async endMqtt() {
			await this.$mqttTool.end();
		},
		/* 连接Mqtt消息服务器 */
		async connectMqtt() {
			if (this.$mqttTool.client == null) {
				console.log('连接mqtt...');
				await this.$mqttTool.connect(this.vuex_token);
			}
		},

		getCurrentLocation() {
			console.log('获取位置函数开始执行');
			uni.getLocation({
				type: 'gcj02', // 尝试使用 gcj02 类型
				success: (res) => {
					console.log('获取位置成功', res);
					this.$set(this.form, 'longitude', String(res.longitude));
					this.$set(this.form, 'latitude', String(res.latitude));
					uni.showToast({
						title: '定位成功',
						icon: 'success'
					});
				},
				fail: (err) => {
					console.error('获取定位失败:', err);
					uni.showToast({
						title: '定位失败',
						icon: 'none'
					});
				}
			});

		},

		phoneadddevice() {
			// 验证分组信息
			if (this.form.groupId === 'other' && !this.form.groupName) {
				uni.showToast({
					icon: 'none',
					title: '请输入新分组名称'
				});
				return;
			}

			if (!this.form.groupId && !this.form.groupName) {
				uni.showToast({
					icon: 'none',
					title: '请选择或输入分组'
				});
				return;
			}

			// 如果选择了"其他分组"，先创建新分组
			if (this.form.groupId === 'other') {
				this.createNewGroup().then(newGroupId => {
					if (newGroupId) {
						this.form.groupId = newGroupId; // 使用新分组的ID
						this.addDeviceToGroup(); // 添加设备并分组
					} else {
						uni.showToast({
							icon: 'none',
							title: '创建分组失败'
						});
					}
				});
			} else {
				this.addDeviceToGroup(); // 直接添加设备并分组
			}
		},

		// 创建新分组
		async createNewGroup() {
			try {
				const newGroup = {
					groupName: this.form.groupName
				};
				const res = await addGroup(newGroup); // 调用 addGroup API
				if (res.code === 200) {
					// 重新获取分组列表
					await this.getGroupList();
					
					// 从分组列表中查找新创建的分组
					const newGroupItem = this.groupList.find(item => item.text === this.form.groupName);
					if (newGroupItem) {
						return newGroupItem.value; // 返回新分组的 ID
					} else {
						console.error('新分组未在分组列表中找到:', this.form.groupName);
						return null;
					}
				} else {
					console.error('API 返回错误:', res);
					return null;
				}
			} catch (error) {
				console.error('创建分组错误:', error);
				return null;
			}
		},

		// 添加设备并分组
		addDeviceToGroup() {
			addDevice(this.form).then(res => {
				if (res.code === 200) {
					const newDeviceId = parseInt(res.data.deviceId || res.data);

					if (this.form.groupId && this.form.groupId !== 'other') {
						const deviceGroup = {
							groupId: this.form.groupId,
							deviceIds: [newDeviceId]
						};

						updateDeviceGroups(deviceGroup).then(response => {
							if (response.code === 200) {
								uni.showToast({
									icon: 'none',
									title: '设备添加并分组成功'
								});
							} else {
								uni.showToast({
									icon: 'none',
									title: '设备分组失败'
								});
							}
						}).catch(error => {
							console.error('分组更新错误:', error);
							uni.showToast({
								icon: 'none',
								title: '设备分组失败'
							});
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '添加成功'
						});
					}

					uni.reLaunch({
						url: '/'
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '添加失败，请重试'
					});
				}
			}).catch(error => {
				console.error(error);
				uni.showToast({
					icon: 'none',
					title: '网络错误，请稍后再试'
				});
			});
		},

		getList() {
			getProductList(this.queryParams)
				.then(res => {
					const {
						rows,
						total
					} = res;
					console.log(JSON.stringify(res))
					// 将 productId 作为 value，productName 作为 text
					const productList = rows.map(item => ({
						value: item.productId,
						text: item.productName
					}));

					this.list = this.list.concat(productList); // 将新数据拼接到 list 中
					this.total = total; // 更新总数
					console.log(JSON.stringify(this.list)); // 打印 list 数据
				})
				.catch(err => {
					console.log(err);
				});
		},



		handleProductChange(selected) {
			console.log('Selected Value:', selected)
			const selectedItem = this.list.find(item => item.value === selected);
			if (selectedItem) {
				this.form.productName = selectedItem.text;
				console.log('Product Name:', selectedItem.text);
			} else {
				console.log('Selected item not found in list.');
			}
		},






		// 获取登录用户信息
		getProfile() {
			// 调用用户信息接口
			getProfile().then(res => {
				// 打印回复信息
				console.log("Response:", JSON.stringify(res));

				// 存储用户信息，TODO 需要调用一次，不然其他页面调用返回空
				console.log("Profile Data:", JSON.stringify(res.data));

				uni.$u.vuex('profile', res.data);

				// 更新 this.profile
				this.profile = res.data;

				// 设置用户ID
				this.form.userId = this.profile.userId;
				console.log("User ID:", this.profile.userId); // 打印出用户ID
			}).catch(err => {
				this.$u.toast(err.msg);
			});
		},

		// 单击选显卡
		tabClick(item) {
			this.tabIndex = item.index;
			if (this.tabIndex == 0) {
				// 发现设备
				this.discoverDevice();
			} else {
				// 清除发现设备定时器
				clearInterval(this.discoverTimer);
			}
		},
		// 返回
		goBack() {
			getApp().globalData.operate = 'operate';
			uni.navigateBack({
				delta: 1
			});
		},
		// 扫码
		// 扫码
		openScan(item) {
			// #ifndef MP-WEIXIN || APP-PLUS
			uni.showToast({
				icon: 'none',
				title: this.$tt('user.scanning')
			});
			return;
			// #endif

			// 允许从相机和相册扫码
			uni.scanCode({
				success: res => {
					console.log(JSON.stringify(regosu));
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					// if (res.result.substr(0, 1) != '{') {
					// 	console.log('坑点：解析二维码后第一个位置包含一个特殊字符，大部分编译器和调试工具识别不了这个特殊字符');
					// 	res.result = res.result.substring(1);
					// }
					// 解析JSON
					try {
						// 使用分号分割字符串并获取第一项
						let resultArray = res.result.split(';');
						this.form.serialNumber = resultArray[0]; // 取第一项赋值给serialNumber

						// 显示成功提示
						uni.showToast({
							icon: 'none',
							title: '扫码成功'
						});
					} catch (error) {
						uni.showToast({
							icon: 'none',
							title: '解析二维码失败'
						});
					}
				}
			});
		},

		// 获取分组列表
		async getGroupList() {
			try {
				// 创建查询参数
				const query = {
					pageNum: 1,
					pageSize: 100  // 设置一个较大的数值以获取所有分组
				};

				const res = await getGroupList(query);
				if (res.code === 200) {
					// 转换数据格式为 uni-data-select 所需的格式
					this.groupList = res.rows.map(item => ({
						value: item.groupId,
						text: item.groupName
					}));

					console.log('分组列表：', this.groupList); // 调试用
				} else {
					uni.showToast({
						icon: 'none',
						title: '获取分组列表失败'
					});
				}
			} catch (error) {
				console.error('获取分组列表错误:', error);
				uni.showToast({
					icon: 'none',
					title: '获取分组列表失败'
				});
			}
		},

		// 处理分组选择变化
		handleGroupChange(value) {
			console.log('选择的值：', value); // 调试用
			if (value === 'other') {
				this.showCustomGroupInput = true;
				this.form.groupId = '';
				this.form.groupName = '';
			} else {
				this.showCustomGroupInput = false;
				this.form.groupId = value;
				const selectedGroup = this.groupList.find(item => item.value === value);
				if (selectedGroup) {
					this.form.groupName = selectedGroup.text;
				}
			}
		},

		// 处理分组名称输入
		handleGroupNameInput(value) {
			if (value) {
				this.form.groupId = ''; // 清空选择的分组ID
			}
		},

	},

};
</script>

<style lang="scss">
page {
	// background: #eef3f7;
	background: linear-gradient(30deg, #46e9a9 30%, #007aff 70%);
	background-size: 100% 100%;
	background-attachment: fixed;
}

.container {
	padding-bottom: 50px;
}

.card {
	box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	background-color: #fff;
	margin: 10px;
	margin-bottom: 15px;
	padding: 15px 10px;
}
</style>