<template>
    <div class="teacher-container">
        <span class="to-train-mgt" @click="toAddTeacher">
            <Icon type="md-add" size="24" />
        </span>
        <vuescroll style="padding-bottom:40px">
            <div class="table-tools-wrap"></div>
            <Table :columns="columns1" :data="teachers">
                <template slot-scope="{ row }" slot="picture">
                    <PersonalPhoto :name="row.name" :picture="row.picture" />
                </template>
            </Table>
        </vuescroll>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
export default {
    components: {
        PersonalPhoto
    },
    data() {
        return {
            columns1: [
                {
                    title: ' ',
                    slot: 'picture',
                    align: 'center'
                },
                {
                    title: '教师ID',
                    key: 'id',
                    sortable: true
                },
                {
                    title: '教师姓名',
                    key: 'name',
                    sortable: true
                },
                {
                    title: '教研组',
                    key: 'groupName',
                    sortable: true
                }
            ]
        }
    },
    methods: {
        toAddTeacher() {
            this.$router.push({
                name: 'addTeacher'
            })
        }
    },
    computed: {
        ...mapGetters({
            teachers: 'user/getSchoolUserJoined', // 取得已加入此學校的使用者
        })
    }
}
</script>
<style lang="less" scoped>
@import "./Teacher.less";
</style>
