<template>
	<view class="blk-page">
		<view class="blk-nav" :style="{ paddingTop: statusBar + 'px' }">
			<view class="blk-nav-row">
				<view class="blk-back" @tap="goBack">
					<text class="blk-back-icon">←</text>
				</view>
				<text class="blk-nav-title">{{ copy.title }}</text>
				<view class="blk-nav-placeholder" />
			</view>
		</view>

		<scroll-view
			scroll-y
			class="blk-scroll"
			:style="{ height: scrollHeight + 'px' }"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onPullRefresh"
		>
			<view class="blk-body" :style="{ paddingBottom: safeBottom + 'px' }">
				<view v-if="loading && !list.length" class="blk-state">
					<text class="blk-state-txt">{{ copy.loading }}</text>
				</view>

				<view v-else-if="loadError" class="blk-state">
					<text class="blk-state-txt">{{ loadError }}</text>
					<text class="blk-retry" @tap="loadList">{{ copy.retry }}</text>
				</view>

				<empty
					v-else-if="loaded && !list.length"
					:text="copy.empty"
				/>

				<view v-else class="blk-list">
					<view
						v-for="(item, index) in list"
						:key="item.id || blockedId(item) || index"
						class="blk-card"
					>
						<view class="blk-user">
							<image
								class="blk-avatar"
								:src="avatarUrl(item)"
								mode="aspectFill"
							/>
							<view class="blk-user-meta">
								<text class="blk-name">{{ displayName(item) }}</text>
								<text class="blk-time">{{ copy.blockedTime }}：{{ item.createtime_text || '-' }}</text>
							</view>
						</view>
						<button
							class="blk-unblock"
							:disabled="!!loadingIds[blockedId(item)]"
							:loading="!!loadingIds[blockedId(item)]"
							@tap.stop="confirmUnblock(item)"
						>
							<text class="blk-unblock-txt">{{ copy.unblock }}</text>
						</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import {
	fetchBlockedList,
	unblockUser,
	blockedUserAvatar,
	blockedUserId,
	blockedUserNickname
} from '@/features/account/blocked-gateway'

export default {
	data() {
		return {
			statusBar: 0,
			scrollHeight: 600,
			safeBottom: 0,
			loading: false,
			loaded: false,
			refreshing: false,
			loadError: '',
			list: [],
			loadingIds: {}
		}
	},
	computed: {
		copy() {
			const t = this.$t.bind(this)
			return {
				title: t('user.blockedList'),
				loading: t('blocked.loading'),
				retry: t('blocked.retry'),
				empty: t('blocked.empty'),
				blockedTime: t('blocked.blockedTime'),
				unblock: t('blocked.unblock'),
				loadFailed: t('blocked.loadFailed'),
				invalidUserId: t('blocked.invalidUserId'),
				confirmUnblock: t('blocked.confirmUnblock'),
				confirm: t('blocked.confirm'),
				cancel: t('blocked.cancel'),
				unblockedSuccess: t('blocked.unblockedSuccess'),
				unknownUser: t('blocked.unknownUser'),
				network: t('user.realnameNetworkError')
			}
		}
	},
	onLoad() {
		const sys = uni.getSystemInfoSync()
		this.statusBar = sys.statusBarHeight || 0
		this.safeBottom = sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0
		const navH = this.statusBar + uni.upx2px(88)
		this.scrollHeight = (sys.windowHeight || 667) - navH
		this.loadList()
	},
	methods: {
		goBack() {
			if (getCurrentPages().length > 1) {
				uni.navigateBack({ delta: 1 })
			} else {
				uni.switchTab({
					url: '/pages/mine/index',
					fail: () => uni.reLaunch({ url: '/pages/mine/index' })
				})
			}
		},
		blockedId(item) {
			return blockedUserId(item)
		},
		displayName(item) {
			return blockedUserNickname(item, this.copy.unknownUser)
		},
		avatarUrl(item) {
			const raw = blockedUserAvatar(item)
			return this.$appKit && this.$appKit.oss
				? this.$appKit.oss(raw, 104, 104, 2, 'avatar')
				: raw
		},
		onPullRefresh() {
			this.refreshing = true
			this.loadList(true)
		},
		async loadList(silent) {
			if (this.loading && !silent) return
			if (!silent) this.loading = true
			this.loadError = ''
			try {
				this.list = await fetchBlockedList()
			} catch (err) {
				this.list = []
				this.loadError = (err && err.message) || this.copy.loadFailed
			} finally {
				this.loading = false
				this.loaded = true
				this.refreshing = false
			}
		},
		confirmUnblock(item) {
			const id = this.blockedId(item)
			if (!id) {
				this.$appKit.msg(this.copy.invalidUserId)
				return
			}
			uni.showModal({
				content: this.copy.confirmUnblock,
				confirmText: this.copy.confirm,
				cancelText: this.copy.cancel,
				success: (res) => {
					if (res.confirm) this.runUnblock(id)
				}
			})
		},
		async runUnblock(blockedId) {
			this.$set(this.loadingIds, blockedId, true)
			try {
				await unblockUser(blockedId)
				this.$appKit.msg(this.copy.unblockedSuccess)
				await this.loadList(true)
			} catch (err) {
				this.$appKit.msg((err && err.message) || this.copy.network)
			} finally {
				this.$set(this.loadingIds, blockedId, false)
			}
		}
	}
}
</script>

<style scoped>
.blk-page {
	min-height: 100vh;
	background-color: #f4f6fb;
}

.blk-nav {
	background-color: #ffffff;
	border-bottom: 1rpx solid #eef1f6;
}

.blk-nav-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 88rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
}

.blk-back {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.blk-back-icon {
	font-size: 40rpx;
	color: #1a1d26;
	line-height: 1;
}

.blk-nav-title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1d26;
}

.blk-nav-placeholder {
	width: 64rpx;
}

.blk-body {
	padding: 24rpx 28rpx 0;
	box-sizing: border-box;
}

.blk-state {
	padding: 100rpx 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.blk-state-txt {
	font-size: 28rpx;
	color: #8a8d9e;
	text-align: center;
	line-height: 1.5;
}

.blk-retry {
	margin-top: 24rpx;
	font-size: 28rpx;
	color: #4a8cff;
	font-weight: 500;
}

.blk-list {
	display: flex;
	flex-direction: column;
}

.blk-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 24rpx 28rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 6rpx 24rpx rgba(74, 140, 255, 0.06);
}

.blk-user {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
	min-width: 0;
	padding-right: 20rpx;
}

.blk-avatar {
	width: 96rpx;
	height: 96rpx;
	border-radius: 48rpx;
	background-color: #eef1f6;
	flex-shrink: 0;
}

.blk-user-meta {
	margin-left: 20rpx;
	min-width: 0;
	flex: 1;
}

.blk-name {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	color: #1a1d26;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.blk-time {
	display: block;
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #8a8d9e;
	line-height: 1.4;
}

.blk-unblock {
	flex-shrink: 0;
	height: 64rpx;
	line-height: 64rpx;
	padding: 0 28rpx;
	margin: 0;
	border-radius: 32rpx;
	border: 2rpx solid #fecaca;
	background-color: #fff5f5;
}

.blk-unblock::after {
	border: none;
}

.blk-unblock-txt {
	font-size: 26rpx;
	color: #ef4444;
	font-weight: 500;
}
</style>
