<template>
	<view class="schedule white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="title">
				<view class="name omit">{{ $t('team.schedule.title') }}</view>
				<view class="btns">
					<view class="btn" @click="link(`/pages/team/scheduleAdd?teamId=${options.teamId}`)">
						<view class="icomoon icon-createActivity">
							<text class="inline path1"></text>
							<text class="inline path2"></text>
						</view>
					</view>
				</view>
			</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<scroll-view
				class="list"
				:scroll-y="true"
				:style="scrollHeight"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@scrolltolower="scrolltolower"
				v-if="list && list.length">
				<view class="item" v-for="(item, key) in list" :key="key">
					<!-- 1今天，2未来，0过去 -->
					<view class="past_times" v-if="item.dateFlag === '0'">过去</view>
					<view class="date">
						<view class="l">{{ item.dateDifference | across }}</view>
						<view class="r">{{ item.scheduleDisplayDate | across }}</view>
					</view>
					<view class="group">
						<view class="cell" v-for="(i, k) in item.children" :key="k">
							<view class="head_portrait" @click.stop="link(`/pages/share/he?uid=${i.createBy}`)">
								<image class="pic" mode="aspectFill" :src="i.creatorAvatarUrl"></image>
							</view>
							<view class="content">
								<view class="head_info">
									<view class="name" @click.stop="link(`/pages/share/he?uid=${i.createBy}`)">{{ i.creatorNickname | across }}</view>
									<!-- 0的话表示不是志愿者，不展示花蝴蝶，1的话相反 -->
									<view class="ico" v-if="i.creatorIsVolunteer === '1'">
										<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/me_userInfo_logo.png"></image>
									</view>
								</view>
								<text class="text" :user-select="true"><text class="time">{{ i.scheduleDisplayTime | across }}</text>{{ i.content | across }}</text>
								<view class="option">
									<view class="del" @click="del(i)" v-if="options.roomRoot === '2' || i.createBy === uid">取消活动</view>
									<view class="give">
										<div class="follow_user" v-if="i.users && i.users.length">
											<view class="photo" v-for="(x, y) in i.users" :key="y" :style="'z-index: ' + (i.users.length - y)">
												<image class="pic" mode="aspectFill" :src="x.avatarUrl"></image>
											</view>
											<view class="photo more" v-if="i.users.length > 5">
												<i class="iconfont icon-gengduo"></i>
											</view>
										</div>
										<div class="follow_total" :class="{active: i.joined === '1'}" @click="join(i)">
											<i class="icomoon icon-joinActivity_red" v-if="i.joined === '1'"></i>
											<i class="icomoon icon-joinActivity_grey" v-else></i>
											{{ i.scheduleUserNum > 0 ? i.scheduleUserNum : '' }}
										</div>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- noData -->
			<view class="no_data" :style="noDataHeight" v-if="!loading && empty">
				<view>
					<view class="name">暂无小队活动</view>
					<view class="more arrow" @click="link(`/pages/team/scheduleAdd?teamId=${options.teamId}`)">发起活动</view>
				</view>
			</view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

<script>
	import mixins from '@/utils/mixins'

	export default {
		mixins: [mixins],
		data() {
			return {
				uid: uni.getStorageSync('uid'),
				options: {
					roomRoot: '3'
				}
			}
		},
		onLoad(e) {
			if (e) {
				this.options = Object.assign({}, this.options, e)
			}
		},
		onShow() {
			this.getUserRole()
			this.getList()
		},
		computed: {
			noDataHeight() {
				return `height: calc(100vh - ${this.CustomBar}px); padding: 0;`;
			}
		},
		methods: {
			// 查询用户在房间内的角色
			async getUserRole () {
				const result = await this.$axios.get(this.API.getUserRole, {
					params: {
						rid: this.options.rid
					}
				})
				if (result) {
					// 1带飞管理员，2房主，3交流成员/队员
					this.options.roomRoot = result
				}
			},
			// 获取列表
			async getList (type) {
				this.loading = true
				const result = await this.$axios.get(this.API.teamScheduleGet, {
					params: {
						teamId: this.options.teamId,
						page: this.page
					}
				})
				this.loading = false
				this.triggered = false
				if (result && result.teamSchedules && result.teamSchedules.length) {
					const { teamSchedules, end } = result
					if (type === 'push') {
						this.list = this.list.concat(teamSchedules)
					} else {
						this.list = teamSchedules || []
					}
					this.end = end
					this.empty = false
				} else {
					this.empty = true
					this.list = []
					this.end = '0'
				}
			},
			// 长按复制
			longpress (value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						this.$base.Tips('已复制')
					}
				})
			},
			// 是否取消该活动
			del (item) {
				uni.showModal({
					confirmColor: '#AA2929',
					content: '取消该活动？',
					success: async res => {
						if (res.confirm) {
							this.loading = true
							const result = await this.$axios.delete(this.API.teamScheduleDel, {
								params: {
									id: item.id
								}
							})
							this.loading = false
							if (result) {
								uni.$emit('team')
								uni.$emit('teamActivity')
								this.getList()
							}
						}
					}
				})
			},
			// 参与小队活动/取消参与
			async join (item) {
				this.loading = true
				const result = await this.$axios.post(this.API.teamScheduleJoin, {
					participant: uni.getStorageSync('uid'),
					teamId: parseInt(this.options.teamId),
					scheduleId: item.id
				})
				this.loading = false
				if (result) {
					uni.$emit('team')
					uni.$emit('teamActivity')
					if (item.joined !== '1') {
						this.setSubscribe(item)
					}
					this.getList()
				}
			},
			// 订阅消息
			setSubscribe (item) {
				uni.requestSubscribeMessage({
					tmplIds: ['e1UEnUsS3LOf8dQMQCr0mscfndwxqFYKK3OkLxkfTW8'],
					success: res => {
						if (res.e1UEnUsS3LOf8dQMQCr0mscfndwxqFYKK3OkLxkfTW8 === 'accept') {
							const offiAcctOpenid = uni.getStorageSync('offiAcctOpenid')
							item.offiAcctOpenid = offiAcctOpenid
							offiAcctOpenid && this.pushSubscribeMessage(item)
						}
					}
				})
			},
			// 推送公众号一次性订阅消息
			async pushSubscribeMessage (item) {
				console.log(item)
				const result = await this.$axios.post(this.API.pushSubscribeMessage, {
					openid: item.offiAcctOpenid,
					pagePath: '/pages/index/index',
					detail: item.content,
					title: item.content
				})
				if (result) {
					this.getList()
				}
			},
			// 跳转
			link (path) {
				uni.navigateTo({
					url: path
				})
			},
			// 自定义下拉刷新被触发
			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>
	.schedule {
		min-height: calc(100vh);
		.title {
			display: flex;
			align-items: center;
			.name {
				flex: 1;
			}
			.btns {
				display: flex;
				align-items: center;
				.btn {
					font-size: 36rpx;
					font-weight: 100;
					color: $bg-0;
				}
			}
		}
		.body_scroll {
			.list {
				.item {
					padding: 26rpx;
					& + .item {
						margin-top: 26rpx;
					}
					.date {
						display: flex;
						align-items: center;
						line-height: 60rpx;
						font-size: 28rpx;
						font-weight: 400;
						.l {
							border-radius: 18rpx 18rpx 0 0;
							background-color: $white;
							padding: 0 30rpx;
							color: $bg-0;
						}
						.r {
							text-align: right;
							color: $J49494;
							flex: 1;
						}
					}
					.group {
						border-radius: 0 18rpx 18rpx;
						background-color: $white;
						.cell {
							padding: 32rpx 20rpx;
							position: relative;
							display: flex;
							& + .cell {
								.content::before {
									content: '';
									position: absolute;
									top: -32rpx;
									right: 0;
									left: 0;
									height: 2rpx;
									background-color: $ECECEC;
								}
							}
							.head_portrait {
								overflow: hidden;
								min-width: 64rpx;
								border-radius: 50%;
								height: 64rpx;
								width: 64rpx;
							}
							.content {
								position: relative;
								padding-left: 14rpx;
								flex: 1;
								.head_info {
									display: flex;
									align-items: center;
									margin-bottom: 10rpx;
									.name {
										padding-right: 14rpx;
										line-height: 48rpx;
										font-size: 30rpx;
										font-weight: 400;
										color: $S55B88;
									}
									.ico {
										height: 32rpx;
										width: 32rpx;
									}
								}
								.text {
									margin-bottom: 28rpx;
									line-height: 42rpx;
									font-size: 30rpx;
									font-weight: 400;
									color: $E72727;
									.time {
										margin-right: 5px;
										display: inline;
										color: $J49494;
									}
								}
								.option {
									display: flex;
									align-items: center;
									line-height: 42rpx;
									.del {
										font-size: 26rpx;
										font-weight: 400;
										color: $S55B88;
									}
									.give {
										display: flex;
										align-items: center;
										justify-content: flex-end;
										font-size: 26rpx;
										font-weight: 400;
										color: $J49494;
										flex: 1;
										.follow_user {
											display: flex;
											align-items: center;
											margin-right: 24rpx;
											.photo {
												position: relative;
												border-radius: 50%;
												overflow: hidden;
												height: 40rpx;
												width: 40rpx;
												& + .photo {
													margin-left: -10rpx;
												}
												&.more {
													background-color: $f5;
													display: flex;
													align-items: center;
													justify-content: center;
													.iconfont {
														font-size: 22rpx;
														line-height: 1;
														color: $ccc;
													}
												}
											}
										}
										.follow_total {
											display: flex;
											align-items: center;
											font-size: 26rpx;
											&.active {
												color: $D62E31;
											}
											.icomoon {
												padding-right: 8rpx;
												font-size: 36rpx;
											}
										}
									}
								}
							}
						}
					}
				}
			}
			.past_times {
				position: relative;
				text-align: center;
				position: relative;
				font-size: 36rpx;
				line-height: 1;
				padding: 20rpx;
				z-index: 2;
				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 58%;
					width: 120rpx;
					height: 2rpx;
					background-color: rgba($color: $C2C2C2, $alpha: 0.3);
				}
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					right: 58%;
					width: 120rpx;
					height: 2rpx;
					background-color: rgba($color: $C2C2C2, $alpha: 0.3);
				}
			}
			.no_data {
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.name {
					line-height: 42rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: $bg-0;
				}
				.more {
					margin: 40rpx auto 0 auto;
					line-height: 44rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 600;
					color: $AA2929;
					width: 128rpx;
					&::after {
						border-bottom: 4rpx solid $AA2929;
						border-left: 4rpx solid $AA2929;
					}
				}
			}
		}
	}
</style>
