<template>
<view class="view-page" :style="{backgroundImage : `url('${ThemeData?.app_bg ?? $config.PRIMARY_BGURL}')`}">
		<navBar :style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}"
			:navTitle="'公会中心'" :emitBack="true" @backEvent="back">
			<template #rightView>
				<view v-if="isMerber" @click="jumpMineUnion" class="font-24 minUnicon" style="white-space: nowrap">
					我的公会
				</view>
			</template>
		</navBar>
		<view class="content">
			<view class="flex-input">
				<uni-easyinput type="number" prefixIcon="search" clearSize="18" v-model="searchValue"
					placeholder="请输入公会ID">
				</uni-easyinput>
				<view class="search-button" @click="search">
					搜索
				</view>
			</view>
			<view class="swipe-view">

			</view>
			<view class="title">
				热门公会
			</view>
			<view class="hotspot-view">
				<view class="hotspot-box" v-for="data in listData" :key="data.id" @click="viewDetails(data)">
					<view class="flex-line">
						<view class="head-portrait">
							<img :src="data.cover || logo" alt="" />
						</view>
						<view class="info-box ml-20">
							<view class="flex-line">
								<span class="truncate">{{data.guild_name}}</span><span
									class="id-title">ID:{{data.guild_special_id}}</span>
								<img @click.stop="copyData(data.guild_special_id)" class="icon-box"
									src="@/static/image/union/copy.png" alt="" />
							</view>
							<view class="subhead-title truncate">
								{{data.intro}}
							</view>
							<view class="chairman">
								<view class="chairman-portrait">
									<img :src="data.user_avatar" alt="暂无头像" />
								</view>
								<view class="truncate-three">
									{{data.user_name}}
								</view>
							</view>
						</view>
					</view>
					<view class="right-button">
		<!-- 				<view class="apply-button">
							申请
						</view> -->
						<view class="online-view">
							<div v-show="data.guild_user_list.length">
								<div class="avatars-container" v-for="ele in data.guild_user_list.slice(0,3)" :key="ele.id">
									<view class="avatar">
										<img :src="ele.avatar" alt="" />
									</view>
								</div>
								<view class="online-people truncate-three">
									{{data.num}}人
								</view>
							</div>

						</view>
					</view>
				</view>
				<uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/component/nav.vue';
	import http from '@/until/http.js';
	import logo from '@/static/image/logo.png';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				searchValue: '',
				logo,
				loading: false,
				noMore: false,
				pageConfig: {
					pageSize: 5,
					currentPage: 1,
					total: 2
				},
				isMerber: null,
				listData: [],
				UnionByUser: null,
				statusBarHeight: 0,
				ThemeData:null
			}
		},
		onLoad(options) {
			const {
				id,
				h
			} = options
			uni.setStorageSync('token', id || '14a62bb9dac0eebf7fb9643639a7e172')
			if (uni.getStorageSync('token')) {
				this.getList()
				this.getInfo()
			}
			this.statusBarHeight = h
			uni.setStorageSync('BarHeight', h)
			if(uni.getStorageSync('Theme_Data')) {
				this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
			}
		},
		onReachBottom() {
			if (!this.loading && !this.noMore) {
				this.getList()
			}
		},
		methods: {
			// 关闭当前公会中心页面
			back() {
				this.closeWeb()
			},
			search() {
				this.pageConfig.currentPage = 1
				this.listData = []
				this.getList()
			},
			closeWeb() {
				const platform = uni.getSystemInfoSync().platform;
				// console.log(platform, '打印设备参数')
				if (platform === 'ios') {
					console.log('调用iOS原生方法')
					// 通过 messageHandlers 调用 iOS 原生方法
					window.webkit.messageHandlers.nativeHandler.postMessage({
						'action': 'closeWeb'
					});
				} else if (platform === 'android') {
					console.log('调用Android原生方法')
					// 调用 Android 原生方法
					window.Android.closeWeb();
				}
			},
			async getInfo() {
				http.get('/api/Guild/is_guild_member', {
					token: uni.getStorageSync('token') ?? ''
				}).then(response => {
					const {
						data,
						code
					} = response
					this.isMerber = code ? data : false
					this.UnionByUser = code ? data.guild_id : 0
				}).catch(error => {
					this.isMerber = false
					this.UnionByUser = null
				});
			},
			async getList() {
				this.loading = true
				http.get('/api/Guild/guild_list', {
					page: this.pageConfig.currentPage,
					limit: this.pageConfig.pageSize,
					search_id: this.searchValue,
					token: uni.getStorageSync('token') ?? ''
				}).then(response => {
					const {
						data,
						code
					} = response
					if (code) {
						this.pageConfig.total = data.count
						this.loading = false
						const newData = data.list || []
						if (newData.length === 0) {
							this.noMore = true
							return
						}
						this.listData = [...this.listData, ...newData]
						this.pageConfig.currentPage++
						if (this.listData.length === this.pageConfig.total) {
							this.noMore = true
							return
						}
					}
				}).catch(error => {
					this.loading = false
				});
			},
			// 点击公会详情
			viewDetails(data) {
				uni.navigateTo({
					url: `/pages/union/detail?id=${data.id}`
				});
			},
			// 跳转到我的公会
			jumpMineUnion() {
				uni.navigateTo({
					url: `/pages/union/detail?id=${this.UnionByUser}`
				});
			},
			copyData(text) {
				if(text) {
					
					if (uni.getSystemInfoSync().platform === 'h5') {
						const textarea = document.createElement('textarea');
						textarea.value = text;
						document.body.appendChild(textarea);
						textarea.select();
						document.execCommand('copy');
						document.body.removeChild(textarea);
					
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
						return;
					} else {
						uni.setClipboardData({
							data: text,
							success: () => {
								uni.showToast({
									title: '已复制到剪贴板',
									icon: 'none',
									duration: 1500
								});
							},
							fail: () => {
								uni.showToast({
									title: '复制失败，请重试',
									icon: 'none'
								});
							}
						});
					}
				} else {
					uni.showToast({
						title: '暂无可复制文本',
						icon: 'none'
					});
				}


			}
		}
	}
</script>

<style lang="scss">
	.view-page {
		// padding: 32rpx;
		// min-height: 100vh;
		min-height: 100vh;
		font-family: Source Han Sans CN, Source Han Sans CN;
		// background-image: url('@/static/image/help/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		.minUnicon{
			color: var(--primary-color);
		}
		.content {
			padding: 0 32rpx;
		}

		.avatar {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			position: absolute;
			border: 2px solid white;
			/* 白色边框 */
			background-size: cover;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
			transition: all 0.4s ease;

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		/* 头像位置 */
		.avatar:nth-child(1) {
			left: calc(50% - 60rpx);
			z-index: 3;
		}

		.avatar:nth-child(2) {
			left: calc(50% - 35rpx);
			z-index: 2;
		}

		.avatar:nth-child(3) {
			left: calc(50% - 10rpx);
			z-index: 1;
		}

		/* 悬停效果 */
		.avatar:hover {
			transform: translateY(-10px);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
			z-index: 10;
		}

		/* 搜索框 */
		.flex-input {
			width: 100%;
			display: inline-flex;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;

			.search-button {
				padding: 0 0 0 20rpx;
			}
		}

		/* 轮播图 */
		.swipe-view {
			width: 100%;
			height: 200rpx;
			background-color: antiquewhite;
			border-radius: 14rpx;
			margin-top: 36rpx;
			background-image: url('/static/image/swiper.jpg');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.title {
			padding: 24rpx 0;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}

		/* 热门公会 */
		.hotspot-view {
			.hotspot-box {
				width: calc(100% - 48rpx);
				padding: 24rpx;
				// min-height: calc(268rpx - 48rpx);
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 24rpx;
				/* */
				display: inline-flex;
				align-items: center;
				flex-wrap: nowrap;
				justify-content: space-between;
				flex-direction: row;

				/* 头像 */
				.head-portrait {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;

					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				/* 中间信息 */
				.info-box {
					padding: 0 24rpx;

					// width: 55%;
					.icon-box {
						width: 20rpx;
						height: 20rpx;
						margin-left: 5rpx;
					}

					/* 会长样式 */
					.chairman {
						width: 106rpx;
						height: 36rpx;
						padding: 0 12rpx;
						color: #fff;
						font-size: 24rpx;
						text-align: right;
						background: var(--subss-color);
						border-radius: 116rpx 116rpx 116rpx 116rpx;
						border: 2rpx solid var(--subss-color);
						position: relative;
						left: 10rpx;
						margin: 32rpx 0;
						.truncate-three{
							text-align: left;
						}
						.chairman-portrait {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							border: 2rpx solid #FFFFFF;
							position: absolute;
							top: -10rpx;
							left: -20rpx;

							img {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
					}

					.id-title {
						font-size: 24rpx;
						color: #666666;
						margin-left: 24rpx;
					}

					.subhead-title {
						display: block;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						margin: 8rpx 0;
					}

					.like-box {
						display: inline-flex;
						align-items: center;
						flex-wrap: nowrap;
						flex-direction: row;
						padding: 6rpx 24rpx;
						background: #2AFEC0;
						border-radius: 35rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						margin: 8rpx 0;
					}
				}

				/* 右边按钮 */
				.right-button {
					text-align: center;
					.apply-button {
						display: inline-block;
						background: var(--primary-color);
						font-size: var(--font-button-size);
						color: var(--font-button-color);
						border-radius: 68rpx;
						text-align: center;

						padding: 4rpx 30rpx;
					}

					.online-view {
						// display: inline-block; 
						margin-top: 24rpx;
						padding: 12rpx 8rpx;
						text-align: right;
						width: 160rpx;
						height: 44rpx;
						line-height: 44rpx;
						// background: #333333;
						border-radius: 92rpx 92rpx 92rpx 92rpx;
						position: relative;

						.avatars-container {
							position: absolute;
							top: 10rpx;
							left: 40%;
						}

						.online-people {
							color: rgba(0, 0, 0, 0.5);
							font-size: 24rpx;
							text-align: left;
						}
					}
				}
			}
		}
	}
</style>