<template>
  <div>
    <div class="tableWrap"
         v-if='tableList.length>0'>
      <el-table :data="tableList"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column align="center"
                           prop="organName"
                           label="分部名称"></el-table-column>
          <el-table-column align="center"
                           width="130px"
                           prop="musicGroupId"
                           label="乐团/课程组编号"></el-table-column>
          <el-table-column align="center"
                           prop="id"
                           label="课程编号"></el-table-column>
          <el-table-column align="center"
                           width="200px"
                           label="上课时间">
            <template slot-scope="scope">{{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 16) : '' }}-{{ scope.row.endClassTime ? scope.row.endClassTime.substr(11,5) : ''}}</template>
          </el-table-column>
          <el-table-column align="center"
                           prop="subjectName"
                           label="声部"></el-table-column>
          <el-table-column align="center"
                           prop="name"
                           width="200px"
                           label="课程名称"></el-table-column>
          <el-table-column align="center"
                           width="150px"
                           label="课程类型">
            <template slot-scope="scope">
              <div>{{ scope.row.type | coursesType}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="教学模式">
            <template slot-scope="scope">
              <div>{{ scope.row.teachMode | teachMode}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="schoolName"
                           label="教学点">
            <template slot-scope="scope">
              <div>{{scope.row.schoolName?scope.row.schoolName:'网络教室'}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="courseScheduleStatus"
                           label="课程状态">
            <template slot-scope="scope">
              <div>{{ scope.row.status | coursesStatus }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="考勤申诉">
            <template slot-scope="scope">
              <div>{{ scope.row.isComplaints==1?'是':'否'}}</div>
            </template>
          </el-table-column>

          <el-table-column align="center"
                           prop="isLock"
                           label="是否冻结">
            <template slot-scope="scope">{{ scope.row.isLock ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column align="center"
                           prop="newCourseId"
                           label="合并类型"
                           width="130px">
            <template slot-scope="scope">
              <!-- {{ scope.row.newCourseId > 0 ? '是' : '否' }} -->
              {{ scope.row.newCourseId > 0 && scope.row.newCourseId == scope.row.id ? '合并课' : null }}
              {{ scope.row.newCourseId > 0 && scope.row.newCourseId != scope.row.id ? '被合并课' : null }}
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="isCallNames"
                           label="是否点名"
                           fixed="right">
            <template slot-scope="scope">{{ scope.row.isCallNames ? '是' : '否' }}</template>
          </el-table-column>
        <el-table-column align="center"
                         label="操作"
                         fixed="right"
                         width="180px">
          <template slot-scope="scope">
            <!-- v-if="permission('teamCourseList/details')" -->
            <div>
              <el-button v-if="!scope.row.isSettlement && permission('courseSchedule/classStartDateAdjust')&&scope.row.groupType ==='MUSIC'"
                         type="text"
                         @click="resetClass(scope.row)">调整</el-button>
              <el-button v-if="!scope.row.isSettlement && permission('courseSchedule/classStartDateAdjust')&&scope.row.groupType ==='VIP'"
                         type="text"
                         @click="resetClass(scope.row)">调整</el-button>
              <el-button type="text"
                         v-if="!scope.row.isSettlement && permission('courseSchedule/classStartDateAdjust')&&scope.row.groupType==='PRACTICE'"
                         @click="resetClass(scope.row)">调整</el-button>
              <el-button type="text"
                         v-if="scope.row.groupType==='PRACTICE'&&scope.row.status == 'NOT_START'&&(scope.row.practiceGroup && scope.row.practiceGroup['type']!='TRIAL')&& permission('courseSchedule/practiceCourseTeacherAdjust')"
                         @click="resetTeacher(scope.row)">更换老师</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="rules.total"
                  :page.sync="rules.page"
                  :limit.sync="rules.limit"
                  :page-sizes="rules.page_size"
                  @pagination="getList" />
    </div>

    <!-- 老师调整 -->
    <el-dialog title="老师调整"
               width="400px"
               v-if="teacherVisible"
               :visible.sync="teacherVisible">
      <el-form :model="teacherForm"
               ref="teacherForm"
               :rules="teacherRules"
               label-position="right"
               label-width="80px;"
               :inline="true">
        <el-form-item label="指导老师">
          <el-select v-model.trim="teacherForm.teacher"
                     filterable
                     clearable>
            <el-option v-for="(item,index) in teacherList"
                       :key="index"
                       :value="item.id"
                       :label="item.realName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="teacherVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="subresetTeacher">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="show"
               title="调整"
               width="400px" v-if="show">
      <resetClass :show="show"
                  @closeReset='closeReset'
                  @getList='getList'
                  :id='id'
                  :isDisabled='true' />
    </el-dialog>
  </div>
</template>
<script>
import { superFindCourseSchedules, getTeacher, resetCourse, practiceCourseAdjus, practiceCourseTeacherAdjust } from "@/api/buildTeam";
import { setDate, getCurrentMonthFirst, getCurrentMonthLast } from "@/utils/date"
import { getTeachSchool } from "@/api/teacherManager";
import pagination from "@/components/Pagination/index";
import { permission } from "@/utils/directivePage";
import resetClass from '@/views/teamDetail/componentCourse/resetClass'
import dayjs from 'dayjs'
export default {
  components: { pagination, resetClass },
  props: ['startTimes'],
  data () {
    return {
      startCourseTime: '',
      endCourseTime: '',
      startTime: this.startTimes,
      endTime: this.startTimes,
      teacherVisible: false,
      teacherList: [],
      teacherForm: {
        teacher: null,
        courseScheduleId: null
      },
      teacherRules: {
        teacher: [{ required: true, message: "请选择老师", trigger: "blur" }],
        educationalTeacherId: [{ required: true, message: "请选择乐团主管", trigger: "blur" }]
      },
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      show: false,
      id: null,
      teacherIdList: null
    }
  },
  mounted () {
    this.teacherIdList = this.$route.query.teacherId
    this.value = new Date()
    this.getList()
    getTeacher().then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    });
  },
  methods: {
    getList () {
      // this.startTime = setDate(this.value)
      // this.endTime = setDate(this.value)
      this.$emit('getCalendatList')
      if (!this.startTime || !this.endTime) return
      superFindCourseSchedules({
        teacherIdList: this.teacherIdList, page: this.rules.page,
        rows: this.rules.limit, startTime: this.startTime, endTime: this.endTime
      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows
          this.rules.total = res.data.total
        }
      })
    },
    setCourseList (val) {

      console.LOG(val)
      // this.getCalendatList()
    },
    closeReset () {
      this.show = false
    },
    permission (str, parent) {
      return permission(str, parent);
    },
    resetClass (row) {
      this.id = row.id
      this.show = true
      this.value = new Date(row.classDate.replace(/-/g, '/'))
    },



    resetTeacher (row) {
      this.teacherForm.teacher = row.actualTeacherId;
      this.teacherForm.courseScheduleId = row.id;
      this.teacherVisible = true;
    },
    subresetTeacher () {
      this.$refs.teacherForm.validate(some => {
        if (some) {
          // 修改单节课老师
          practiceCourseTeacherAdjust({
            courseScheduleId: this.teacherForm.courseScheduleId,
            teacherId: this.teacherForm.teacher
          }).then(res => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.teacherVisible = false;
              this.getList()
            }
          })
        } else {
          return;
        }
      });
    }
  },
  watch: {
    startTimes (val) {
      this.startTime = val;
      this.endTime = val;
      this.getList()
    }

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