<template>
	<view class="share">
		<!-- 下拉刷新区域 -->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
			<view class="device-title">已分享用户</view>
			<view class="" v-if="deviceList.length>0">
				<view class="device-info" v-for="(item, index) in deviceList" :key="index">
					<view class="device-header" @click.stop="handleFile(item)">
						<view class="deviceIMG">
							<image src="@/static/images/common/user.png" mode="aspectFit" class="IMG"></image>
						</view>
						<view class="device-name">
							<view>用户名：{{item.deviceName}}</view>
							<view class="ID">
								<view class="ID">{{item.phonenumber}}
								</view>
							</view>
						</view>
						<view class="device-delete">
							<text class="delete" @click.stop="handleDelete(item)">移除</text>
						</view>
					</view>
				</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>
		</mescroll-uni>
		
		<!-- 删除弹框 -->
		<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
			<view class="agreement-popup" @click.stop>
				<view class="popup-content">
					<image src="/static/images/common/delel.png" mode="" class="svg"></image>
					<uni-icon class="trash"></uni-icon>
					<view>
						<view class="popup-Title">确定移除该用户！</view>
					</view>
				</view>
				<!-- 按钮组 -->
				<view class="popup-buttons">
					<button class="btn agreeBtn" @click="handleBtn">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deviceShareList,
		deviceShareDelete
	} from '@/api/6170/share.js'
	import MescrollUni from 'mescroll-uni/mescroll-uni.vue'
	
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				deviceList: [],
				deleteShow: false,
				delelteItemInfo: '',
				itemInfo: '',
				mescroll: null, // mescroll实例对象
				downOption: {
					auto: false // 不自动加载
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据
					empty: {
						tip: '暂无相关数据'
					}
				},
				page: 1, // 当前页码
				size: 10, // 每页条数
				total: 0 // 总数据量
			}
		},
		methods: {
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新的回调
			downCallback() {
				// 重置分页参数
				this.page = 1;
				this.getData(this.itemInfo.id).then(res => {
					// 数据请求成功后,隐藏下拉刷新的状态
					this.mescroll.endSuccess();
				}).catch(() => {
					// 请求失败,隐藏下拉刷新的状态
					this.mescroll.endErr();
				})
			},
			// 上拉加载的回调
			upCallback() {
				this.getData(this.itemInfo.id).then(res => {
					// 根据是否有数据来决定是否显示无更多数据的提示
					const hasNext = this.deviceList.length < this.total;
					this.mescroll.endSuccess(this.deviceList.length, hasNext);
				}).catch(() => {
					// 请求失败,隐藏上拉加载的状态
					this.mescroll.endErr();
				})
			},
			// 点击弹框外的区域关闭
			closePopup(type) {
				if (type === 'delete') {
					this.deleteShow = false;
				}
			},
			// 删除
			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.page = 1;
						this.getData(this.itemInfo.id).then(() => {
							this.mescroll.resetUpScroll();
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getData(val) {
				return new Promise((resolve, reject) => {
					let data = {
						deviceId: val,
						pageNum: this.page,
						pageSize: this.size,
					}
					deviceShareList(data).then((res) => {
						if (res.code == 200) {
							this.total = res.total;
							if (this.page === 1) {
								// 如果是第一页，直接替换数据
								this.deviceList = res.rows;
							} else {
								// 如果不是第一页，追加数据
								this.deviceList = this.deviceList.concat(res.rows);
							}
							resolve(res);
						} else {
							reject(res);
						}
					}).catch(err => {
						reject(err);
					})
				})
			},
			// 跳转分享详情
			handleFile(item) {
				let url = item.detailPageUrl;
				console.log(item,'item');
				uni.navigateTo({
					url: url,
					success: (res) => {
						// 页面跳转成功后的回调函数
						res.eventChannel.emit('detailData', {
							data: item,
							apiType: 'listB' // 自定义标识 // 自定义标识，详情哪里根据这个参数不同信息
						});
					}
				})
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			// 监听 'shareDevice' 事件，获取传过来的数据
			eventChannel.on('shareManagement', (data) => {
				console.log(data, 'data1t111');
				this.itemInfo = data.data;
				// 初始化加载数据
				this.page = 1;
				this.getData(this.itemInfo.id).then(() => {
					// 数据加载完成后，如果需要可以手动触发下拉刷新结束
					if (this.mescroll) {
						this.mescroll.endSuccess();
					}
				})
			})
		}
	}
</script>

<style scoped>
	.share {
		padding: 30rpx;
		background: #121212;
		min-height: 100vh;
	}

	.device-title {
		color: rgba(255, 255, 255, 0.87);
		padding: 30rpx;
	}

	.device-info {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.87);
		padding-top: 10rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

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

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

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

	.deviceIMG {
		/* 	width: 100rpx; */
		/* 		height: 100rpx; */
		position: relative;
		display: flex;
		align-items: center;
	}

	.device-delete {
		text-align: end;
		width: 50%;
	}

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

	.delete {
		border-radius: 32px;
		background: rgba(255, 200, 78, 0.06);
		display: inline-block;
		width: 152rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: rgba(224, 52, 52, 1);
		cursor: pointer;
	}

	.IMG {
		width: 120rpx;
		height: 100rpx;
		margin-left: 17%;
	}

	.title {
		font-size: 18px;
		color: white;
	}

	.device-info {
		width: 100%;
		padding: 10px;
		background: rgba(26, 26, 26, 1);
		border-radius: 16rpx;
	}

	/* 遮罩层 */
	.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: 60%;
		background: rgba(56, 57, 52, 0.4);
		border-radius: 40rpx;
		padding: 30rpx;
		text-align: center;
		border: 1px solid rgba(224, 52, 52, 0.3);
	}

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

	/* 通用按钮样式 */
	.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;
	}
</style>