<template>
	<view>
		<view class="device-page">
			<scroll-view class="tab-bar" scroll-x="true" scroll-with-animation>
				<view class="tab-container">
					<view v-for="(tab, index) in tabs" :key="index"
						:class="['tab-item', activeTab === index ? 'active' : '']" @click="switchTab(tab,index)">
						{{tab.name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100"
				style="height:80vh">
				<view v-if="deviceList.length>0">
					<view v-for="(group, groupIndex) in groupedDevices" :key="groupIndex">
						<view class="share-header">
							<text>{{
									  tabs[activeTab].name === '我的分享' 
										? `分享给“${group.sharedTo}”的设备` 
										: `来自“${group.sharedTo}”分享的设备`
									}}</text>
							<text class="edit-btn"
								@click="toggleEdit(groupIndex)">{{editingGroup === groupIndex ? '完成' : '编辑'}}</text>
						</view>
						<block>

							<view class="device-card" v-for="(item, index) in group.devices" :key="index"
								:ref="'swipeItem_' + index">
								<view class="checkbox" v-if="editingGroup === groupIndex">
									<uni-icons @click="handleDelete(item)" type="minus" size="20"
										color="#FF4D4F"></uni-icons>
								</view>
								<view class="device-content" @click.stop="handleFile(item)">
									<view class="device-header">
										<view class="deviceIMG">
											<image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
										</view>
										<view class="device-name">
											<view>设备:{{item.deviceName}}</view>
											<view class="ID">
												<view class="ID">
													ID:{{item.deviceImei}}</view>
												<!-- 在线状态 -->
												<view class="onlines"
													v-if="item.onlineStatus==1">在线</view>
												<!-- 离线状态 -->
												<view class="offlines"
													v-if="item.onlineStatus==0">离线</view>
												<view>电量：{{item.battery || '0'}}%</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
					<!-- 加载状态提示 -->
					<!-- 	<view class="loading-status">
						<text v-if="loading">加载中...</text>
						<text v-if="finished">没有更多数据了</text>
					</view> -->
				</view>
				<view v-else class="noDATA">
					<view>
						<uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons>
					</view>
					暂无数据
				</view>
			</scroll-view>
		</view>
		<!-- 删除弹框 -->
		<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
			<view class="agreement-popupC" @click.stop>
				<view class="popup-content">
					<image src="/static/images/common/delel.png" class="svg" mode="aspectFit"></image>
					<uni-icon class="trash"></uni-icon>
					<view class="popup-Title">
						{{ tabs[activeTab].name === '我的分享' ? '确定停止分享该设备' : '确定移除他人分享给你的这台设备' }}
					</view>
				</view>
				<!-- 按钮组 -->
				<view class="popup-buttons">
					<button class="btn agreeBtn" @click="handleBtn">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deviceShareList,
		otherDeviceShareList,
		deviceShareDelete
	} from '@/api/6170/share.js'
	export default {
		data() {
			return {
				deviceList: [],
				tabs: [{
						name: '我的分享',
					},
					{
						name: '他人分享',
					},
				],
				activeTab: 0,
				deleteShow: false,
				page: 1, // 当前页码
				size: 10, // 每页条数
				total: 0, // 总数据量
				loading: false,
				finished: false,
				deviceId: '',
				editingGroup: null, // 编辑的分组索引
				currentGroup: null // 当前操作的分组
			}
		},
		computed: {
			// 根据分享用户分组设备
			groupedDevices() {
				const groups = {};
				this.deviceList.forEach(device => {
					// 这里假设device.sharedTo是分享目标的手机号
					const key = device.sharedTo || '未分享';
					if (!groups[key]) {
						groups[key] = {
							sharedTo: key,
							devices: []
						};
					}
					groups[key].devices.push(device);
				});
				return Object.values(groups);
			},

		},
		methods: {
			// 点击弹框外的区域关闭
			closePopup(type) {
				if (type === 'delete') {
					this.deleteShow = false;
				}
			},
			// 跳转到详情页面
			handleFile(item) {
				uni.navigateTo({
					url: "/pages/6170/deviceControl/index",
					success: (res) => {
						// 页面跳转成功后的回调函数
						res.eventChannel.emit('deviceControl', {
							data: item,
							apiType: 'listB' // 自定义标识 // 自定义标识，详情哪里根据这个参数不同信息
						});
					}
				})

			},

			// 编辑
			toggleEdit(groupIndex) {
				if (this.editingGroup === groupIndex) {
					this.editingGroup = null;
				} else {
					this.editingGroup = groupIndex;
				}
			},
			// 停止分享
			handleDelete(item) {
				console.log(item, 'www');
				this.deleteShow = true
				this.delelteItemInfo = item
			},
			// 确认停止移除
			handleBtn() {
				let allId = this.delelteItemInfo.id
				deviceShareDelete(allId).then((res) => {
					if (res.code = 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.deleteShow = false
						this.editingGroup = null;
						this.onIntall()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				})
				//
			},
			// tab切换页
			switchTab(tab, index) {
				//console.log(tab, 'tabsss');
				this.deviceList = [];
				this.activeTab = index;
				this.page = 1; // 重置页
				this.getData(tab);
			},
			// 获取设备列表
			getData(tab) {
				//console.log(tab.name, 'tab');
				if (this.loading) return;
				this.loading = true;
				let data = {
					pageNum: this.page,
					pageSize: this.size,
				}
				// 根据当前tab决定调用哪个接口
				const apiCall = tab.name === '我的分享' ? deviceShareList : otherDeviceShareList;
				console.log('nihao');
				apiCall(data).then((res) => {
					if (res.code == 200) {
						const newDevices = res.rows.map(device => ({
							...device,
							showConfirm: false,
							sharedTo: device.phonenumber || '未分享'
						}));
						// 分页处理
						if (this.page === 1) {
							this.deviceList = newDevices;
						} else {
							this.deviceList = [...this.deviceList, ...newDevices];
						}

						this.total = res.total;
						// 判断是否已加载全部数据
						if (res.rows.length < this.size || this.deviceList.length >= this.total) {
							this.finished = true;
						} else {
							this.page++;
						}
					}
				}).finally(() => {
					this.loading = false;
				});


			},
			// 滚动触底事件处理
			onScrollToLower() {
				this.getData();
			},
			onIntall() {
				this.page = 1;
				const currentTab = this.tabs[this.activeTab];
				this.getData(currentTab);
			},
		},
		onLoad() {
			this.onIntall()
			// 绑定页面做了监听,新增成功,刷新页面
			uni.$on('refreshDeviceList', () => {
				this.onIntall()
			});
		},
		beforeDestroy() {
			// 组件销毁前移除监听器
			uni.$off('refreshDeviceList');
		},
	}
</script>

<style>
	/* 页面整体样式 */
	.device-page {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: rgb(18, 18, 18);
		padding: 30rpx;
	}

	.tab-bar {
		width: 100%;
		color: rgb(255, 255, 255);
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		position: relative;

	}

	.tab-container {
		display: flex;
		/* justify-content: space-around; */
		cursor: pointer;
		margin-bottom: 40rpx;
		/* 	min-width: 100%; */
		/* 最小宽度 */
	}

	.tab-item {
		font-size: 28rpx;
		/* 	min-width: 120rpx; */
		padding: 0 30rpx;
		/* 左右内边距 */
		text-align: center;
		/* 文字居中 */
		/* 设置最小宽度 */
	}

	.active {
		color: rgba(187, 230, 0, 1);
		border-bottom: 6rpx solid rgba(187, 230, 0, 1);
		height: 60rpx;
	}

	/* 设备卡片 */
	.device-card {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
	}

	.device-content {
		background-color: rgb(26, 26, 26);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		position: relative;
		padding: 20rpx;
		width: 100%;

	}

	.device-header {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}


	.device-name {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.87);
		margin-left: 24rpx;
		line-height: 50rpx;
		width: 78%;
		white-space: nowrap;
	}

	.ID {
		color: rgba(255, 255, 255, 0.6);
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		position: relative;

	}

	.circle {
		width: 8rpx;
		height: 40rpx;
		position: absolute;
		right: 25rpx;
		top: 60rpx;
	}

	.online {
		color: rgb(187, 230, 0);
	}

	.deviceIMG {
		width: 100rpx;
		height: 100rpx;
		border-radius: 16rpx;
		position: relative;
		background-color: rgba(42, 42, 42, 0.6);
		display: flex;
		align-items: center;
	}

	.IMG {
		width: 68rpx;
		height: 50rpx;
		margin-left: 17%;
		object-fit: contain;
	}

	.onlines {
		position: relative;
	}

	.onlines::before {
		content: '';
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		background: rgb(0, 171, 103);
		border-radius: 50%;
		top: 20rpx;
		left: -20rpx
	}

	.line {
		width: 2rpx;
		height: 24rpx;
		background: linear-gradient(90deg,
				rgba(0, 0, 0, 0) 0%,
				rgb(255, 255, 255) 50%,
				rgba(255, 255, 255, 0) 100%);
		margin-top: 12rpx;
	}

	.loading-status {
		text-align: center;
		color: rgba(255, 255, 255, 0.6);
		padding: 20rpx;
		font-size: 22rpx;
	}

	.noDATA {
		text-align: center;
		color: rgba(255, 255, 255, 0.87);
		transform: translate(-0%, 100%);
	}

	.share-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(255, 255, 255, 0.6);
		font-size: 28rpx;
		margin-bottom: 20rpx;
		margin-top: 1rpx;
	}

	.edit-btn {
		color: rgba(255, 255, 255, 0.6);
		font-size: 26rpx;
	}

	/* 遮罩层 */
	.agreement-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.popup-Title {
		color: rgba(255, 255, 255, 0.86);
		text-align: center;
		padding: 30rpx 0rpx;
	}

	.popup-buttons {
		display: flex;
		text-align: center;
	}

	/* 弹窗主体 */
	.agreement-popup {
		width: 100%;
		height: 50%;
		background-color: rgb(42, 42, 42);
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		padding: 40rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: 0rpx;
	}

	.agreement-popupC {
		width: 65%;
		background: rgba(56, 57, 52, 0.4);
		border-radius: 40rpx;
		padding: 30rpx;
		text-align: center;
		border: 1px solid rgba(224, 52, 52, 0.3);
	}

	.popup-flex {
		display: flex;
		white-space: nowrap;
		color: rgba(255, 255, 255, 0.87);
		height: 50rpx;
		padding: 30rpx;
		align-items: center;
	}

	.popup-input {
		border: 1px solid rgba(255, 255, 255, 0.4);
		border-radius: 12rpx;
		margin-left: 15rpx;
		padding: 10rpx 0rpx;
		font-size: 28rpx;
	}

	.svg {
		width: 58rpx;
		height: 62rpx;
	}

	/* 通用按钮样式 */
	.btn {
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		margin: 10rpx auto;
		text-align: center;

	}

	/* 同意按钮 */
	.agreeBtn {
		background: rgba(224, 52, 52, 1);
		color: rgba(255, 255, 255, 0.87);
		border: none;
		width: 170rpx !important;
	}

	.closeBtn {
		border: 1px solid rgba(255, 255, 255, 0.2);
		background-color: rgba(35, 35, 35, 0.87);
		color: rgba(255, 255, 255, 1);
	}
</style>