<template>
	<div class="it-container">
		<div class="node-info">
			<span>当前选择章节：</span>
			<span class="node-name">{{ nodeInfo.title }}</span>
		</div>
		<div class="teacher-wrap">
			<Table class="dark-iview-table" :columns="teacherCol" :data="teacherList" height="500">
				<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;">
						
					</div>
				</template>
			</Table>
		</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 {
				nodeInfo: {
					title: ''
				},
				teacherCol: [{
						title: '姓名',
						key: 'name',
						slot: 'name'
					},
					{
						title: '醍摩豆ID',
						key: 'id'
					},
					{
						title: '权限',
						key: 'size'
					},
					{
						title: '操作',
						slot:'action'
					}
				],
				teacherList: []
			}
		},
		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')
							console.log(this.teacherList)
						}
					},
					err => {
						this.$Message.error('user/setSchoolTeacher API error!')
					}
				)
			}
		},
		mounted() {
			this.getAllTeacher()
		},
		watch: {
			node: {
				handler(n, o) {
					console.log('xxxxxxx', n)
					if (n) {
						this.nodeInfo = n
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="less" scoped src="./InviteTeacher.less"></style>
<style lang="less">
	.teacher-wrap {
		.dark-iview-table .ivu-table td {
			border-color: #494949;
			color: #c4c4c4 !important;
		}
		
		
	}
</style>
