<template>
  <div>
    <xy-dialog ref="dialog" :width="35" :is-show.sync="isShow" :type="'form'" title="更改课程" :form="form" :rules='rules'
      @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>课时名称：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="submitObj.course_setting_id" @change="changeName" placeholder="请选择课时" clearable
              style="width: 300px;">
              <el-option v-for="item in courseSettings" :key="item.id" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:teacher>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>授课老师：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="submitObj.teacher_id" @change="changeTeacher" placeholder="请选择授课老师" clearable
              style="width: 300px;">
              <el-option v-for="item in teacher_options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:class>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>授课教室：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" v-model="submitObj.class" placeholder="请选择授课教室"></el-input>
          </div>
        </div>
      </template>
      <!-- <template v-slot:footerContent>
        <el-button type="primary" style='margin-left:5px;margin-bottom:5px;' @click="submit">确认</el-button>
        <el-button plain type="primary" plain style='margin-left:5px;margin-bottom:5px;'
          @click="isShow=false">取消</el-button>
      </template> -->

    </xy-dialog>

  </div>
</template>

<script>
  import {
    deepCopy
  } from "@/utils";

  import {
    index as teacherIndex
  } from "@/api/info/teachers.js"
  import {save} from '@/api/course/courseContent'
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        courseSettings: [],
        teacher_options: [],

        submitObj: {
          course_setting_id: '',
          name_value: '',
          teacher_id: '',
          teacher_value: '',
          class: '',
          index: 0,
          prop: ''
        },
        form: {
          name: '',
          teacher: '',
          class: '',
        },
        rules: {}
      }
    },
    created() {

      this.getTeachers()
    },
    methods: {
      setIndex(index, prop, form,course_id) {
        this.submitObj = deepCopy(form)
        this.submitObj.prop = prop
        this.submitObj.index = index
        this.submitObj.course_id = course_id
        console.log("this.submitObj", this.submitObj)
      },

      changeName(e) {
        this.courseSettings.map(item => {
          if (item.id === e) {
            this.submitObj.name_value = item.title
            this.submitObj.course_setting_id = item.id
          }
        })
      },
      // 教师
      async getTeachers() {
        const res = await teacherIndex({
          page: 1,
          page_size: 999
        })
        this.teacher_options = res.data
      },

      changeTeacher(e) {
        this.teacher_options.map(item => {
          if (item.id === e) {
            this.submitObj.teacher_value = item.name
            this.submitObj.teacher_id = item.id
          }
        })
      },
      submit() {
        if (!this.submitObj.name_value) {
          this.$message({
            type: 'warning',
            message: '请选择课时'
          })
          return
        }
        if (!this.submitObj.teacher_value) {
          this.$message({
            type: 'warning',
            message: '请选择授课老师'
          })
          return
        }
        if (!this.submitObj.class) {
          this.$message({
            type: 'warning',
            message: '请输入授课教室'
          })
          return
        }
        this.submitObj.course_period_id = 3
        console.log("this.form111", this.submitObj)
        return
        save(this.submitObj).then(res=>{
          console.log("this.form111", this.submitObj)
          this.$emit("refresh", this.submitObj)
          this.isShow = false
        })

      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          // this.getSettingList()
        } else {
          this.id = ''
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .name,
  ::v-deep .teacher,
  ::v-deep .class {
    flex-basis: 100%;
  }
</style>
