<template >
  <div>
    <!-- 头部展示 -->
    <div class="headWrap">
      <div class="left">
        <div class="headItem">
          <p>未上课时:<span>{{ totalClassTimes }}</span></p>
        </div>
        <div class="headItem">
          <p>已上课时:<span>{{ currentClassTimes }}</span></p>
        </div>
        <div class="headItem">
          <p>已结算:<span>{{ isSalaryNum }}</span></p>
        </div>
        <div class="headItem">
          <p>被投诉:<span>{{ complaintsNum }}</span></p>
        </div>
      </div>
      <div class="right">
      </div>
    </div>
    <!-- 搜索标题 -->
    <el-form :inline="true"
             label-position="right"
             label-width="120px"
             class="searchForm"
             v-model.trim="searchForm">
      <el-form-item>
        <el-select v-model.trim="searchForm.type"
                   clearable
                   placeholder="课程类型">
          <el-option label="线上课"
                     value="ONLINE"></el-option>
          <el-option label="线下课"
                     value="OFFLINE"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model.trim="searchForm.status"
                   clearable
                   placeholder="课程状态">
          <el-option label="未开始"
                     value="NOT_START"></el-option>
          <el-option label="进行中"
                     value="UNDERWAY"></el-option>
          <el-option label="已结束"
                     value="OVER"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model.trim="searchForm.time"
                        style="width:400px"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="search"
                   type="primary">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <div class="tableWrap">
      <el-table :data='tableList'>
        <el-table-column align='center'
                         label="上课时间"
                         width="300px"
                         prop="startClassTime">
          <template slot-scope="scope">
            <!--  {{ scope.row.classDate }} {{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 5) : '' }}-{{ scope.row.endClassTime ? scope.row.endClassTime.substr(0, 5) : '' }} -->
            <div>
              <p>{{ scope.row.startClassTime }}-{{ scope.row.endClassTime | endTime  }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         label="课程类型"
                         prop="teachMode">
          <template slot-scope="scope">
            <div>
              <p>{{scope.row.teachMode | fitterTeachMode  }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         label="教学点"
                         prop='schoolName'>
          <template slot-scope="scope">
            <div>
              {{scope.row.schoolName?scope.row.schoolName:'网络教室'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         label="上课学员数"
                         prop="attendanceNum">
        </el-table-column>
        <el-table-column align='center'
                         prop="status"
                         label="签到状态">
          <template slot-scope="scope">
            <div>
              <p>{{scope.row.signInStatus | attendanceType  }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="status"
                         label="签退状态">
          <template slot-scope="scope">
            <div>
              <p>{{scope.row.signOutStatus | attendanceOutType  }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="status"
                         label="课程状态">
          <template slot-scope="scope">
            <div>
              <p>{{scope.row.status | fitterStatus  }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="isSalary"
                         label="结算状态">
          <template slot-scope="scope">
            <div>
              <p>{{scope.row.isSalary | fitterisSalary  }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         v-if="scope.row.attendanceNum"
                         permission="'vipGroupManage/findVipGroupAttendanceStudents'"
                         @click="lookStudents(scope.row)">查看学员</el-button>

              <!-- 未结算没有点击功能 -->
              <el-button v-if="scope.row.status == 'OVER' && !scope.row.isSalary && permission('teacherAttendance/updateTeacherAttendance')"
                         type="text"
                         @click="onMarkAttendance(scope.row)">补考勤</el-button>
              <el-button v-if="scope.row.status == 'OVER' && !scope.row.isSalary && permission('studentAttendance/updateStudentAttendances')"
                         type="text"
                         @click="onCallName(scope.row)">点名表</el-button>
              <!-- <el-button type="text" v-permission="'vipGroupManage/classStartDateAdjust'"
                         @click="resetClass(scope.row)">课程调整</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination :total="rules.total"
                :page.sync="rules.page"
                :limit.sync="rules.limit"
                :page-sizes="rules.page_size"
                @pagination="getList" />
    <el-dialog title="上课学员"
               :visible.sync="studentVisible"
               width="30%"
               :before-close="handleClose">
      <span v-for="(item,index) in studentList"
            :key="index"
            style="margin-left:10px;">{{item}}</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="studentVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="课程调整"
               :visible.sync="courseVisible"
               width="420px">
      <el-form :model="maskForm"
               :rules="maskrules"
               label-width="120px"
               label-position="right"
               ref='maskForm'>
        <el-form-item label="选择上课日期"
                      prop="date">
          <el-date-picker type="date"
                          value-format="yyyy-MM-dd"
                          v-model.trim="maskForm.date"
                          placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间"
                      prop="startTime">
          <el-time-picker v-model.trim="maskForm.startTime"
                          format='HH:mm'
                          value-format='HH:mm'
                          :picker-options="{
                          selectableRange: '00:00:00 - 23:59:00'
                            }"
                          placeholder="选择时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间"
                      prop="endTime">
          <el-time-picker v-model.trim="maskForm.endTime"
                          format='HH:mm'
                          value-format='HH:mm'
                          :picker-options="{
                          selectableRange: '00:00:00 - 23:59:00'
                            }"
                          placeholder="选择时间">
          </el-time-picker>
        </el-form-item>
        <!-- 新增教学点 -->
        <el-form-item label="教学点"
                      prop="cooperation"
                      v-if='activeRow&&activeRow.teachMode == "OFFLINE"'>
          <el-select v-model.trim="maskForm.cooperation"
                     clearable
                     filterable>
            <el-option v-for='(item,index) in cooperationList'
                       :key="index"
                       :value="item.id"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="resetCourse">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title='补考勤'
               width="400px"
               :visible.sync="markAttendance.status">
      <el-form>
        <el-form-item label="签到状态">{{ markAttendance.dataInfo.signInStatus | attendanceType }} </el-form-item>
        <el-form-item label="签到时间">{{ markAttendance.dataInfo.signInTime}}</el-form-item>
        <el-form-item label="签退状态">{{ markAttendance.dataInfo.signOutStatus | attendanceOutType }} </el-form-item>
        <el-form-item label="签退时间">{{ markAttendance.dataInfo.signOutTime}}</el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="markAttendance.status = false">取 消</el-button>
        <el-button type="primary"
                   :disabled="markAttendance.dataInfo.signOutStatus == 1 && markAttendance.dataInfo.signInStatus == 1 ? true : false"
                   @click="batchAdjustmentTime">确定补卡</el-button>
      </div>
    </el-dialog>

    <el-dialog title='点名表'
               width="700px"
               :visible.sync="rollCall.status">
      <el-table :data="rollCall.gridData">
        <el-table-column align='center'
                         property="userName"
                         label="学员姓名"></el-table-column>
        <el-table-column align='center'
                         property="phone"
                         label="手机号"></el-table-column>
        <el-table-column align='center'
                         property="subjectName"
                         label="学员声部"></el-table-column>
        <el-table-column align='center'
                         label="到课状态">
          <template slot-scope="scope">
            {{ scope.row.status | studentCallName }}
          </template>
        </el-table-column>
        <el-table-column align='center'
                         label="操作"
                         width="220px">
          <template slot-scope="scope">
            <el-button size="small"
                       @click="onChangeRollCall('TRUANT', scope.row)"
                       type="primary"
                       round>未到</el-button>
            <el-button size="small"
                       @click="onChangeRollCall('LEAVE', scope.row)"
                       type="warning"
                       round>请假</el-button>
            <el-button size="small"
                       @click="onChangeRollCall('NORMAL', scope.row)"
                       type="success"
                       round>到课</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="rollCall.total"
                  :page.sync="rollCall.page"
                  :limit.sync="rollCall.limit"
                  :page-sizes="rollCall.page_size"
                  @pagination="getCallName" />
    </el-dialog>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { getSchool } from '@/api/systemManage'
import { findVipGroupTeachingRecord, getStudyStudents, resetVipClass } from '@/api/vipSeting'
import { findAttendanceStudentByCourseWithPage, updateStudentAttendances, updateTeacherAttendance } from '@/api/buildTeam'
import { permission } from '@/utils/directivePage'
export default {
  components: { pagination },
  name: 'teacherRecord',
  data () {
    return {
      searchForm: {
        type: '',
        status: '',
        time: []
      },
      searchLsit: [],
      tableList: [],
      id: '',
      complaintsNum: '', //投诉数
      currentClassTimes: '', //当前课数
      isSalaryNum: '', // 已结算
      totalClassTimes: '',// 未上课数
      studentVisible: false, // 查看上课学员数的弹窗
      courseVisible: false, // 课时调整弹窗
      studentList: [],
      cooperationList: [],
      maskForm: {
        data: '',
        startTime: '',
        endTime: '',
        status: '',
        type: '',
        cooperation: ''

      },
      markAttendance: { // 考勤状态
        status: false,
        dataInfo: {}
      },
      activeId: '',
      activeRow: null, //
      maskrules: {
        date: [{ required: true, message: '请选择修改日期', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择开始', trigger: 'blur' }],
        endTime: [{ required: true, message: '请选择结束', trigger: 'blur' }]
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      rollCall: { // 点名表
        status: false,
        gridData: [],
        selectItem: {}, // 选中状态
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    }
  },
  mounted () {
    this.__init()
  },
  activated () {
    this.__init()
  },
  methods: {
    __init () {
      let id = this.$route.query.id;
      this.id = id;
      // 获取vip教学记录
      this.getList()
      // 获取分部教学点
      getSchool({ organId: null }).then(res => {
        if (res.code == 200) {
          this.cooperationList = res.data;
        }
      })
    },
    search () {
      this.rules.page = 1;
      this.getList()
    },
    getList () {
      let startTime;
      let endTime;
      if (this.searchForm.time) {
        startTime = this.searchForm.time[0]
        endTime = this.searchForm.time[1]
      } else {
        startTime = '';
        endTime = '';
      }
      let obj = {
        vipGroupId: this.id,
        page: this.rules.page,
        rows: this.rules.limit,
        status: this.searchForm.status || null,
        teachMode: this.searchForm.type || null,
        startTime,
        endTime
      }
      findVipGroupTeachingRecord(obj).then(res => {
        if (res.code == 200) {
          this.complaintsNum = res.data.baseInfo.complaintsNum;
          // 当前课数
          this.currentClassTimes = res.data.baseInfo.courseEndNum;
          this.isSalaryNum = res.data.baseInfo.isSalaryNum;
          // 未上课数
          this.totalClassTimes = res.data.baseInfo.courseNoStartNum;
          // this.totalClassTimes = res.data.baseInfo.totalClassTimes - this.currentClassTimes;
          this.tableList = res.data.pageInfo.rows;
          this.rules.total = res.data.pageInfo.total
        }
      })
    },
    batchAdjustmentTime () {
      let tempData = this.markAttendance.dataInfo
      let params = {
        "courseScheduleId": tempData.id,
        "signInStatus": 1,
        "signOutStatus": 1
      }
      updateTeacherAttendance(params).then(res => {
        if (res.code == 200) {
          this.$message.success('补卡成功')
          this.markAttendance.status = false
          this.getList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    onMarkAttendance (item) { // 补考勤
      this.markAttendance = {
        status: true,
        dataInfo: item
      }
    },
    onCallName (item) { // 点名表
      this.rollCall.page = 1
      this.rollCall.selectItem = item
      this.getCallName()
    },
    getCallName () {
      let rollCall = this.rollCall
      let params = {
        page: rollCall.page,
        rows: rollCall.limit,
        courseScheduleId: rollCall.selectItem.id
      }
      findAttendanceStudentByCourseWithPage(params).then(res => {
        let result = res.data
        rollCall.status = true
        if (res.code == 200) {
          rollCall.gridData = result.rows
          rollCall.total = result.total
        }
      })
    },
    onChangeRollCall (type, row) {
      let rollCall = this.rollCall
      let params = {
        courseScheduleId: rollCall.selectItem.id,
        studentAttendances: [{
          userId: row.studentId,
          status: type
        }]
      }
      updateStudentAttendances(params).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
          row.status = type
          this.getList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    lookStudents (row) {
      let id = row.id;
      getStudyStudents({ courseScheduleId: id }).then(res => {
        if (res.code == 200) {
          this.studentList = res.data;
          this.studentVisible = true;
        }
      })
    },
    permission (str) {
      return permission(str)
    },
    handleClose () {
      this.studentList = [];
      this.studentVisible = false;
    },
    resetClass (row) {
      this.courseVisible = true;
      // 弹出弹窗
      this.activeId = row.id;
      this.activeRow = row;
      // resetVipClass().then()

    },
    resetCourse () {

      // 点击弹窗效验
      this.$refs['maskForm'].validate(valid => {
        if (valid) {
          // 效验成功
          resetVipClass({ id: this.activeId, classDate: this.maskForm.date, startClassTime: this.maskForm.date + ' ' + this.maskForm.startTime, endClassTime: this.maskForm.date + ' ' + this.maskForm.endTime, schoolId: this.maskForm.cooperation }).then(
            res => {
              if (res.code == 200) {
                this.$message.success('调整成功')
                this.getList()
                this.courseVisible = false;
                this.$refs['maskForm'].resetFields();
              } else {
                this.$message.error(res.msg)
              }
            }
          )
        }
      })

    }
  },
  filters: {
    fitterisSalary (val) {
      let arr = ['未结算', '已结算'];
      return arr[val]
    },
    fitterTeachMode (val) {
      if (val == 'ONLINE') {
        return '线上课'
      } else if (val == 'OFFLINE') {
        return '线下课'
      }
    },
    fitterStatus (val) {
      if (val == 'NOT_START') {
        return '未开始'
      } else if (val == 'UNDERWAY') {
        return '进行中'
      } else if (val == 'OVER') {
        return '已结束'
      }
    },
    endTime (val) {
      if (val) {
        return val.split(' ')[1]
      } else {
        return val
      }
    },
    studentCallName: value => {
      let template = {
        NORMAL: "到课",
        TRUANT: "未到",
        LEAVE: "请假",
        DROP_OUT: "退学",
        '': '未到'
      }
      return template[value]
    }
  }
}
</script>
<style lang="scss" scope>
</style>