<template>
	<view class="page">
		<app-top-push-notice />
		<view class="tabback">
			<view class="rtjt" @click="back">←</view>
			<view class="name">{{ $i18n.t('companySpaceDetailTitle') }}</view>
			<view class="tabback-placeholder"></view>
		</view>

		<scroll-view scroll-y class="body-scroll" :show-scrollbar="false">
			<view v-if="loading" class="state state--muted">{{ $i18n.t('loading') }}</view>
			<template v-else>
				<view class="card">
					<view v-if="coverUrl" class="cover-wrap">
						<image class="cover" :src="coverUrl" mode="aspectFill" />
					</view>
					<text class="title">{{ spaceName }}</text>
					<text v-if="spaceAddress" class="line">{{ spaceAddress }}</text>
					<text v-if="spaceRemark" class="line muted">{{ spaceRemark }}</text>
				</view>

				<view class="section-head">{{ $i18n.t('companySpaceMembers') }}</view>
				<view v-if="membersLoading" class="state state--muted sm">{{ $i18n.t('loading') }}</view>
				<view v-else-if="members.length === 0" class="state state--muted sm">{{ $i18n.t('noMembersYet') }}</view>
				<view v-for="(m, index) in members" :key="memberKey(m, index)" class="member-cell">
					<view class="member-avatar-wrap">
						<image
							v-if="m.userAvatar"
							class="member-avatar"
							:src="m.userAvatar"
							mode="aspectFill"
						/>
						<view v-else class="member-avatar member-avatar--ph"></view>
					</view>
					<view class="member-info">
						<text class="member-name">{{ m.userName || m.name || '--' }}</text>
						<text v-if="m.userEmail" class="member-email">{{ m.userEmail }}</text>
						<text class="member-role">{{ memberRoleText(m) }}</text>
					</view>
				</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				spaceId: '',
				loading: true,
				space: {},
				membersLoading: true,
				members: []
			}
		},
		computed: {
			spaceName() {
				const s = this.space
				return s.name || s.spaceName || s.title || '--'
			},
			coverUrl() {
				const s = this.space
				const u = s.picture || s.cover || s.image || s.logo || ''
				return u ? String(u).trim() : ''
			},
			spaceAddress() {
				const s = this.space
				const t = s.address || s.location || ''
				return t ? String(t).trim() : ''
			},
			spaceRemark() {
				const s = this.space
				const t = s.remark || s.description || ''
				return t ? String(t).trim() : ''
			}
		},
		onLoad(options) {
			this.spaceId = (options && options.id) ? String(options.id) : ''
			if (!this.spaceId) {
				uni.showToast({ title: this.$i18n.t('requestFailed'), icon: 'none' })
				this.loading = false
				this.membersLoading = false
				return
			}
			this.fetchSpace()
			this.fetchMembers()
		},
		methods: {
			back() {
				uni.navigateBack({ delta: 1 })
			},
			memberKey(m, index) {
				const id = m && m.id
				return id != null ? String(id) : 'm-' + index
			},
			memberRoleText(m) {
				const perms = m.permissions
				if (Array.isArray(perms) && perms.includes('admin')) {
					return this.$i18n.t('admin')
				}
				return this.$i18n.t('user')
			},
			fetchSpace() {
				this.loading = true
				this.$http
					.get(`/bst/space/${this.spaceId}`)
					.then((res) => {
						if (res.code == 200) {
							this.space = res.data || {}
						} else {
							uni.showToast({ title: res.msg || this.$i18n.t('requestFailed'), icon: 'none' })
							this.space = {}
						}
					})
					.catch(() => {
						uni.showToast({ title: this.$i18n.t('requestFailed'), icon: 'none' })
						this.space = {}
					})
					.finally(() => {
						this.loading = false
					})
			},
			fetchMembers() {
				this.membersLoading = true
				this.$http
					.get(`/bst/spaceUser/list?spaceId=${this.spaceId}&pageNum=1&pageSize=99`)
					.then((res) => {
						if (res.code == 200) {
							this.members = Array.isArray(res.rows) ? res.rows : []
						} else {
							this.members = []
						}
					})
					.catch(() => {
						this.members = []
					})
					.finally(() => {
						this.membersLoading = false
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: 100vh;
		background-color: #f3f5f6;
		box-sizing: border-box;
	}

	.tabback {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 160rpx;
		padding: 0 20rpx;
		padding-top: 80rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;

		.rtjt {
			font-size: 36rpx;
			color: #333;
			min-width: 48rpx;
		}

		.name {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}

		.tabback-placeholder {
			width: 48rpx;
			height: 1rpx;
		}
	}

	.body-scroll {
		height: calc(100vh - 160rpx);
		padding: 24rpx;
		padding-top: 16rpx;
		box-sizing: border-box;
	}

	.state {
		text-align: center;
		padding: 48rpx 24rpx;
		font-size: 28rpx;
	}

	.state--muted {
		color: #8b9199;
	}

	.state.sm {
		padding: 24rpx;
	}

	.card {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.cover-wrap {
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		height: 280rpx;
		background: #e8eaed;
	}

	.cover {
		width: 100%;
		height: 100%;
		display: block;
	}

	.title {
		display: block;
		font-size: 34rpx;
		font-weight: 600;
		color: #1a1a1a;
		line-height: 1.35;
	}

	.line {
		display: block;
		margin-top: 12rpx;
		font-size: 26rpx;
		color: #4b5563;
		line-height: 1.45;
		word-break: break-all;
	}

	.line.muted {
		color: #6b7280;
	}

	.section-head {
		font-size: 28rpx;
		font-weight: 600;
		color: #374151;
		margin-bottom: 16rpx;
		padding-left: 4rpx;
	}

	.member-cell {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx 24rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.member-avatar-wrap {
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.member-avatar {
		width: 88rpx;
		height: 88rpx;
		border-radius: 12rpx;
		display: block;
		background: #e8eaed;
	}

	.member-avatar--ph {
		border: 1rpx dashed #cfd4dc;
	}

	.member-info {
		flex: 1;
		min-width: 0;
	}

	.member-name {
		display: block;
		font-size: 30rpx;
		font-weight: 600;
		color: #1a1a1a;
	}

	.member-email {
		display: block;
		margin-top: 6rpx;
		font-size: 24rpx;
		color: #6b7280;
		word-break: break-all;
	}

	.member-role {
		display: block;
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #9ca3af;
	}
</style>
