<template>
  <div class="container">
    <v-header title="测试页面"></v-header>
    <div class="content">
      <br />
      <a @click="showStudentSelector" href="javascript:void(0)">点击调用选择学生</a>
      <a @click="showTeacherSelector" href="javascript:void(0)">点击调用选择教师</a>
      <a @click="showClassSelector" href="javascript:void(0)">点击调用选择班级</a>
      <a href="javascript:;" @click="visibleChat = true">点击调用聊天</a>
    </div>
    <student-selector
      :show="showStudentSelectorFlag"
      :userlist="userlist"
      @handleSubmit="handleGetUserList"
    />
    <teacher-selector
      :show="showTeacherSelectorFlag"
      :userlist="userlist"
      @handleSubmit="handleGetUserList"
    />
    <class-selector
      :show="showClassSelectorFlag"
      :userlist="userlist"
      @handleSubmit="handleGetUserList"
    />
    <v-chat :visible.sync="visibleChat"></v-chat>
  </div>
</template>

<script>
import VHeader from '@/common/header/VHeader'
import StudentSelector from '@/common/selector/StudentSelector.vue'
import TeacherSelector from '@/common/selector/TeacherSelector.vue'
import ClassSelector from '@/common/selector/ClassSelector.vue'
export default {
    name: 'Test',
    components: {
        VHeader,
        StudentSelector,
        TeacherSelector,
        ClassSelector
    },
    data () {
        return {
            showStudentSelectorFlag: false,
            showTeacherSelectorFlag: false,
            showClassSelectorFlag: false,
            userlist: [],
            visibleChat: false
        }
    },
    methods: {
        init () {
        },
        showStudentSelector () {
            this.showStudentSelectorFlag = true
        },
        showTeacherSelector () {
            this.showTeacherSelectorFlag = true
        },
        showClassSelector () {
            this.showClassSelectorFlag = true
        },
        handleGetUserList (val) {
            this.showClassSelectorFlag = false
            this.userlist = val
            console.log(this.userlist)
        }
    },
    created: function () {
        this.init()
    }
}
</script>

<style lang="less" scoped>
</style>
