<template>
  <div>
    <el-form
      :model="maskForm"
      class="maskForm"
      ref="maskForm"
      :rules="maskRules"
      label-position="right"
      label-width="120px"
      :inline="true"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="课程名称" prop="name">
            <el-input
              v-model.trim="maskForm.name"
              style="width: 220px !important"
              placeholder="请输入课程名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item>
            <div style="width: 220px !important">
              <a href="#" class="studentTitle" @click="lookStudentList">
                学生列表>></a
              >
            </div>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="主教老师" prop="teacher">
            <el-select
              v-model.trim="maskForm.teacher"
              style="width: 220px !important"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in teacherList"
                :key="index"
                :value="item.id"
                :label="item.realName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="助教老师"
            prop="assistant"
          >
            <el-select
              v-model.trim="maskForm.assistant"
              style="width: 220px !important"
              clearable
              filterable
              multiple
              collapse-tags
            >
              <el-option
                v-for="(item, index) in teacherList"
                :key="index"
                :value="item.id"
                :label="item.realName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
       <viewStudentList
        :list="studentList"
        :isChiose="false"
        :showOk='false'/>
  
    </el-form>
  </div>
</template>
<script>
import selects from '@/store/modules/selects';
import viewStudentList from "./view-student-list";
export default {
  props: ["musicGroupPaymentCalenderDtos",'form'],
  components:{viewStudentList},
  data() {
    return {
      maskForm: {
        teacher: null,
        assistant: null,
        name: null,
      },
      maskRules: {
        name: [{ required: true, message: "请输入课程名称", trigger: "blur" }],
        teacher: [
          { required: true, message: "请选择主教老师名称", trigger: "blur" },
        ],

      },
      studentList:[],
      teacherList:[]
    };
  },
  mounted(){
      this.$store.dispatch('setTeachers')
      this.teacherList = this.selects.teachers
      this.studentList = []
      this.form.classList.forEach(classes=>{
          this.studentList = this.studentList.concat(classes.studentList)
      })


  },
  methods:{
      submitResetClass(){

      }
  }
};
</script>
<style lang="scss" scoped>
</style>