<template>
  <div class='courseInfo'>
    <el-form :model="searchList"
             :inline='true'>
      <el-form-item label="乐团状态">
        <el-select v-model.trim="searchList.status"
                   clearable>
          <el-option v-for="(item,index) in musicGroupStatus"
                     :key="item.value"
                     :label="item.text"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger"
                   @click='search'>搜索</el-button>
      </el-form-item>
      <el-form-item>
        <div class="newBand"
             @click="resetCourses"
             v-permission="'courseSchedule/classGroupTeacherAdjust'">课程移交</div>
      </el-form-item>
    </el-form>
    <div class="tableWrap">
      <el-table :data='tableList'
                @selection-change="handleSelectionChange"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column type="selection"
                         :selectable='selectable'
                         width="55">
        </el-table-column>
        <el-table-column label="乐团编号"
                         align="center"
                         prop="musicGroupId">
        </el-table-column>
        <el-table-column label="乐团名称"
                         align="center"
                         prop="musicGroupName">
        </el-table-column>
        <el-table-column label="老师类型"
                         align="center"
                         prop="jobType">
          <template slot-scope="scope">
            {{ scope.row.jobNature | jobNature }}
          </template>
        </el-table-column>
        <el-table-column label="乐团职位"
                         align="center">
          <template slot-scope="scope">
            {{ scope.row.teacherRole | workType }}
          </template>
        </el-table-column>
        <el-table-column label="执教班级"
                         align="center">
          <template slot-scope="scope">
            {{ scope.row.classGroupNames | joinArray }}
          </template>
        </el-table-column>
        <el-table-column label="乐团状态"
                         align="center">
          <template slot-scope="scope">
            {{ scope.row.status | musicGroupType }}
          </template>
        </el-table-column>
        <el-table-column label="出勤次数"
                         align="center"
                         prop="attendanceNum">
        </el-table-column>
        <el-table-column label="是否可调整"
                         align="center">
          <template slot-scope="scope">
            <!-- 1.没有剩余课时,2.乐团筹备中 -->
            <div>
              <p v-if="scope.row.status == 'PROGRESS'"> {{ scope.row.hasRestClass>0?'是':'否' }}</p>
              <p v-else>否</p>
            </div>

          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         v-if="scope.row.hasRestClass>0&&scope.row.status == 'PROGRESS'"
                         v-permission="'courseSchedule/classGroupTeacherAdjust'"
                         @click="resetCourse(scope.row)">操作</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="pageInfo.total"
                  :page.sync="pageInfo.page"
                  :limit.sync="pageInfo.limit"
                  :page-sizes="pageInfo.page_size"
                  @pagination="getList" />
    </div>
    <el-dialog title='课程移交'
               :visible.sync="maskVisible"
               width="400px">
      <el-form :model="maskForm"
               ref="maskForm">
        <el-form-item label="选择老师"
                      prop="targetTeacherId"
                      :rules="[{ required: true, message: '请选择老师',trigger: 'blur'}]">
          <el-select v-model="maskForm.targetTeacherId"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :label="item.realName"
                       :value="item.id"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="备注"
                      prop='memo'
                      :rules="[{ required: true, message: '请填写备注',trigger: 'blur'}]">
          <el-input type="textarea"
                    :rows="5"
                    v-model="maskForm.memo"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="maskVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitReset">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTeacherMusicClass, classGroupTeacherAdjust } from '@/api/teacherManager'
import { getTeacher } from "@/api/buildTeam";
import { musicGroupStatus } from '@/utils/searchArray'
import pagination from '@/components/Pagination/index'
import store from '@/store'
export default {
  name: 'courseInfo',
  components: {
    pagination
  },
  data () {
    return {
      tableList: [],
      teacherId: this.$route.query.teacherId,
      organId: null,
      searchList: {
        status: ''
      },
      musicGroupStatus,
      teacherList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 1, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      activeRow: null,
      maskVisible: false,
      maskForm: {
        targetTeacherId: null,
        memo: null
      },
      isMultiple: false,
      chioseList: []
    }
  },
  activated () {
    this.teacherId = this.$route.query.teacherId
    this.getList()
    this.musicGroupStatus = musicGroupStatus
  },
  mounted () {
    this.teacherId = this.$route.query.teacherId
    this.getList()
    this.musicGroupStatus = musicGroupStatus;
    // 获取指导老师
    getTeacher({}).then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    });
  },
  methods: {
    selectable (row, index) {
      return row.hasRestClass > 0 && row.status == 'PROGRESS'
    },
    handleSelectionChange (val) {
      this.chioseList = val
    },
    search () {
      this.pageInfo.page = 1;
      this.getList();
    },
    getList () {
      getTeacherMusicClass({
        rows: this.pageInfo.limit,
        page: this.pageInfo.page,
        search: this.teacherId,
        status: this.searchList.status || null
      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows
          this.pageInfo.total = res.data.total
        }
      })
    },
    resetCourse (row) {
      this.activeRow = row;
      this.isMultiple = false
      this.maskVisible = true
    },
    resetCourses () {
      if (this.chioseList.length <= 0) {
        this.$message.error('请至少选择一个乐团')
        return
      }
      this.isMultiple = true
      this.maskVisible = true
    },
    submitReset () {
      this.$refs['maskForm'].validate(valid => {
        if (valid) {
          let obj = {};
          if (this.isMultiple) {
            // 批量调整
            obj.classGroupIds = this.chioseList.map(res => {
              return res.classGroupIds
            }).join(',')
          } else {
            // 单词调整
            obj.classGroupIds = this.activeRow.classGroupIds
          }
          obj.targetTeacherId = this.maskForm.targetTeacherId;
          obj.teacherId = this.teacherId;
          // obj.memo = this.maskForm.memo;
          classGroupTeacherAdjust(obj).then(res => {
            if (res.code == 200) {
              this.maskVisible = false;
              this.$message.success('修改成功')
              this.getList()
            }
          })
        }
      })

    }
  },
  watch: {
    maskVisible (val) {
      if (!val) {
        this.maskForm.targetTeacherId = null;
        this.maskForm.memo = null
      }
    }
  }
}
</script>
<style lang="scss" scope>
.courseInfo {
  h4 {
    margin-bottom: 20px;
  }
  .tableMargin {
    margin-top: 20px;
  }
}
</style>