<template>
  <div>
    <el-form
      :model="form"
      inline
      label-suffix=": "
      label-width="100px"
    >
      <el-form-item label="主教老师">
        <el-select
          v-model.trim="form.coreTeacher"
          placeholder="请选择主教老师"
          clearable
          filterable
        >
          <el-option
            v-for="(item, index) in teacherList"
            :key="index"
            :label="item.realName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="助教老师"
        prop="assistant"
      >
        <el-select
          v-model.trim="form.assistant"
          placeholder="请选择助教老师"
          filterable
          clearable
          multiple
        >
          <el-option
            v-for="(item, index) in cooperationList"
            :key="index"
            :label="item.realName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-collapse v-model="collapses" @change="collapseChange">
        <el-collapse-item
          v-for="(item, index) in courseTypeList"
          :title="item.label"
          :name="index"
          :key="index"
        >
          <courseItem
            :key="index"
            :form="form.classs[item.value]"
          />
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$listeners.close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import courseItem from "./classroom-setting-item";
export default {
  props: ["teacherList", "activeType", "courseTypeList", 'cooperationList'],
  components: {
    courseItem,
  },
  data() {
    return {
      form: {
        coreTeacher: "",
        assistant: '',
        classs: {}
      },
      collapses: [0],
    };
  },
  mounted() {
    console.log(this.courseTypeList);
  },
  methods: {
    submit() {

    },
    collapseChange(val) {
      this.collapses = val
    }
  },
};
</script>
