<template>
	<view class="view-page" >
		<headerHeight />
		<navBar :navTitle="'公会详情'">
			<template #rightView>
				<view class="icon-right flex-line" @click="exit"
					v-if="detailData && detailData.is_join && detailData.is_leader === 0">
					<img :src="logout" alt="" />
				</view>
			</template>
		</navBar>
		<view class="content" v-if="detailData">
			<view class="union-info">
				<view class="left-view">
					<view class="head-portrait">
						<img :src="detailData.cover || logo" alt="" />
					</view>
					<view class="info-detail">
						<view class="union-title">
							{{detailData.guild_name}}
						</view>
						<view class="union-id">
							ID:{{detailData.guild_special_id}}
						</view>
						<view class="union-date">
							{{detailData.createtime}}
						</view>
					</view>
				</view>
				<view class="like-box">
					<uni-icons type="heart" size="20"></uni-icons>
					<span class="ml-6">
						{{detailData.total_transaction}}
					</span>
				</view>
			</view>
			<!-- 公会按钮 是会长可以看公会成员 不是不能看 -->
			<view class="icon-wrap">
				<img class="icon-box" @click.stop="viewDetails(0)" src="@/static/image/union/ghfj.png" alt="" />
				<img class="icon-box" @click.stop="viewDetails(1)" src="@/static/image/union/ghcy.png" alt="" />
				<img class="icon-box" v-if="detailData.is_leader" @click.stop="viewDetails(2)"
					src="@/static/image/union/ghbt.png" alt="" />
				<img class="icon-box"  v-if="detailData.is_join" @click.stop="viewDetails(3)"
					src="@/static/image/union/qlsz.png" alt="" />
			</view>
			<!-- 公会会长信息 -->
			<view class="union-user">
				<view class="user-title">
					公会会长
				</view>
				<view class="user-info" @click="jumpHomePage(detailData)">
					<view class="flex-line">
						<view class="head-portrait">
							<img :src="detailData.user_data.avatar" alt="" />
						</view>
						<view class="info-view">
							<view class="">
								{{detailData.user_data.nickname}}
							</view>
							<view class="iconTag-view"
								v-if="detailData.user_data.icon || detailData.user_data.icon.length">
								<view class="icon-tag" v-for="icon in detailData.user_data.icon" :key="icon">
									<img :src="icon" alt="" />
								</view>
							</view>
						</view>
					</view>
					<view class="">
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 公会介绍 -->
			<view class="union-dec">
				<view class="user-title">
					公会介绍
				</view>
				<view class="user-dec">
					{{detailData.intro || '暂无数据'}}
				</view>
			</view>
			<view class="footer" v-if="!detailData.is_join">
				<view class="confirm-button" @click="applyToJoin">
					<view class="button">
						{{buttonText}}
					</view>
				</view>
			</view>
			<view class="footer" v-if="detailData.is_leader">
				<view class="confirm-button" @click="dissolveUnion">
					<view class="button">
						{{buttonText}}
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popup" type="center">
			<view class="popup_view">
				<view class="color-3 font-32 popup_title">
					温馨提示
				</view>
				<view class="color-3 font-24 messageContent">
					{{messageContent}}
				</view>
				<view class="popup_button flex-line">
					<view class="close_button flex-line" @click="closePopup">
						取消
					</view>
					<view class="confirm-button flex-line" @click="confirmPopup">
						确认
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import headerHeight from '@/component/headerHeight.vue';
	import navBar from '@/component/nav.vue';
	import http from '@/until/http.js';
	import logout from '@/static/image/union/logout.png'
	import logo from '@/static/image/logo.png';
	export default {
		components: {
			headerHeight,
			navBar
		},
		data() {
			return {
				detailData: null,
				logo,
				logout,
				buttonStatus: null,
				buttonText: '申请加入公会',
				// 弹出窗状态 null 不展示 0 申请退出 1申请加入公会 2 付费退出 3实名认证
				popupStstus: null,
				messageText: "",
				messageContent: '',
				msgType: "success"
			}
		},
		onLoad(options) {
			const {
				id
			} = options
			if (id) {
				this.getDetail(id)
				this.getUserInfo()
			}
		},
		methods: {
			// 获取用户信息 拿实名信息
			async getUserInfo() {
				http.get('/api/User/get_user_info', {
					token: uni.getStorageSync('token') ?? ''
				}).then(response => {
					const {
						data,
						code
					} = response
					this.isAuth = code ? data.auth : 0
				})
			},
			// 获取公会信息
			async getDetail(Id) {
				uni.showLoading({
					mask:true,
					title:'加载中'
				})
				http.get('/api/Guild/guild_detail', {
					id: Id,
					token: uni.getStorageSync('token') ?? ''
				}).then(response => {
					uni.hideLoading()
					const {
						data,
						code
					} = response
					this.detailData = code ? data : null
					if(data) {
						this.buttonText = !data.is_leader ? data.is_join ? '退出公会' : '申请加入公会' : '解散公会'
						this.buttonStatus = !data.is_leader ? data.is_join ? 0 : 1 : 2
					}
				})
			},
			// 点击房间
			viewDetails(index) {
				// 0 公会房间 1 公会成员 2公会补贴 3 群聊设置
				if (index) {
					if (index === 1) {
						// 公会成员
						uni.navigateTo({
							url: `/pages/union/unionMembers?id=${this.detailData.id?? null}&leader=${this.detailData.is_leader || 0}`
						});
					} else if (index === 2) {
						// 公会补贴
						uni.navigateTo({
							url: `/pages/union/subsidy?id=${this.detailData.id?? null}&leader=${this.detailData.is_leader || 0}`
						});
					} else {
						// 群聊抛出
						const platform = uni.getSystemInfoSync().platform;
						const ParmData = {
							group_id: this.detailData.group_id,
							cover: this.detailData.cover,
							guild_name: this.detailData.guild_name
						}
						if (platform === 'ios') {
							// 通过 messageHandlers 调用 iOS 原生方法
							window.webkit.messageHandlers.nativeHandler.postMessage({
								'action': 'enterGroupChat',
								'data': ParmData
							});
						} else if (platform === 'android') {
							// 调用 Android 原生方法
							window.Android.enterGroupChat(this.detailData.group_id,this.detailData.cover,this.detailData.guild_name);
						}
					}
				} else {
					// 房间
					uni.navigateTo({
						url: `/pages/union/roomAndflow?id=${this.detailData.id?? null}&leader=${this.detailData.is_leader || 0}`
					});
				}
			},
			//申请加入公会
			applyToJoin() {
				if (this.buttonStatus === 1) {
					if (this.isAuth) {
						this.popupStstus = 1
						this.messageContent = "是否选择加入当前公会"
						this.$refs.popup.open('center')
					} else {
						this.popupStstus = 3
						this.messageContent = "当前尚未实名认证，是否跳转到实名认证页面？"
						this.$refs.popup.open('center')
					}
				}
			},
			// 申请加入公会
			async joinUnionize() {
				http.post('/api/Guild/join_guild', {
					guild_id: this.detailData.id,
					token: uni.getStorageSync('token') ?? ''
				}).then(response => {
					const {
						data,
						code,
						msg
					} = response
					if (code) {
						this.messageText = `加入成功`
						this.$refs.message.open()
						this.msgType = 'success'
						this.getDetail(this.detailData.id)
					} else {
						this.messageText = msg
						this.msgType = 'error'
						this.$refs.message.open()
					}
					this.closePopup()
				})
			},
			// 退出公会
			exit() {
				uni.showActionSheet({
					itemList: ["申请退出", "付费退出"],
					success: (res) => {
						if (res.tapIndex === 0) {
							this.applyToWithdraw();
						} else if (res.tapIndex === 1) {
							this.paidWithdrawal();
						}
					},
					fail: (err) => {
						console.error("用户取消选择：", err);
					},
				});
			},
			// 申请退出
			applyToWithdraw() {
				this.popupStstus = 0
				this.messageContent = "亲爱的会员，会长将在3天内审核，若超时未通过，您将自动退出并可加入其他公会；若通过，则30天内无法加入其他公会，是否还需要申请退出？"
				this.$refs.popup.open('center')
			},
			// 付费退出
			paidWithdrawal() {
				this.popupStstus = 2
				this.messageContent = `亲爱的会员，支付${this.detailData.quit_guild_gold || 0}金币，即可及时退出公会！是否需要付费退出？`
				this.$refs.popup.open('center')
			},
			// 解散公会
			dissolveUnion() {
				this.popupStstus = 4
				this.messageContent = `亲爱的会长，您当前操作将解散公会，是否解散？`
				this.$refs.popup.open('center')
			},
			closePopup() {
				this.popupStstus = null
				this.messageContent = ""
				this.$refs.popup.close()
			},
			confirmPopup() {
				if (this.popupStstus !== null) {
					if (this.popupStstus === 0) {
						this.exitUnionize(1)
					} else if (this.popupStstus === 1) {
						this.joinUnionize()
					} else if (this.popupStstus === 2) {
						// 付费退出
						this.exitUnionize(2)
					} else if (this.popupStstus === 3) {
						// 实名认证页面
						this.authConfirm()
					} else if (this.popupStstus === 4) {
						// 解散公会
						if (this.detailData.is_leader) {
							this.unionDissolve()
						}
					}
				}
			},
			authConfirm() {
				// 去实名认证页面
				const platform = uni.getSystemInfoSync().platform;
				if (platform === 'ios') {
					window.webkit.messageHandlers.nativeHandler.postMessage({
						'action': 'enterAuthent'
					});
				} else if (platform === 'android') {
					window.Android.enterAuthent();
				}
			},
			// 跳转公会长个人页面
			jumpHomePage(data){
				const platform = uni.getSystemInfoSync().platform;
				if (platform === 'ios') {
					window.webkit.messageHandlers.nativeHandler.postMessage({
						'action': 'jumpWebPage',
						'data': {
							userId: data.user_id
						}
					});
				} else if (platform === 'android') {
					window.Android.jumpWebPage(data.user_id);
				}
			},
			// 会长解散公会
			async unionDissolve() {
				http.post('/api/Guild/diss_guild', {
					guild_id: this.detailData.id,
					token: uni.getStorageSync('token') ?? ''
				}).then(response => {
					const {
						data,
						code,
						msg
					} = response
					if (code === 1) {
						this.msgType = 'success'
						this.messageText = `操作成功，将返回上一页！`
						this.$refs.message.open()
						uni.navigateBack()
					} else {
						this.messageText = msg
						this.msgType = 'error'
						this.$refs.message.open()
					}
					this.closePopup()
				})
			},
			// 申请退出公会接口
			async exitUnionize(type) {
				http.post('/api/Guild/quit_guild', {
					guild_id: this.detailData.id,
					type: type,
					token: uni.getStorageSync('token') ?? ''
				}).then(response => {
					const {
						data,
						code,
						msg
					} = response
					if (code === 1) {
						this.msgType = 'success'
						this.messageText = `${type === 1 ? '退出申请已提交，请等待审核' : '付费退出成功'}`
						this.$refs.message.open()
						this.getDetail(this.detailData.id)
					} else {
						this.messageText = msg
						this.msgType = 'error'
						this.$refs.message.open()
					}
					this.closePopup()
				})
			}
		}
	}
</script>

<style lang="scss">
	.view-page {
		// padding: 32rpx;
		display: flex;
		flex-direction: column;
		background-image: url('@/static/image/help/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		min-height: 100vh;

		.content {
			padding: 0 32rpx;
			flex: 1;
			/* 关键：撑满剩余空间 */
			overflow: auto;
			/* 允许内容滚动 */
		}

		.icon-right {
			width: 56rpx;
			height: 56rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.popup_view {
			width: 550rpx;
			// height: 40vh;
			background-color: #fff;
			border-radius: 32rpx;
			padding: 32rpx;

			.popup_title {
				text-align: center;
			}

			.messageContent {
				margin: 24rpx 0;
			}

			.popup_button {
				margin-top: 24rpx;
				width: 100%;
				justify-content: space-around;

				.close_button,
				.confirm-button {
					width: 200rpx;
					height: 84rpx;
					background: #F3F3F3;
					border-radius: 106rpx;
					color: #999999;
					justify-content: center;
				}

				.confirm-button {
					background: #0DFFB9;
					color: #333;
				}
			}

		}

		.footer {
			// background: #f0f0f0;
			padding: 20rpx;
			text-align: center;
			/* 适配iPhoneX等刘海屏 */
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		}

		/* 确保容器占满屏幕 */
		.union-info {
			width: 100%;
			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%;
				background-color: aquamarine;

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

			.left-view {
				display: inline-flex;
				align-items: center;
				flex-wrap: nowrap;
				justify-content: space-between;
				flex-direction: row;

				.info-detail {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					margin-left: 24rpx;

					.union-title {
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}

					.union-id {
						font-size: 28rpx;
						color: #666666;
					}

					.union-date {

						font-size: 24rpx;
						color: #999999;
					}
				}

			}

			.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;
			}
		}

		.icon-wrap {
			display: flex;
			flex-wrap: wrap;
			gap: 25px;
			margin: 24rpx 0;

			.icon-box {
				width: 48%;
				height: 30%;
				flex: 1;
				max-width: calc(50% - 12.5px);
				border-radius: 15px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				cursor: pointer;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.union-user,
		.union-dec {
			padding: 24rpx;
			height: 220rpx;
			background: #fff;
			border-radius: 22rpx;
			margin-bottom: 24rpx;

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

			.user-info {
				display: inline-flex;
				align-items: center;
				flex-wrap: nowrap;
				justify-content: space-between;
				flex-direction: row;
				width: 100%;

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

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

				.info-view {
					margin-left: 24rpx;

					.iconTag-view {
						display: inline-flex;
						align-items: center;
						flex-wrap: nowrap;
						justify-content: space-between;
						flex-direction: row;
						padding: 12rpx 0;

						.icon-tag {
							width: 75rpx;
							height: 30rpx;

							img {
								width: 100%;
								height: 100%;
							}

						}
					}

				}
			}
		}

		.union-dec {
			min-height: 220rpx;

			.user-dec {
				text-indent: 2em;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.confirm-button {
			padding: 0 50rpx;

			.button {
				display: block;
				width: 100%;
				height: 84rpx;
				border-radius: 106rpx;
				line-height: 84rpx;
				background-color: #0DFFB9;
				color: #333;
				text-align: center;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
			}
		}
	}
</style>