<template>
	<view class="schoolSelect white_style">
		<Nav className="nav_F6" :backVisible="true">
			<block slot="content" class="omit">{{ $t('index.schoolSelect.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="search">
				<view class="content">
					<view class="ico">
						<i class="iconfont icon-sousuo"></i>
					</view>
					<input class="uni-input" v-model="form.schoolName" placeholder="输入学校名称" />
				</view>
				<view class="btn" :class="{no: !form.schoolName}" @click="search">搜索</view>
			</view>
			<view class="list" v-if="list && list.length">
				<view class="item" v-for="(item, key) in list" :key="key" @click="callback(item)" :class="{active: item.idenCode === id}">
					<view class="name omit">{{ item.fullName | across }}</view>
					<view class="ico">
						<i class="iconfont icon-duihao"></i>
					</view>
				</view>
			</view>
			<view class="no_data" v-if="!loading && empty">暂无搜索结果</view>
			<view class="feedback" v-if="!loading && feedbackVisible">
				<button class="contact" open-type="contact">没有找到学校？点击反馈</button>
			</view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

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

	export default {
		mixins: [mixins],
		data() {
			return {
				form: {
					schoolName: undefined
				},
				feedbackVisible: false, // 点击反馈 是否显示
				subscribeItem: {}
			}
		},
		onLoad(e) {
			if (e) {
				this.id = e.schoolCode
				this.form.schoolName = e.schoolName
				this.form.schoolName && this.getList()
			}
		},
		methods: {
			// 获取列表
			async getList (type) {
				this.loading = true
				const result = await this.$axios.get(this.API.getSchool, {
					params: {
						schoolName: this.form.schoolName,
						page: this.page
					}
				})
				this.loading = false
				this.feedbackVisible = true
				this.triggered = false
				if (result && result.schools && result.schools.length) {
					const { schools, end } = result
					if (type === 'push') {
						this.list = this.list.concat(schools)
					} else {
						this.list = schools || []
					}
					this.end = end
					this.empty = false
				} else {
					this.empty = true
					this.list = []
					this.end = '0'
				}
			},
			// 搜索
			search () {
				if (!this.form.schoolName) {
					return
				}
				this.page = 1
				this.getList()
			},
			// 回调
			callback (item) {
				// 是否开放 0否 1是
				if (item.isOpen === '0') {
					uni.showModal({
						title: '校园开放预约',
						confirmText: '预约',
						confirmColor: '#AA2929',
						content: '开放时将以消息通提醒你',
						success: res => {
							if (res.confirm) {
								this.subscribeItem = item
								this.setSubscribe()
							}
						}
					})
				} else {
					uni.$emit('schoolSelect', item)
					uni.navigateBack()
				}
			},
			// 订阅消息
			setSubscribe (item) {
				uni.requestSubscribeMessage({
					tmplIds: ['e1UEnUsS3LOf8dQMQCr0mscfndwxqFYKK3OkLxkfTW8'],
					success: res => {
						if (res['e1UEnUsS3LOf8dQMQCr0mscfndwxqFYKK3OkLxkfTW8'] === 'accept') {
							const offiAcctOpenid = uni.getStorageSync('offiAcctOpenid')
							offiAcctOpenid && this.pushSubscribeMessage(offiAcctOpenid)
						}
					}
				})
			},
			// 推送公众号一次性订阅消息
			async pushSubscribeMessage (offiAcctOpenid) {
				const result = await this.$axios.post(this.API.pushSubscribeMessage, {
					pagePath: '/pages/index/index',
					title: '你关心的校园已开放',
					detail: `[${this.subscribeItem.fullName}]已开放。添加校园，和校友一起分享互助~`,
					openId: offiAcctOpenid
				})
			}
		},
		onReachBottom (e) {
			if (this.end === '0') {
				this.page++
				this.getList('push')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.schoolSelect {
		min-height: calc(100vh);
		.body_scroll {
			.search {
				display: flex;
				align-items: center;
				padding: 12px 26rpx 0 26rpx;
				.content {
					box-shadow: -4rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.08);
					padding: 10px 10px 10px 0;
					border-radius: 19rpx;
					background: $white;
					font-size: 30rpx;
					font-weight: 400;
					color: $bg-0;
					flex: 1;
					display: flex;
					align-items: center;
					.ico {
						font-size: 36rpx;
						margin: 0 16rpx;
						color: $J49494;
						height: 24px;
						width: 24px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.uni-input {
						line-height: 24px;
						height: 24px;
					}
				}
				.btn {
					background-color: $mc;
					border-radius: 8rpx;
					text-align: center;
					margin-left: 18rpx;
					line-height: 54rpx;
					font-size: 28rpx;
					color: $white;
					width: 132rpx;
					height: 54rpx;
					&.no {
						background-color: $dcdcdc;
					}
				}
			}
			.list {
				background-color: $white;
				border-radius: 18rpx;
				overflow: hidden;
				margin: 10px 13px;
				.item {
					padding: 34rpx 24rpx 34rpx 20rpx;
					background-color: $white;
					position: relative;
					line-height: 48rpx;
					display: flex;
					align-items: center;
					& + .item::before {
						content: '';
						position: absolute;
						top: 0;
						right: 0;
						left: 20rpx;
						height: 2rpx;
						background-color: $ECECEC;
					}
					&.active {
						.ico {
							color: $L7C160;
						}
					}
					.name {
						padding-right: 20rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $bg-0;
						flex: 1;
					}
					.ico {
						text-align: center;
						min-width: 48rpx;
						font-size: 40rpx;
						color: $white;
						height: 48rpx;
						width: 48rpx;
					}
				}
			}
			.no_data {
				padding: 112rpx 0 0 0;
				text-align: center;
				line-height: 30rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: $bg-0;
			}
			.feedback {
				text-align: center;
				margin: 32px 0;
				.contact {
					background-color: transparent;
					line-height: 16px;
					font-size: 26rpx;
					font-weight: 500;
					color: $E95B8C;
					&::after {
						content: none;
					}
				}
			}
		}
	}
</style>
