<template>
	<view class="campusSelect white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('index.campusSelect.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="list">
				<view class="item" v-for="(item, key) in list" :key="key" @click="callback(item)" :class="{active: item.schoolCode === id}">
					<view class="name omit">{{ item.schoolName | across }}</view>
					<view class="ico">
						<i class="iconfont icon-duihao"></i>
					</view>
				</view>
				<view class="item" @click="callback({})" :class="{active: !id}">
					<view class="name omit">不关联</view>
					<view class="ico">
						<i class="iconfont icon-duihao"></i>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

	export default {
		mixins: [mixins],
		data() {
			return {
			}
		},
		onLoad(e) {
			if (e) {
				this.id = e.schoolCode
			}
			this.getList()
		},
		methods: {
			// 获取列表
			async getList () {
				this.loading = true
				const result = await this.$axios.get(this.API.getRelatedTeamOrSchool, {
					params: {
						type: 2 // 1查询关联小队，2查询关联校园
					}
				})
				this.loading = false
				if (result && result.length) {
					this.list = result
				} else {
					this.list = []
				}
			},
			// 回调
			callback (item) {
				uni.$emit('campusSelect', item)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.campusSelect {
		min-height: calc(100vh);
		.body_scroll {
			.list {
				margin: 60rpx 26rpx 26rpx;
				border-radius: 18rpx;
				overflow: hidden;
				.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;
					}
				}
			}
		}
	}
</style>
