<template>
	<div class="it-container">
		<div class="node-info">
			<span>当前选择章节：</span>
			<span class="node-name">{{ nodeInfo.title }}</span>
		</div>
		<div class="search-wrap" v-if="isSchool">
			<Input v-model="searchVal"  placeholder="输入教师名字或ID查询..."
			icon="ios-close-circle-outline" @on-click="onCloseSearch" @on-change="onSearchChange"/>
		</div>
		<div class="teacher-wrap">
			<Table class="dark-iview-table" :columns="teacherCol" :data="teacherList" height="400" v-if="isSchool">
				<template slot-scope="{ row }" slot="name">
					<div style="display: flex;align-items: center;">
						<PersonalPhoto :name="row.name" :picture="row.picture" />
						<span style="margin-left: 10px;">{{ row.name }}</span>
					</div>
				</template>
				<template slot-scope="{ row }" slot="action">
					<div style="display: flex;align-items: center;">
						<i-switch true-color="#13ce66"></i-switch>
					</div>
				</template>
			</Table>
			<div class="search-id-wrap" v-else>
				<div class="id-search">
					<Input v-model="searchIdVal" placeholder="搜索教师..." search @on-search="onIdSearch"/>
					<p v-html="$t('teachermgmt.addTeacher.content')"></p>
					<p v-if="curTeacher && curTeacher.id" class="search-result-text">搜索结果</p>
					<div v-if="curTeacher && curTeacher.id" class="search-result-wrap">
						<PersonalPhoto :name="curTeacher.name" :picture="curTeacher.picture" />
						<p class="t-name">{{ curTeacher.name }}</p>
						<p class="t-id">{{ curTeacher.id }}</p>
					</div>
					<p v-if="!curTeacher && hasSearchResult" class="search-none">暂未查询到相关结果</p>
					<p v-if="hasSearchResult" class="re-search" @click="onReSearch">重新搜索</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
	export default {
		components: {
			PersonalPhoto
		},
		props: {
			node: {
				type: Object,
				default: () => {
					return {
						title: ''
					}
				}
			}
		},
		data() {
			return {
				isSchool:false,
				hasSearchResult:false,
				searchVal:'',
				searchIdVal:'',
				nodeInfo: {
					title: ''
				},
				curTeacher:{
					name:'',
					picture:'',
					id:'',
					job:''
				},
				teacherCol: [{
						title: this.$t('teachermgmt.table.th2'),
						key: 'name',
						slot: 'name'
					},
					{
						title: this.$t('teachermgmt.table.th1'),
						key: 'id'
					},
					{
					  title: this.$t('teachermgmt.table.th3'),
					  key: 'job',
					  render: (h, params) => {
					    if (typeof params.row.job === 'undefined' || params.row.job == null || params.row.job === '') {
					      return h('span', this.$t('teachermgmt.job.teacher'))
					    } else {
					      return h('span', params.row.job)
					    }
					  }
					},
					{
						title: '是否共编',
						key:'action',
						slot: 'action'
					}
				],
				teacherList: [],
				originList:[]
			}
		},
		created() {
			this.isSchool = this.$route.name === 'syllabus'
		},
		methods: {
			/* 获取学校所有教师列表 */
			getAllTeacher() {
				this.$store.dispatch('user/getSchoolTeacher').then(
					res => {
						if (res.code == 0) {
							this.$Message.error('無法取得使用者資料')
						} else {
							this.teacherList = this.$store.state.user.schoolUserList.filter(i => i.status === 'join')
							this.originList = JSON.parse(JSON.stringify(this.teacherList))
						}
					},
					err => {
						this.$Message.error('user/setSchoolTeacher API error!')
					}
				)
			},
			/* 搜索词汇发生变化 */
			onSearchChange(){
				this.teacherList = this.originList.filter(i => i.name.indexOf(this.searchVal) > -1 || i.id.indexOf(this.searchVal) > -1)
			},
			/* 关闭搜索 */
			onCloseSearch(){
				this.searchVal = ''
				this.teacherList = JSON.parse(JSON.stringify(this.originList))
			},
			/* 根据ID邮箱手机号搜索教师信息 */
			onIdSearch(){
				this.$store.dispatch('user/getUserFromCoreId', [this.searchIdVal]).then(
				    (res) => {
				        if (res.code == 1) {
				            this.curTeacher = res.data.length ? res.data[0] : null
				        } else {
				            this.$Message.error('user/getUserFromCoreId API error!')
				        }
						this.hasSearchResult = true
				    },
				    (err) => {
				        this.$Message.error('user/getUserFromCoreId API error!')
				    }
				)
			},
			/* 重新搜索 */
			onReSearch(){
				this.searchIdVal = ''
				this.curTeacher = null
				this.hasSearchResult = false
			}
		},
		mounted() {
			this.isSchool && this.getAllTeacher()
		},
		watch: {
			node: {
				handler(n, o) {
					if (n) {
						this.nodeInfo = n
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="less" scoped src="./InviteTeacher.less"></style>
<style lang="less">
	.it-container{
		.teacher-wrap {
			.dark-iview-table .ivu-table td {
				border-color: #494949;
				color: #c4c4c4 !important;
			}
		}
		
		.search-wrap{
			.ivu-input-wrapper{
				width: 300px;
				line-height: 35px;
			}
			.ivu-input{
				background-color: #474747;
				border-color: #515151;
				font-size: 12px;
				color: #ddd;
				margin: 20px 0;
				border-radius: 50px;
				padding-left: 10px;
				height: 35px;
			}
			
			.ivu-input-icon{
				line-height: 75px;
			}
		}
		
		.search-id-wrap{
			margin-top: 20px;
			color: #adadad;
			.point{
				color: #F1F1F1;
				font-weight: bold;
				font-size: 16px;
				margin: 0 10px;
			}
			
			.id-search{
				height: 400px;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.ivu-input-wrapper{
					width: 500px;
					line-height: 35px;
				}
				.ivu-input{
					background-color: #474747;
					border-color: #515151;
					font-size: 14px;
					color: #ddd;
					margin: 20px 0;
					border-radius: 50px;
					padding-left: 20px;
					height: 45px;
				}
				
				.ivu-input-icon{
					line-height: 86px;
					margin-right: 10px;
				}
			}
			
			.search-result-text{
				margin-top: 60px;
				margin-bottom: 10px;
			}
			
			.search-result-wrap{
				background-color: #4e4e4e;
				padding: 20px;
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.avatar , .fakeAvatar{
					width: 60px !important;
					height: 60px !important;
					border-radius: 50%;
				}
				.t-name{
					color: #fff;
					font-size: 16px;
					font-weight: bold;
					margin: 10px 0;
				}
			}
			
			.search-none{
				color: #ff4f80;
				font-size: 16px;
				font-weight: bold;
				margin-top: 80px;
			}
			
			.re-search{
				margin: 20px 0;
				text-decoration: underline;
				color: #FFFCFC;
				font-size: 14px;
				cursor: pointer;
			}
		}
	}
</style>
