<template>
	<view class="bottom-drawer-container" v-if="modelValue">
		<view class="drawer-overlay" @tap="close"></view>
		<view class="bottom-drawer" :class="{ 'drawer-open': modelValue }">
			<view class="drawer-header">
				<view class="user-info">
					<image
						class="user-avatar"
						:src="userInfo?.avatarURL || defaultAvatarURL"
						mode="aspectFill"
					/>
					<view class="user-details">
						<view class="name-badge-row">
							<text class="user-name">
								{{ userInfo?.userName || userInfo?.userID || '' }}
							</text>
							<!-- <view class="badge">
                <image class="badge-icon" src="/static/images/heart.png" mode="aspectFit" />
                <text class="badge-text">65</text>
              </view> -->
						</view>
						<text class="user-id">ID: {{ userInfo?.userID || '' }}</text>
					</view>
				</view>
				<!-- <view class="follow-button" @tap="followUser">
          <text class="follow-text">Follow</text>
        </view> -->
			</view>

			<view class="drawer-content">
				<view class="drawer-actions">
					<view class="action-btn" @tap="muteSpeak">
						<view class="action-btn-image-container">
							<image
								class="action-btn-image"
								v-if="userInfo?.isMessageDisabled"
								src="/static/images/unmute-speak.png"
								mode="aspectFit"
							/>
							<image
								class="action-btn-image"
								v-else
								src="/static/images/mute-speak.png"
								mode="aspectFit"
							/>
						</view>
						<text
							class="action-btn-content"
							v-if="userInfo?.isMessageDisabled"
						>
							解除禁言
						</text>
						<text class="action-btn-content" v-else>禁言</text>
					</view>
					<view class="action-btn" @tap="kickOut">
						<view class="action-btn-image-container">
							<image
								class="action-btn-image"
								src="/static/images/kick-out-room.png"
								mode="aspectFit"
							/>
						</view>
						<text class="action-btn-content">踢出房间</text>
					</view>

					<view class="action-btn" @tap="onDdmini">
						<view class="action-btn-image-container">
							<image
								class="action-btn-image"
								src="/static/images/administrator.png"
								mode="aspectFit"
							/>
						</view>
						<text class="action-btn-content">设置管理员</text>
					</view>
				</view>
				<!-- <view class="divider-line-container">
          <view class="divider-line"></view>
        </view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { useLiveListState } from '@/uni_modules/tuikit-atomic-x/state/LiveListState'
	import { useLiveAudienceState } from '@/uni_modules/tuikit-atomic-x/state/LiveAudienceState'
	const { currentLive } = useLiveListState()
	const {
		setAdministrator,
		revokeAdministrator,
		kickUserOutOfRoom,
		disableSendMessage
	} = useLiveAudienceState(uni?.$liveID)

	const defaultAvatarURL =
		'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png'
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		userInfo: {
			type: Object
		},
		liveID: {
			type: String
		}
	})

	const emit = defineEmits(['update:modelValue', 'update:userInfo'])

	const userData = computed({
		get() {
			return props.userInfo
		},
		set(value) {
			emit('update:userInfo', value)
		}
	})

	const close = () => {
		emit('update:modelValue', false)
	}

	/** 设置为管理员 */
	const onDdmini = () => {
		console.log('====', userData.value)
		uni.showModal({
			title: `提示`,
			content: `确认设置该用户为管理员？`,
			success: c => {
				if (c.confirm) {
					uni.showLoading({
						title: '加载中...',
						mask: true // 防止穿透点击
					})
					setAdministrator({
						liveID: uni?.$liveID,
						userID: props?.userInfo?.userID,
						success: () => {
							uni.hideLoading()
							uni.showToast({
								title: '设置成功',
								icon: 'success',
								mask: true
							})
							close()
						},
						fail: () => {
							uni.hideLoading()
						}
					})
				}
			}
		})
	}

	const muteSpeak = () => {
		console.log(
			`mute or unMute speak, liveID: ${props.liveID}, isMessageDisabled: ${props?.userInfo?.isMessageDisabled}`
		)
		const isShow = props?.userInfo?.isMessageDisabled
		uni.showModal({
			title: `提示`,
			content: isShow ? `确认禁止用户发言？` : `确认恢复用户发言？`,
			success: c => {
				if (c.confirm) {
					const params = {
						liveID: uni?.$liveID,
						userID: props?.userInfo?.userID,
						isDisable: !props?.userInfo?.isMessageDisabled
					}
					if (isShow) {
						disableSendMessage(params)
					} else {
						disableSendMessage(params)
					}

					close()
				}
			}
		})
	}

	const kickOut = () => {
		console.log('kick out from room', props?.userInfo?.userID)

		uni.showModal({
			content: `确认踢出${
				props?.userInfo?.userName || props?.userInfo?.userID
			}吗？`,
			success: res => {
				if (res.confirm) {
					kickUserOutOfRoom({
						liveID: uni?.$liveID,
						userID: props?.userInfo?.userID,
						success: () => {
							close()
							console.log(`kickUserOutOfRoom success`)
						},
						fail: (errCode, errMsg) => {
							console.log(
								`kickUserOutOfRoom fail errCode: ${errCode}, errMsg: ${errMsg}`
							)
						}
					})
				}
			}
		})
	}

	const followUser = () => {
		console.warn('== 关注用户 ', userInfo?.userName)
		// 这里可以添加关注用户的逻辑
		uni.showToast({
			title: '关注成功',
			icon: 'success'
		})
	}
</script>

<style>
	.bottom-drawer-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1000;
	}

	.drawer-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.bottom-drawer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(34, 38, 46, 1);
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		transform: translateY(100%);
		transition-property: transform;
		transition-duration: 0.3s;
		transition-timing-function: ease;
		height: 400rpx;
		flex-direction: column;
	}

	.drawer-open {
		transform: translateY(0);
	}

	.drawer-header {
		padding: 40rpx 48rpx;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.user-info {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border-width: 2rpx;
		border-color: #ffffff;
		margin-right: 20rpx;
	}

	.user-details {
		display: flex;
		flex-direction: column;
	}

	.name-badge-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.user-name {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		margin-right: 16rpx;
	}

	.badge {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #8b5cf6;
		padding: 4rpx 12rpx;
		border-radius: 16rpx;
	}

	.badge-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}

	.badge-text {
		color: #ffffff;
		font-size: 24rpx;
		font-weight: 500;
	}

	.user-id {
		color: rgba(255, 255, 255, 0.7);
		font-size: 24rpx;
	}

	.follow-button {
		background-color: #007aff;
		padding: 12rpx 32rpx;
		border-radius: 32rpx;
		/* height: 64rpx; */
	}

	.follow-text {
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 500;
	}

	.drawer-content {
		height: 400rpx;
		justify-content: flex-start;
		padding: 0 48rpx;
	}

	.drawer-actions {
		display: flex;
		flex-direction: row;
	}

	.action-btn {
		flex-direction: column;
		align-items: center;
		margin-left: 10rpx;
		height: 160rpx;
		width: 120rpx;
	}

	.action-btn-image-container {
		width: 100rpx;
		height: 100rpx;
		background-color: rgba(43, 44, 48, 1);
		margin-bottom: 16rpx;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
	}

	.action-btn-image {
		width: 50rpx;
		height: 50rpx;
	}

	.action-btn-content {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	.divider-line-container {
		height: 68rpx;
		justify-content: center;
		position: relative;
	}

	.divider-line {
		width: 268rpx;
		height: 10rpx;
		border-radius: 200rpx;
		background-color: #ffffff;
		position: absolute;
		bottom: 16rpx;
	}
</style>
