<template>
	<view class="remove white_style">
		<Nav className="nav_F6" :backVisible="true" :saveVisible="true" saveText="移除" @savePick="saveBefore" :notNull="ids" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('team.remove.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="list" :style="listHeight" v-if="list && list.length">
				<view class="item" v-for="(item, key) in list" :key="key" @click="itemChange(item, key)" :class="{active: item.is}">
					<view class="head_portrait">
						<image class="pic" mode="aspectFill" :src="item.userAvatarUrl"></image>
					</view>
					<view class="name omit">{{ item.userNickname | across }}</view>
				</view>
			</view>
			<!-- noData -->
			<noData v-if="!loading && empty" />
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

<script>
	import mixins from '@/utils/mixins'
	import sdkService from '@/api/sdk_service'

	export default {
		mixins: [mixins],
		data() {
			return {
				ids: []
			}
		},
		onLoad(e) {
			if (e) {
				this.options = Object.assign({}, this.options, e)
				this.form.teamId = this.options.id
			}
		},
		onShow() {
			this.getList()
		},
		computed: {
			listHeight() {
				return `min-height: calc(100vh - ${this.CustomBar + 26}px);`;
			}
		},
		methods: {
			// 获取列表
			async getList() {
				this.loading = true
				const result = await this.$axios.get(this.API.getTeamUsers, {
					params: {
						teamId: this.options.id
					}
				})
				this.loading = false
				if (result.users && result.users.length) {
					let users = result.users
					for (let i = 0; i < users.length; i++) {
						users[i].is = false
					}
					this.list = users
					this.empty = false
				} else {
					this.list = []
					this.empty = true
				}
			},
			// 选择
			itemChange (item, key) {
				for (let i = 0; i < this.list.length; i++) {
					if (key === i) {
						this.list[i].is = !this.list[i].is
					}
				}
				this.setUids()
			},
			// 设置uids
			setUids () {
				this.ids = []
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].is) {
						this.ids.push(this.list[i].userUid)
					}
				}
			},
			// 保存前
			saveBefore () {
				if (!this.ids.length) {
					return this.$base.Tips('请选择要移除队员')
				}
				this.form.uids = this.ids.join()
				sdkService.deleteGroupMember({
					groupID: this.options.groupID,
					userIDList: this.ids,
					reason: '你违规了，我要踢你！',
				}, res => {
					if (res) {
						this.save()
					}
				})
			},
			// 保存
			async save () {
				this.loading = true
				const result = await this.$axios.delete(this.API.teamRemove, {
					params: this.form
				})
				this.loading = false
				if (result) {
					uni.$emit('teamVoiceRoom')
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.remove {
		min-height: calc(100vh);

		.body_scroll {
			.list {
				background-color: $white;
				border-radius: 18rpx;
				margin: 13px;
				.item {
					line-height: 48rpx;
					padding: 20rpx;
					display: flex;
					align-items: center;
					position: relative;
					&.active {
						.head_portrait {
							&::before {
								border: 1px solid $AA2929;
							}
							&::after {
								background-color: $AA2929;
							}
						}
					}
					&::before {
						content: '';
						position: absolute;
						bottom: 0;
						right: 0;
						left: 20rpx;
						height: 2rpx;
						background-color: $ECECEC;
					}
					.head_portrait {
						padding-left: 112rpx;
						position: relative;
						height: 80rpx;
						width: 80rpx;
						&::before {
							content: '';
							position: absolute;
							top: 50%;
							left: 38rpx;
							margin-top: -9px;
							height: 18px;
							width: 18px;
							border-radius: 50%;
							border: 1px solid $J79797;
						}
						&::after {
							content: '';
							position: absolute;
							top: 50%;
							left: 48rpx;
							margin-top: -4px;
							height: 10px;
							width: 10px;
							border-radius: 50%;
							background-color: $white;
						}
						.pic {
							border-radius: 50%;
						}
					}
					.name {
						padding-left: 16rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $bg-0;
						flex: 1;
					}
				}
			}
		}
	}
</style>
