<template>
	<div class="school-container">
		<Loading v-show="isLoading"></Loading>
		<div class="school-container-left">
			<div class="school-container-header">
				<span>{{ $t('settings.schoolList')}}</span>
			</div>
			<vuescroll>
				<div class="school-list-wrap">
					<!-- <Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoadList"></Loading> -->
					<div v-if="mySchoolList.length === 0">
						<EmptyData :top="50"></EmptyData>
					</div>
					<div class="list-wrap" v-else>
						<div class="school-item" v-for="(item,index) in mySchoolList" :key="index">
							<span class="school-item-name">
								<span>{{ item.name }}</span>
								<span class="school-item-status" :style='{ background:bgFilter(item.status) }'>{{ statusFilter(item.status) }}</span>
								<span class="school-item-status" style="background-color: #008352;" v-show="item.schoolId === teacherInfo.defaultschool">{{ $t('settings.defaultSchool')}}</span>
								<span class="school-item-status" style="background-color: #f59a2a;" v-show="item.schoolId === curSchool">{{ $t('settings.curSchool')}}</span>
							</span>
							<span class="school-item-code">{{ item.schoolId  }}</span>
							<span class="school-item-nums" v-if="item.status === 'join'">
								<span>
									<Icon type="md-bookmarks" />
									<span>{{ $t('settings.courseNum')}}</span>
									<span style="margin-left: 10px;">{{ item.course }}</span>
								</span>
								<span style="margin-left: 20px;">
									<Icon type="md-star" />
									<span>{{ $t('settings.activityNum')}}</span>
									<span style="margin-left: 10px;">{{ item.activity }}</span>
								</span>
							</span>
							<span class="school-item-nums" v-if="item.status === 'request'">
								于 2020-08-02 {{ $t('settings.joinStatus')}}
							</span>
							<span class="school-item-nums" v-if="item.status === 'invite'">
								于 2020-08-02 {{ $t('settings.requestStatus')}}
							</span>
							<span class="school-item-role">{{ item.role }}</span>
							<span class="school-item-btn" v-if="item.status === 'join' && item.schoolId !== curSchool" @click="onGoSchool(item)">
								<span>
									<Icon type="md-swap" style="transform: rotate(90deg);" />
									<span>{{ $t('settings.goSchool')}}</span>
								</span>
							</span>
<!-- 							<span class="school-item-btn" style="background: rgb(202,54,54);" v-if="item.status === 'request'">
								<span>
									<Icon type="md-close" />
									<span>取消申请</span>
								</span>
							</span> -->
							<span class="school-item-btn" style="background: #1CC0F3;right: 140px;" v-if="item.status === 'invite'" @click="onConfirmJoin(item)">
								<span>
									<Icon type="md-checkmark" />
									<span>{{ $t('settings.agreeJoin')}}</span>
								</span>
							</span>
							<span class="school-item-btn" style="background: rgb(202,54,54);" v-if="item.status === 'invite'">
								<span>
									<Icon type="md-close" />
									<span>{{ $t('settings.cancelAdd')}}</span>
								</span>
							</span>
						</div>
					</div>
				</div>
			</vuescroll>
		</div>
		<div class="school-container-right">
			<div class="school-container-header">
				<span>{{ $t('settings.requestJoin')}}</span>
				<div>
					<Input :placeholder="$t('settings.inputSearch')" @on-change="onSearchList" v-model="schoolListSearch">
					<Icon type="ios-search" slot="prefix" />
					</Input>
				</div>
				
			</div>
			<div class="table-wrap">
				<Table stripe :columns="schoolColumns" :data="schoolList"></Table>
			</div>
		</div>
		<Modal v-model="goSchoolModal" class-name="go-school-modal" footer-hide>
			<p>{{ $t('settings.modalTip1')}}</p>
			<p>{{ $t('settings.modalTip2')}}</p>
			<p>{{ curSchoolItem ? curSchoolItem.name : '' }}</p>
			<p>{{ $t('settings.modalTip3')}}</p>
			<Button @click="onChangeSchool">{{ $t('evaluation.confirm')}}</Button>
		</Modal>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				teacherInfo:{
					defaultschool:''
				},
				mySchoolSearch:'',
				schoolListSearch:'',
				goSchoolModal: false,
				isLoading:false,
				mySchoolList: [],
				originMySchoolList:[],
				originList: [],
				activeIndex: 0,
				isLoadList: false,
				allSchoolList: [],
				curArea: 'default',
				curProvince: 'default',
				curCity: 'default',
				curSchoolItem: null,
				schoolList: [],
				originSchoolList:[],
				schoolColumns: [{
						title: this.$t('settings.columnName'),
						key: 'name',
						width: 500,
					},
					{
						title: this.$t('settings.columnArea'),
						render: (h, params) => {
							return h('span', params.row.region + '-' +  params.row.province+ '-' + params.row.city);
						}
					},
					{
						title: this.$t('settings.columnId'),
						key: 'id'
					},
					{
						title: this.$t('settings.columnTool'),
						render: (h, params) => {
							return this.tbStatusFilter(params.row.id) === this.$t('settings.requestJoin') ? 
							h('div', [
								h('Button', {
									props: {
										type: 'primary'
									},
									style: {
										// display: this.tbStatusFilter(params.row.id) === '申请加入' ? 'unset' : 'none'
									},
									on: {
										click: () => {
											this.onJoinSchool(params.row)
										}
									}
								}, this.tbStatusFilter(params.row.id)),
							]) : h('div', [
								h('span', {
									style: {
										// display: this.tbStatusFilter(params.row.id) !== '申请加入' ? 'unset' : 'none',
										color:'#1cc0f3'
									}
								}, this.tbStatusFilter(params.row.id))
							]);
						}
					}
				]
			}
		},
		created() {
			this.initTeacherInfo()
			this.getAllShoolList()

			this.mySchoolList = []

		},
		methods: {
			
			async initTeacherInfo(){
				let teacherInfo = await this.getTeacherInfo()
				this.teacherInfo = teacherInfo
				this.mySchoolList = teacherInfo.schools || []
				this.originMySchoolList = JSON.parse(JSON.stringify(this.mySchoolList))
			},
			
			/* 前往学校 */
			onGoSchool(school) {
				this.curSchoolItem = school
				this.goSchoolModal = true
			},

			/* 获取老师的个人清单信息 */
			getTeacherInfo() {
				return new Promise((r,j) => {
					this.isLoading = true
					this.$api.schoolSetting.getTeacherInfo({
						id_token: localStorage.getItem('id_token')
					}).then(
						(res) => {
							if (!res.error) {
								r(res)
								this.isLoading = false
							}
						},
						(err) => {
							console.log(err)
							this.$Message.error("数据获取失败！")
						}
					)
				})
				
			},

			/* 获取老师所在学校的信息 */
			getTeacherSchoolInfo(code) {
				return new Promise((r,j) => {
					this.$api.schoolSetting.getTeacherSchoolInfo({
						id_token: localStorage.getItem('id_token'),
						school_code: code
					}).then(
						(res) => {
							if (!res.error) {
								r(res)
							}
						},
						(err) => {
							this.$Message.error("数据获取失败！")
						}
					)
				})
			},

			/* 获取所有授权学校列表 */
			getAllShoolList() {
				this.$api.schoolSetting.getSchoolList().then(
					(res) => {
						if (!res.error) {
							this.schoolList = res.schools || []
							this.originSchoolList = JSON.parse(JSON.stringify(res.schools))
						}
					},
					(err) => {
						this.$Message.error("数据获取失败！")
					}
				)
			},
			
			/* 申请加入学校 */
			onJoinSchool(item){
				this.$Modal.confirm({
				    title: this.$t('settings.modalTip4'),
				    content: this.$t('settings.modalTip5') + item.name + ' ?',
				    onOk: () => {
						this.$api.schoolSetting.joinSchool({
							grant_type:'request',
							school_code:item.id,
							school_name:item.name
						}).then(
							(res) => {
								console.log(res)
								if (!res.error) {
									this.$Message.success(this.$t('settings.submitSucTips'))
									this.initTeacherInfo()
									this.getAllShoolList()
								}
							},
							(err) => {
								this.$Message.error(this.$t('settings.submitFailTips'))
							}
						)
				    },
					onCancel:() => {
					}
				})
			},
			
			/* 同意邀请 */
			onConfirmJoin(item){
				console.log(item)
				this.$Modal.confirm({
				    title: this.$t('settings.modalTip4'),
				    content: this.$t('settings.modalTip5') + item.name + ' ?',
				    onOk: () => {
						this.$api.schoolSetting.joinSchool({
							grant_type:'join',
							school_code:item.schoolId,
							school_name:item.name
						}).then(
							async (res) => {
								console.log(res)
								if (!res.error) {
									this.$Message.success(this.$t('settings.joinSucTips'))
									// 如果之前用户没有加入任何学校
									if(this.mySchoolList.length && this.mySchoolList.filter(i => i.status === 'join').length === 0){
										let teacherInfo = await this.getTeacherInfo()
										let schoolCode = item.schoolId
										let schoolInfo = await this.getTeacherSchoolInfo(schoolCode)
										this.$EventBus.$emit('onChangeSchool', {
											user:teacherInfo,
											schoolCode:schoolCode,
											isFirst:true
										})
										this.$EventBus.$off('onChangeSchool')
									}else{
										this.initTeacherInfo()
									}
								}
							},
							(err) => {
								this.$Message.error(this.$t('settings.submitFailTips'))
							}
						)
				    },
					onCancel:() => {
					}
				})
			},
			
			/* 前往学校 */
			async onChangeSchool(){
				console.log('触发切换学校')
				this.$EventBus.$emit('onChangeSchool', {
					user:this.teacherInfo,
					schoolCode:this.curSchoolItem.schoolId
				})
				// this.$EventBus.$off('onChangeSchool')
				this.goSchoolModal = false
			},
			
			/* 搜索我的学校 */
			onSearchChange(val){
				this.mySchoolList = this.originMySchoolList.length ? this.originMySchoolList.filter(item => item.name.indexOf(this.mySchoolSearch) > -1) : []
			},
			
			/* 搜索学校清单 */
			onSearchList(val){
				this.schoolList = this.originSchoolList.length ? this.originSchoolList.filter(item => item.name.indexOf(this.schoolListSearch) > -1) : []
			},
		
		},
		computed: {
			statusFilter() { 
				return status => {
					return status === 'join' ? this.$t('settings.status1') : status === 'invite' ? this.$t('settings.status2') : this.$t('settings.status3')
				}
			},
			bgFilter() {
				return status => {
					return status === 'join' ? '#1CC0F3' : status === 'invite' ? '#ea6223' : '#019eff'
				}
			},
			tbStatusFilter(){
				return id => {
					// 判断当前学校是否已加入
					let isJoin =  this.mySchoolList.filter(i => i.status === 'join').map(j => j.schoolId).indexOf(id)  > -1 
					let isInvite =  this.mySchoolList.filter(i => i.status === 'invite').map(j => j.schoolId).indexOf(id)  > -1 
					let isRequest =  this.mySchoolList.filter(i => i.status === 'request').map(j => j.schoolId).indexOf(id)  > -1 
					return isJoin ? this.$t('settings.status1') : isInvite ? this.$t('settings.status2') : isRequest ? this.$t('settings.status3') : this.$t('settings.requestJoin')
				}
			},
			curSchool(){
				return this.$store.state.userInfo.schoolCode
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "./SchoolMgmt.less";
</style>

<style lang="less">
	@borderColor: #424242;
	@second-textColor: #CBCBCB; //文本副级颜色
	
	.school-container-header{
		.ivu-input {
			background: transparent;
			width: 200px;
			border-color: #4a4a4a;
			color: @second-textColor;
		
			&::-webkit-input-placeholder {
				/* WebKit browsers */
				color: #999;
				font-size: 12px;
			}
		}
	}

	.school-container-right {

		.search-wrap {
			.ivu-input {
				background: transparent;
				width: 250px;
				border-color: #4a4a4a;
				color: @second-textColor;

				&::-webkit-input-placeholder {
					/* WebKit browsers */
					color: #999;
					font-size: 12px;
				}
			}

			.ivu-select {
				width: 200px;
				margin-left: 20px;
			}

		}

		.table-wrap {
			.ivu-table {
				background: transparent;
			}

			.ivu-table th,
			.ivu-table td {
				background: transparent;
				color: @second-textColor;
				border-color: @borderColor;
				height: 60px;
			}

			.ivu-table:before,
			.ivu-table-border:after,
			.ivu-table-wrapper-with-border {
				background: @borderColor;
				border-color: @borderColor;
			}

			.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
			.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
				background: #2a2a2a;
			}

			.ivu-table-stripe .ivu-table-body tr.ivu-table-row-hover td,
			.ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-hover td {

				.ivu-btn {
					visibility: visible;
				}

				background: #5C5A5A;
			}
		}

	}

	.go-school-modal {

		.ivu-modal-content {
			background: #3f3f3f;
			color: #b6b6b6;
		}

		p {
			text-align: center;
			font-size: 16px;
			margin: 10px 0;

			&:first-child {
				font-size: 20px;
				font-weight: bold;
				color: #1CC0F3;
				margin: 30px 0;
			}

			&:nth-child(3) {
				color: #fff;
				font-weight: bold;
				font-size: 18px;
				margin: 20px 0;
			}
		}

		.ivu-btn {
			background: #1CC0F3;
			color: #fff;
			border-radius: 0;
			width: 80%;
			height: 45px;
			margin: 30px 10%;
			border: none;
		}
	}
</style>
