<template>
	<view class="scheduleAdd white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('team.scheduleAdd.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="scheduleAdd_form">
				<view class="item">
					<view class="content">
						<textarea :show-confirm-bar="false" class="uni-textarea" placeholder-class="uni-placeholder__class" v-model.trim="form.content" placeholder="这天我们要…" auto-height />
					</view>
				</view>
				<view class="item">
					<view class="title">日期</view>
					<view class="content">
					<picker mode="multiSelector" @change="dateChange" :value="options.currentDateIndex" :range="[options.dates, options.hours, options.minutes]" range-key="value">
						<view class="date arrow"> {{ $base.SET_DATE(options.currentDate, 'YY-MM-DD hh:mm') || '请选择' }}</view>
					</picker>
					</view>
				</view>
				<view class="btn" @click="saveBefore" :class="{active: options.checked}">发起</view>
			</view>
		</view>
	</view>
</template>

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

	export default {
		mixins: [mixins],
		data() {
			return {
				options: {
					checked: false,
					dates: [],
					hours: [
						{ id: 0, value: '0时'},
						{ id: 1, value: '1时'},
						{ id: 2, value: '2时'},
						{ id: 3, value: '3时'},
						{ id: 4, value: '4时'},
						{ id: 5, value: '5时'},
						{ id: 6, value: '6时'},
						{ id: 7, value: '7时'},
						{ id: 8, value: '8时'},
						{ id: 9, value: '9时'},
						{ id: 10, value: '10时'},
						{ id: 11, value: '11时'},
						{ id: 12, value: '12时'},
						{ id: 13, value: '13时'},
						{ id: 14, value: '14时'},
						{ id: 15, value: '15时'},
						{ id: 16, value: '16时'},
						{ id: 17, value: '17时'},
						{ id: 18, value: '18时'},
						{ id: 19, value: '19时'},
						{ id: 20, value: '20时'},
						{ id: 21, value: '21时'},
						{ id: 22, value: '22时'},
						{ id: 23, value: '23时'}
					],
					minutes: [
						{ id: 0, value: '0分' },
						{ id: 15, value: '15分' },
						{ id: 30, value: '30分' },
						{ id: 45, value: '45分' }
					],
					currentDate: '',
					currentDateIndex: [0, 0, 0]
				},
				rules: [
					{ name: 'content', errorMsg: '请输入活动内容' }
				],
				form: {
					teamId: '',
					content: '',
					scheduleTime: '',
					createBy: uni.getStorageSync('uid')
				}
			}
		},
		onLoad(e) {
			if (e) {
				this.options = Object.assign({}, this.options, e)
				this.form.teamId = e.teamId
			}
		},
		watch: {
			form: {
				handler() {
					if (this.form.content) {
						this.options.checked = true
					} else {
						this.options.checked = false
					}
				},
				deep: true
			}
		},
		created() {
			this.dateInit()
		},
		methods: {
			// 日期初始化 范围是当日到此后365天
			dateInit (type) {
				this.options.dates = []
				// 计算当前的时间
				let date = dayjs()
				let year
				let month
				let day
				let hour
				let second = 0
				let k3 = 0
				let dateTime
				// 计算当前分所属范围
				switch (true) {
					case date.$m <= 15:
						k3 = 1
						second = 15
					break
					case (15 < date.$m) && (date.$m <= 30):
						k3 = 2
						second = 30
					break
					case (30 < date.$m) && (date.$m <= 45):
						k3 = 3
						second = 45
					break
				}
				// 判断分，大于45往后+1小时
				if (date.$m <= 45) {
					year = date.$y
					month = date.$M + 1
					day = date.$D
					hour = date.$H
				} else {
					let currDay = dayjs().add(1, 'hour')
					year = currDay.$y
					month = currDay.$M + 1
					day = currDay.$D
					hour = currDay.$H
				}
				// 生成初始时间 type是false时不初始化日期，因为为false时是时间控件的操作
				if (type !== false) {
					dateTime = `${this.$base.SET_ZERO(year)}-${this.$base.SET_ZERO(month)}-${this.$base.SET_ZERO(day)} ${this.$base.SET_ZERO(hour)}:${this.$base.SET_ZERO(second)}:00`
					this.options.currentDate = dateTime
					this.form.scheduleTime = dateTime
				}
				// 日
				for (let i = 0; i < 365; i++) {
					let futureDate = dayjs(dateTime).add(i, 'day')
					let id = `${futureDate.$y}-${futureDate.$M + 1}-${futureDate.$D}`
					let value = `${this.$base.SET_ZERO(futureDate.$M + 1)}月${this.$base.SET_ZERO(futureDate.$D)}日${this.API.dict['week'][futureDate.$W]}`
					this.options.dates.push({
						id: id,
						value: value
					})
				}
				this.options.currentDateIndex = [0, hour, k3]
			},
			// 日期确定
			dateChange (e) {
				let date = dayjs(this.options.dates[e.detail.value[0]].id).format('YYYY-MM-DD')
				let hour = this.$base.SET_ZERO(this.options.hours[e.detail.value[1]].id)
				let minute = this.$base.SET_ZERO(this.options.minutes[e.detail.value[2]].id)
				let dateTime = `${date} ${hour}:${minute}:00`
				this.options.currentDate = dateTime
				this.form.scheduleTime = dateTime
			},
			// 保存前
			saveBefore() {
				this.$base.FORM_VERIFICATIONS(this.rules, this.form, () => {
					this.save()
				})
			},
			// 保存
			async save () {
				this.loading = true
				const result = await this.$axios.post(this.API.teamScheduleSave, this.form)
				this.loading = false
				if (result) {
					console.log('保存', result)
					this.setSubscribe()
					uni.$emit('team')
					uni.$emit('teamActivity')
				}
			},
			// 订阅消息
			setSubscribe () {
					console.log('订阅消息11', 1)
				uni.requestSubscribeMessage({
					tmplIds: ['e1UEnUsS3LOf8dQMQCr0mscfndwxqFYKK3OkLxkfTW8'],
					success: res => {
					console.log('订阅消息22', res['e1UEnUsS3LOf8dQMQCr0mscfndwxqFYKK3OkLxkfTW8'])
						if (res['e1UEnUsS3LOf8dQMQCr0mscfndwxqFYKK3OkLxkfTW8'] === 'accept') {
							const offiAcctOpenid = uni.getStorageSync('offiAcctOpenid')
							offiAcctOpenid && this.pushSubscribeMessage(offiAcctOpenid)
						} else {
							uni.navigateBack()
						}
					},
					fail: res => {
						console.log('fail22', res)
					},
					complete: res => {
						console.log('complete', res)
					}
				})
			},
			// 推送公众号一次性订阅消息
			async pushSubscribeMessage (offiAcctOpenid) {
					console.log('推送公众号一次性订阅消息111', offiAcctOpenid)
				this.loading = true
				const result = await this.$axios.post(this.API.pushSubscribeMessage, {
					pagePath: '/pages/index/index',
					title: this.form.content,
					detail: this.form.content,
					openId: offiAcctOpenid
				})
				this.loading = false
				uni.navigateBack()
				console.log('推送公众号一次性订阅消息222', 222)
				if (result) {
					console.log('推送公众号一次性订阅消息333', result)
					console.log(result)
				}
			}
		}
	}
</script>

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

		.body_scroll {
			.scheduleAdd_form {
				padding: 26rpx 26rpx 96rpx 26rpx;
				.item {
					background-color: $white;
					border-radius: 18rpx;
					line-height: 42rpx;
					align-items: center;
					display: flex;
					padding: 28rpx;
					& + .item {
						margin-top: 40rpx;
					}
					.title {
						font-size: 32rpx;
						font-weight: 400;
						color: $bg-0;
					}
					.content {
						width: 100%;
						flex: 1;
						.uni-textarea {
							min-height: 252rpx;
							font-size: 30rpx;
							font-weight: 400;
							color: $bg-0;
							/deep/ .uni-placeholder__class {
								color: $J49494;
							}
						}
						.date {
							text-align: right;
							font-size: 32rpx;
							font-weight: 400;
							color: $B18181;
						}
					}
				}
				
				.btn {
					background-color: $white;
					margin: 100% auto 0 auto;
					width: 368rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 12rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: $B18181;
					&.active {
						color: $L7C160;
					}
				}
			}
		}
	}
</style>
