<template>
	<view class="fu-page">
		<view class="fu-nav" :style="{ paddingTop: statusBar + 'px' }">
			<view class="fu-back" @tap="goBack">
				<text class="fu-back-icon">←</text>
			</view>
		</view>

		<view class="fu-hero">
			<view class="fu-cover">
				<image v-if="coverUrl" class="fu-cover-img" :src="coverUrl" mode="aspectFill" />
				<view v-else class="fu-cover-ph" />
				<view class="fu-cover-fade" />
			</view>

			<view class="fu-profile" :style="profilePadStyle">
				<image v-if="avatarUrl" class="fu-avatar" :src="avatarUrl" mode="aspectFill" />
				<view v-else class="fu-avatar fu-avatar--empty" />
				<text class="fu-name">{{ displayName }}</text>
				<text class="fu-bio">{{ displayBio }}</text>
				<!-- <view v-if="profile.user_no" class="fu-account" @tap.stop="copyAccount">
					<text class="fu-account-label">{{ copy.accountLabel }}</text>
					<text class="fu-account-no">{{ profile.user_no }}</text>
					<text class="fu-account-copy">{{ copy.copyBtn }}</text>
				</view> -->

				<view v-if="!isSelf" class="fu-actions">
					<button
						class="fu-follow-btn"
						:class="{ 'fu-follow-btn--on': isFollowed }"
						:disabled="followBusy"
						@tap="onFollowTap"
					>
						{{ isFollowed ? copy.followed : copy.follow }}
					</button>
					<button
						class="fu-block-btn"
						:disabled="blockBusy"
						@tap="onBlockTap"
					>
						{{ isBlocked ? copy.unblockUser : copy.blockUser }}
					</button>
				</view>

				<view class="fu-stats">
					<view class="fu-stat" @tap="onStatTap('follow')">
						<text class="fu-stat-num">{{ fmtCount(profile.follow) }}</text>
						<text class="fu-stat-label">{{ copy.statFollow }}</text>
					</view>
					<view class="fu-stat" @tap="onStatTap('fans')">
						<text class="fu-stat-num">{{ fmtCount(profile.fans) }}</text>
						<text class="fu-stat-label">{{ copy.statFans }}</text>
					</view>
					<view class="fu-stat" @tap="onStatTap('praised')">
						<text class="fu-stat-num">{{ fmtCount(profile.praised) }}</text>
						<text class="fu-stat-label">{{ copy.statLikes }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="fu-body">
			<view class="fu-tabs">
				<view
					v-for="tab in tabs"
					:key="tab.key"
					class="fu-tab"
					:class="{ 'fu-tab--on': activeTab === tab.key }"
					@tap="switchTab(tab.key)"
				>
					<text class="fu-tab-text">{{ tab.label }}</text>
				</view>
			</view>

			<view v-if="loadingProfile" class="fu-empty">
				<text class="fu-empty-txt">{{ copy.loading }}</text>
			</view>
			<view v-else-if="activeFeed.loading && !activeFeed.items.length" class="fu-empty">
				<text class="fu-empty-txt">{{ copy.loading }}</text>
			</view>
			<view v-else-if="activeFeed.loaded && !activeFeed.items.length" class="fu-empty">
				<text class="fu-empty-txt">{{ emptyHint }}</text>
			</view>

			<view v-else class="fu-works">
				<view
					v-for="(item, index) in activeFeed.items"
					:key="gridKey(item, index)"
					class="fu-work"
				>
					<view class="fu-work-cover-wrap" @tap="openItem(item)">
						<image
							v-if="workCover(item)"
							class="fu-work-cover"
							:src="workCover(item)"
							mode="aspectFill"
						/>
						<view v-else class="fu-work-cover fu-work-cover--ph" />
						<view v-if="item.type === 'video'" class="fu-work-video-badge">
							<text class="fu-work-video-icon">▶</text>
						</view>
						<view v-if="item.state && item.state !== 'normal'" class="fu-work-state">
							<text class="fu-work-state-txt">{{ stateLabel(item.state) }}</text>
						</view>
					</view>
					<view class="fu-work-body">
						<view class="fu-work-desc" @tap="openItem(item)">
							<text v-if="item.type_text" class="fu-work-tag">{{ item.type_text }}</text>
							<text class="fu-work-text">{{ formatContent(item.content) || ' ' }}</text>
						</view>
						<view class="fu-work-ft">
							<text class="fu-work-date">{{ formatDate(item.createtime) }} {{ copy.publishedSuffix }}</text>
							<view
								class="fu-work-like"
								:class="{ 'fu-work-like--on': item.isLike === 1 }"
								@tap.stop="onLikeItem(index)"
							>
								<text class="fu-work-like-icon">♥</text>
								<text class="fu-work-like-num">{{ item.likes || 0 }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="activeFeed.items.length" class="fu-more">
				<text class="fu-more-txt">{{ loadMoreText }}</text>
			</view>

			<view class="fu-bottom-safe" :style="{ height: safeBottom + 'px' }" />
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import {
	fetchProfileCard,
	fetchProfileContentPage,
	toggleProfileFollow,
	toggleProfileLike
} from '@/features/profile/profile-gateway'
import {
	blockUser,
	fetchIsBlocked,
	unblockUser
} from '@/features/account/blocked-gateway'
import { detailPageUrl, videoDetailUrl } from '@/features/dynamics/post-media'

function emptyProfile() {
	return {
		user_no: '',
		user: { avatar: '', nickname: '—', bio: '' },
		follow: 0,
		fans: 0,
		praised: 0,
		isFollow: 0,
		image: ''
	}
}

function emptyFeedState() {
	return {
		items: [],
		page: 1,
		lastPage: 1,
		loading: false,
		loaded: false,
		status: 'more'
	}
}

export default {
	data() {
		return {
			statusBar: 0,
			safeBottom: 0,
			targetUserId: '',
			isSelf: false,
			isBlocked: false,
			followBusy: false,
			blockBusy: false,
			loadingProfile: true,
			activeTab: 'works',
			profile: emptyProfile(),
			feeds: {
				works: emptyFeedState(),
				likes: emptyFeedState()
			}
		}
	},
	computed: {
		...mapState({
			storeUser: (state) => state.user
		}),
		copy() {
			const t = this.$t.bind(this)
			return {
				accountLabel: t('mine.accountLabel'),
				copyBtn: t('mine.copyBtn'),
				statFollow: t('mine.statFollow'),
				statFans: t('mine.statFans'),
				statLikes: t('mine.statLikes'),
				follow: t('mine.follow'),
				followed: t('mine.followed'),
				blockUser: t('findUser.blockUser'),
				unblockUser: t('findUser.unblockUser'),
				confirmBlock: t('blocked.confirmBlock'),
				confirmUnblock: t('blocked.confirmUnblock'),
				confirm: t('blocked.confirm'),
				cancel: t('blocked.cancel'),
				blockedSuccess: t('blocked.blockedSuccess'),
				unblockedSuccess: t('blocked.unblockedSuccess'),
				invalidUserId: t('blocked.invalidUserId'),
				loading: t('mine.loading'),
				noMore: t('mine.noMore'),
				loadFailed: t('mine.loadFailed'),
				actionFailed: t('mine.actionFailed'),
				defaultBio: t('findUser.defaultBio'),
				tabWorks: t('findUser.tabWorks'),
				tabLikes: t('findUser.tabLikes'),
				emptyWorks: t('findUser.emptyWorks'),
				emptyLikes: t('findUser.emptyLikes'),
				publishedSuffix: t('findUser.publishedSuffix'),
				stateExamine: t('mine.stateExamine'),
				stateHazard: t('mine.stateHazard'),
				stateTranscoding: t('mine.stateTranscoding'),
				stateScreenshot: t('mine.stateScreenshot'),
				statePublish: t('mine.statePublish')
			}
		},
		tabs() {
			return [
				{ key: 'works', label: this.copy.tabWorks },
				{ key: 'likes', label: this.copy.tabLikes }
			]
		},
		stateMap() {
			return {
				examine: this.copy.stateExamine,
				hazard: this.copy.stateHazard,
				transcoding: this.copy.stateTranscoding,
				screenshot: this.copy.stateScreenshot,
				publish: this.copy.statePublish
			}
		},
		signedIn() {
			return !!this.storeUser.isLogin
		},
		displayName() {
			return (this.profile.user && this.profile.user.nickname) || '—'
		},
		displayBio() {
			const bio = (this.profile.user && this.profile.user.bio) || ''
			return bio.trim() || this.copy.defaultBio
		},
		coverUrl() {
			if (!this.profile.image) return ''
			return this.$appKit.oss(this.profile.image, 750, 320, 1, 'transparent', 'jpg')
		},
		avatarUrl() {
			const av = this.profile.user && this.profile.user.avatar
			return av ? this.$appKit.oss(av, 200, 200, 2, 'avatar') : ''
		},
		activeFeed() {
			return this.feeds[this.activeTab] || emptyFeedState()
		},
		emptyHint() {
			return this.activeTab === 'likes' ? this.copy.emptyLikes : this.copy.emptyWorks
		},
		loadMoreText() {
			if (this.activeFeed.status === 'loading') return this.copy.loading
			if (this.activeFeed.status === 'noMore') return this.copy.noMore
			return ''
		},
		profilePadStyle() {
			const top = (this.statusBar || 0) + uni.upx2px(72)
			return { paddingTop: `${top}px` }
		},
		targetBlockedId() {
			const user = this.profile.user || {}
			const id = user.id || this.profile.user_id
			return id != null && id !== '' ? id : ''
		},
		/** 接口 isFollow：1 已关注，0 未关注 */
		isFollowed() {
			const flag = this.profile && this.profile.isFollow
			return flag === 1 || flag === '1' || flag === true
		}
	},
	onLoad(query) {
		try {
			const info = uni.getSystemInfoSync()
			this.statusBar = info.statusBarHeight || 0
			this.safeBottom = (info.safeAreaInsets && info.safeAreaInsets.bottom) || 0
		} catch (_) {}
		if (query && query.id) {
			this.targetUserId = String(query.id)
		}
		this.reloadAll()
	},
	onPullDownRefresh() {
		this.reloadAll().finally(() => uni.stopPullDownRefresh())
	},
	onReachBottom() {
		this.loadFindData('append')
	},
	methods: {
		goBack() {
			uni.navigateBack({ fail: () => uni.switchTab({ url: '/pages/index/index' }) })
		},
		fmtCount(n) {
			const val = Number(n)
			if (!Number.isFinite(val) || val < 0) return 0
			return this.$appKit.toFormat(val, 'thousand')
		},
		async reloadAll() {
			this.resetFeeds()
			this.loadingProfile = true
			try {
				await this.loadProfile()
				await this.loadFindData('refresh')
			} catch (err) {
				this.$appKit && this.$appKit.msg(err.message || this.copy.loadFailed)
			} finally {
				this.loadingProfile = false
			}
		},
		resetFeeds() {
			this.feeds.works = emptyFeedState()
			this.feeds.likes = emptyFeedState()
		},
		async loadProfile() {
			const card = await fetchProfileCard(this.targetUserId)
			const userNo = card.user_no || (card.user && card.user.user_no) || ''
			const isFollow =
				card.isFollow === 1 || card.isFollow === '1' || card.isFollow === true ? 1 : 0
			this.profile = {
				...emptyProfile(),
				...card,
				user_no: userNo,
				isFollow,
				user: {
					...emptyProfile().user,
					...(card.user || {}),
					bio: ((card.user && card.user.bio) || card.bio || '').trim()
				}
			}
			this.isSelf =
				this.signedIn &&
				(Number(card.user_id) === Number(this.storeUser.id) ||
					String(userNo) === String(this.storeUser.user_no || ''))
			await this.refreshBlockedState()
		},
		async refreshBlockedState() {
			if (this.isSelf || !this.signedIn) {
				this.isBlocked = false
				return
			}
			const blockedId = this.targetBlockedId
			if (!blockedId || !this.profile.user_no) {
				this.isBlocked = false
				return
			}
			try {
				this.isBlocked = await fetchIsBlocked(this.profile.user_no, blockedId)
			} catch (_) {
				this.isBlocked = false
			}
		},
		switchTab(key) {
			if (this.activeTab === key) return
			this.activeTab = key
			this.loadFindData('tabChange')
		},
		async loadFindData(source = 'append') {
			if (!this.profile.user_no) return
			const feed = this.feeds[this.activeTab]
			if (!feed) return

			const isRefresh = source === 'refresh' || source === 'silentRefresh'
			if (isRefresh) {
				feed.page = 1
				feed.status = 'more'
				feed.loaded = false
				if (source === 'refresh') feed.items = []
			}
			if (feed.status === 'noMore' && source === 'append') return
			if (source === 'tabChange' && feed.loaded) return
			if (feed.status === 'loading') return

			feed.status = 'loading'
			feed.loading = true
			try {
				const pack = await fetchProfileContentPage({
					tabKey: this.activeTab,
					userNo: this.profile.user_no,
					page: feed.page,
					isOwner: this.activeTab === 'works' && this.isSelf
				})
				feed.page = pack.currentPage
				if (pack.currentPage >= pack.lastPage) {
					feed.status = 'noMore'
				} else {
					feed.status = 'more'
					feed.page = pack.currentPage + 1
				}
				const incoming = pack.rows || []
				feed.items = isRefresh ? incoming : feed.items.concat(incoming)
				feed.loaded = true
			} catch (err) {
				feed.status = 'more'
				feed.loaded = true
				this.$appKit && this.$appKit.msg(err.message || this.copy.loadFailed)
			} finally {
				feed.loading = false
			}
		},
		formatContent(content) {
			if (!content) return ''
			return String(content).replace(/<\/?.+?>/g, '').replace(/ /g, '').trim()
		},
		formatDate(ts) {
			if (!ts) return ''
			return (this.$appKit && this.$appKit.timeFormat(ts, 'mm-dd')) || ''
		},
		copyAccount() {
			if (!this.profile.user_no) return
			this.$appKit.copy(this.profile.user_no)
		},
		onStatTap(type) {
			if (!this.$appKit || !this.$appKit.requireLogin()) return
			if (!this.profile.user_no) return
			if (type === 'praised') {
				const name = this.displayName
				const n = this.fmtCount(this.profile.praised)
				uni.showModal({
					content: this.$t('mine.praiseModal', { name, count: n }),
					showCancel: false
				})
				return
			}
			if (type === 'fans') {
				uni.navigateTo({
					url: `/pages/mine/fans?id=${encodeURIComponent(this.profile.user_no)}`
				})
				return
			}
			if (type === 'follow') {
				uni.navigateTo({
					url: `/pages/mine/follow?id=${encodeURIComponent(this.profile.user_no)}`
				})
			}
		},
		gridKey(item, index) {
			return item.id || `row-${index}`
		},
		workCover(item) {
			if (!item) return ''
			const images = Array.isArray(item.images) ? item.images : []
			const path = images[0] || (item.video && item.video.cover_url) || item.cover || ''
			return path ? this.$appKit.oss(path, 400, 520) : ''
		},
		stateLabel(state) {
			return this.stateMap[state] || state
		},
		openItem(item) {
			if (!item) return
			if (item.state && item.state !== 'normal') {
				this.$appKit.msg(this.stateLabel(item.state))
				return
			}
			if (item.type === 'live' && item.live_id) {
				uni.navigateTo({ url: `/pages/live/watch?id=${item.live_id}` })
				return
			}
			if (item.type === 'video') {
				// 个人主页竖滑：type=works|likes|myfind + user_no，不传 label_id
				const listType =
					this.activeTab === 'works' && this.isSelf ? 'myfind' : this.activeTab
				uni.navigateTo({
					url: videoDetailUrl(item.id, {
						type: listType,
						user_no: this.profile.user_no
					})
				})
				return
			}
			if (item.id) {
				uni.navigateTo({ url: detailPageUrl(item.id) })
			}
		},
		async onFollowTap() {
			if (!this.$appKit || !this.$appKit.requireLogin()) return
			if (this.followBusy || this.isSelf) return
			this.followBusy = true
			try {
				const flag = await toggleProfileFollow(this.profile.user_no)
				if (flag === 0 || flag === '0') {
					this.$set(this.profile, 'isFollow', 0)
					this.$set(
						this.profile,
						'fans',
						Math.max(0, Number(this.profile.fans || 0) - 1)
					)
				} else if (flag === 1 || flag === '1') {
					this.$set(this.profile, 'isFollow', 1)
					this.$set(this.profile, 'fans', Number(this.profile.fans || 0) + 1)
				}
			} catch (err) {
				this.$appKit.msg(err.message || this.copy.actionFailed)
			} finally {
				this.followBusy = false
			}
		},
		onBlockTap() {
			if (!this.$appKit || !this.$appKit.requireLogin()) return
			if (this.isSelf || this.blockBusy) return
			const blockedId = this.targetBlockedId
			if (!blockedId) {
				this.$appKit.msg(this.copy.invalidUserId)
				return
			}
			const willBlock = !this.isBlocked
			uni.showModal({
				content: willBlock ? this.copy.confirmBlock : this.copy.confirmUnblock,
				confirmText: this.copy.confirm,
				cancelText: this.copy.cancel,
				success: (res) => {
					if (res.confirm) this.runBlockToggle(blockedId, willBlock)
				}
			})
		},
		async runBlockToggle(blockedId, willBlock) {
			this.blockBusy = true
			try {
				if (willBlock) {
					await blockUser(blockedId)
				} else {
					await unblockUser(blockedId)
				}
				await this.refreshBlockedState()
				this.$appKit.msg(
					willBlock ? this.copy.blockedSuccess : this.copy.unblockedSuccess
				)
			} catch (err) {
				this.$appKit.msg(err.message || this.copy.actionFailed)
			} finally {
				this.blockBusy = false
			}
		},
		async onLikeItem(index) {
			if (!this.$appKit || !this.$appKit.requireLogin()) return
			const row = this.activeFeed.items[index]
			if (!row || !row.id) return
			try {
				const flag = await toggleProfileLike(row.id)
				if (flag === 0 || flag === '0') {
					row.isLike = 0
					row.likes = Math.max(0, Number(row.likes || 0) - 1)
				} else {
					row.isLike = 1
					row.likes = Number(row.likes || 0) + 1
				}
			} catch (err) {
				this.$appKit.msg(err.message || this.copy.actionFailed)
			}
		}
	}
}
</script>

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

.fu-nav {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 20;
	padding-left: 32rpx;
	padding-right: 32rpx;
	pointer-events: none;
}

.fu-back {
	width: 72rpx;
	height: 72rpx;
	border-radius: 20rpx;
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 6rpx 20rpx rgba(74, 140, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.fu-back-icon {
	font-size: 36rpx;
	color: #4a8cff;
	line-height: 1;
}

.fu-hero {
	position: relative;
	width: 100%;
}

.fu-cover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 400rpx;
	overflow: hidden;
}

.fu-cover-img,
.fu-cover-ph {
	width: 100%;
	height: 100%;
}

.fu-cover-ph {
	background: linear-gradient(160deg, #8ec5ff 0%, #e0ecff 55%, #f4f6fb 100%);
}

.fu-cover-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 200rpx;
	background: linear-gradient(to bottom, rgba(244, 246, 251, 0), rgba(244, 246, 251, 1));
}

.fu-profile {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 32rpx 24rpx;
	box-sizing: border-box;
}

.fu-avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 80rpx;
	border: 6rpx solid #ffffff;
	box-shadow: 0 8rpx 28rpx rgba(74, 140, 255, 0.15);
	background-color: #eef2f8;
}

.fu-avatar--empty {
	background: linear-gradient(135deg, #4a8cff 0%, #6ba0ff 100%);
}

.fu-name {
	margin-top: 20rpx;
	font-size: 36rpx;
	font-weight: 700;
	color: #1a1d26;
}

.fu-bio {
	margin-top: 12rpx;
	font-size: 26rpx;
	color: #8a8d9e;
	text-align: center;
	line-height: 1.5;
	padding: 0 24rpx;
}

.fu-account {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 16rpx;
	padding: 10rpx 20rpx;
	border-radius: 999rpx;
	background-color: rgba(74, 140, 255, 0.08);
}

.fu-account-label {
	font-size: 22rpx;
	color: #8a8d9e;
	margin-right: 8rpx;
}

.fu-account-no {
	font-size: 24rpx;
	color: #4a4d5e;
}

.fu-account-copy {
	margin-left: 12rpx;
	font-size: 22rpx;
	color: #4a8cff;
}

.fu-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 24rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
}

.fu-follow-btn,
.fu-block-btn {
	padding: 0 40rpx;
	height: 64rpx;
	line-height: 64rpx;
	font-size: 28rpx;
	border-radius: 999rpx;
	border: none;
}

.fu-follow-btn {
	color: #ffffff;
	background: linear-gradient(135deg, #4a8cff 0%, #6ec8ff 100%);
}

.fu-follow-btn--on {
	color: #4a8cff;
	background: #ffffff;
	border: 1rpx solid rgba(74, 140, 255, 0.35);
}

.fu-block-btn {
	margin-left: 16rpx;
	color: #4a4d5e;
	background-color: rgba(255, 255, 255, 0.92);
	border: 1rpx solid rgba(255, 255, 255, 0.65);
}

.fu-follow-btn::after,
.fu-block-btn::after {
	border: none;
}

.fu-stats {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	margin-top: 28rpx;
}

.fu-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fu-stat-num {
	font-size: 32rpx;
	font-weight: 700;
	color: #1a1d26;
}

.fu-stat-label {
	margin-top: 6rpx;
	font-size: 22rpx;
	color: #8a8d9e;
}

.fu-body {
	position: relative;
	z-index: 3;
	margin-top: 8rpx;
	background-color: #f4f6fb;
	border-radius: 32rpx 32rpx 0 0;
	padding-top: 8rpx;
}

.fu-tabs {
	display: flex;
	flex-direction: row;
	padding: 16rpx 32rpx 8rpx;
}

.fu-tab {
	padding: 12rpx 32rpx;
	margin-right: 16rpx;
	border-radius: 999rpx;
	background-color: #ffffff;
}

.fu-tab--on {
	background: linear-gradient(135deg, #4a8cff 0%, #6ba0ff 100%);
	box-shadow: 0 6rpx 16rpx rgba(74, 140, 255, 0.22);
}

.fu-tab-text {
	font-size: 28rpx;
	color: #8a8d9e;
}

.fu-tab--on .fu-tab-text {
	color: #ffffff;
	font-weight: 600;
}

.fu-empty {
	padding: 80rpx 32rpx;
	text-align: center;
}

.fu-empty-txt {
	font-size: 28rpx;
	color: #8a8d9e;
}

.fu-works {
	padding: 0 24rpx;
}

.fu-work {
	display: flex;
	flex-direction: row;
	margin-bottom: 24rpx;
	padding: 20rpx;
	background-color: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 6rpx 24rpx rgba(74, 140, 255, 0.06);
}

.fu-work-cover-wrap {
	position: relative;
	width: 200rpx;
	height: 260rpx;
	flex-shrink: 0;
	border-radius: 16rpx;
	overflow: hidden;
	background-color: #eef2f8;
}

.fu-work-cover {
	width: 100%;
	height: 100%;
}

.fu-work-cover--ph {
	background: linear-gradient(135deg, #c1c8d6 0%, #8e96a6 100%);
}

.fu-work-video-badge {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fu-work-video-icon {
	color: #ffffff;
	font-size: 28rpx;
	margin-left: 4rpx;
}

.fu-work-state {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fu-work-state-txt {
	font-size: 24rpx;
	color: #ffffff;
}

.fu-work-body {
	flex: 1;
	min-width: 0;
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.fu-work-desc {
	flex: 1;
}

.fu-work-tag {
	display: inline-block;
	font-size: 20rpx;
	color: #4a8cff;
	background-color: rgba(74, 140, 255, 0.12);
	padding: 2rpx 10rpx;
	border-radius: 8rpx;
	margin-right: 8rpx;
}

.fu-work-text {
	font-size: 28rpx;
	color: #1a1d26;
	line-height: 40rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

.fu-work-ft {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 12rpx;
}

.fu-work-date {
	font-size: 22rpx;
	color: #8a8d9e;
}

.fu-work-like {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.fu-work-like-icon {
	font-size: 28rpx;
	color: #b0b4c0;
	margin-right: 6rpx;
}

.fu-work-like--on .fu-work-like-icon {
	color: #ff4d4f;
}

.fu-work-like-num {
	font-size: 24rpx;
	color: #5c6070;
}

.fu-more {
	padding: 16rpx 0 8rpx;
	text-align: center;
}

.fu-more-txt {
	font-size: 24rpx;
	color: #b0b4c0;
}

.fu-bottom-safe {
	width: 100%;
}
</style>
