<template>
	<view class="apply white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('team.apply.title') }}</block>
		</Nav>
		<view :style="{paddingTop: `${CustomBar}px`}">
			<scroll-view
				class="body_scroll clearfix"
				:scroll-y="true"
				:style="scrollHeight"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@scrolltolower="scrolltolower">
				<view class="list clearfix">
					<!-- 0已过期，1已加入，2已移出，3已退出，4未处理 -->
					<view class="item" v-for="(item, key) in list" :key="key" :class="{active: item.applyStatus !== '4'}">
						<view class="th">
							<view class="user">
								<view class="head_portrait">
									<image class="pic" mode="aspectFill" :src="item.avatarUrl"></image>
								</view>
								<view class="title omit">{{ item.nickname | across }}</view>
							</view>
							<view class="status active" v-if="item.applyStatus === '4'" @click="statusChange(item)">同意</view>
							<view class="status" v-else>{{ dict['applyStatus'][item.applyStatus] }}</view>
						</view>
						<view class="content">{{ item.applyMessage | across }}</view>
						<view class="read">
							<view class="read_time">{{ item.dateDifference | across }}</view>
						</view>
					</view>
					<!-- noData -->
					<noData title="近期暂无入队申请" v-if="!loading && empty" />
					<!-- loading -->
					<loading :visible="loading" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

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

	export default {
		mixins: [mixins],
		data() {
			return {
				dict: {
					applyStatus: this.API.dict['applyStatus']
				},
				messageList: []
			}
		},
		onLoad(e) {
			if (e) {
				this.options = Object.assign({}, this.options, e)
				this.form.teamId = this.options.id
			}
		},
		onShow() {
			this.getList()
			this.getMessageList()
		},
		methods: {
			// 获取列表
			async getList(type) {
				this.loading = true
				const result = await this.$axios.get(this.API.getTeamApply, {
					params: {
						teamId: this.options.id,
						page: this.page
					}
				})
				this.loading = false
				this.triggered = false
				if (result && result.teamApplies && result.teamApplies.length) {
					const { teamApplies, end } = result
					if (type === 'push') {
						this.list = this.list.concat(teamApplies)
					} else {
						this.list = teamApplies || []
					}
					this.end = end
					this.empty = false
				} else {
					this.list = []
					this.empty = true
				}
			},
			// 系统通知消息
			getMessageList () {
				sdkService.getMessageList({
					conversationID: '@TIM#SYSTEM',
					count: 15
				}, res => {
					console.log(res)
					const { messageList } = res
					this.messageList = messageList
				})
			},
			// 入队申请
			statusChange (item) {
				let message = {}
				for (let i = 0; i < this.messageList.length; i++) {
					if ((this.messageList[i].payload.operatorID === item.applyUser) && (this.messageList[i].payload.operationType === 1)) {
						message = this.messageList[i]
					}
				}
				if (!message) {
					this.$base.Tips('没有符合的申请实例message')
					return 
				}
				this.loading = false
				sdkService.handleGroupApplication({
					handleAction: 'Agree',
					handleMessage: '欢迎欢迎',
					message: message
				}, res => {
					this.loading = false
					if (res) {
						this.save({
							approver: item.applyUser,
							id: item.id
						})
					}
				})
			},
			// 保存
			async save (params) {
				this.loading = true
				const result = await this.$axios.put(this.API.teamAgree, params)
				this.loading = false
				if (result) {
					uni.$emit('teamVoiceRoom')
					this.getList()
				}
			},
			// 自定义下拉刷新被触发
			onRefresh () {
				this.page = 1
				this.triggered = true
				this.getList()
			},
			// 自定义下拉刷新被复位
			onRestore () {
				this.triggered = false
			},
			// 滚动到底部
			scrolltolower (e) {
				if (this.end === '0') {
					this.page++
					this.getList('push')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/mixins.scss";
	
	.apply {
		min-height: calc(100vh);
		.body_scroll {
			.list {
				.item {
					box-shadow: -4rpx 4rpx 8rpx 2rpx rgba($color: $bg-0, $alpha: 0.08);
					background-color: $white;
					padding-bottom: 34rpx;
					border-radius: 18rpx;
					margin: 26rpx;
					&.active {
						box-shadow: none;
						.content {
							color: $J49494;
						}
					}
					.th {
						display: flex;
						align-items: center;
						padding: 32rpx 20rpx;
						.user {
							overflow: hidden;
							flex: 1;
							display: flex;
							align-items: center;
							.head_portrait {
								border-radius: 50%;
								overflow: hidden;
								height: 64rpx;
								width: 64rpx;
							}
							.title {
								padding-left: 16rpx;
								line-height: 42rpx;
								font-size: 30rpx;
								font-weight: 400;
								color: $S55B88;
							}
						}
						.status {
							background-color: $dcdcdc;
							border-radius: 32rpx;
							line-height: 56rpx;
							text-align: center;
							width: 160rpx;
							height: 56rpx;
							font-size: 30rpx;
							font-weight: 400;
							color: $J49494;
							&.active {
								background-color: $AA2929;
								color: $white;
							}
						}
					}
					.content {
						padding: 0 20rpx 20rpx;
						text-align: justify;
						line-height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $bg-0;
					}
					.read {
						display: flex;
						align-items: center;
						padding: 0 20rpx;
						.read_time {
							line-height: 36rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: $J49494;
						}
					}
				}
			}
		}
	}
</style>
