<template>
  <div>
    <el-table
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      :data="details"
    >
      <el-table-column
        label="乐团/课程组编号"
        width="130px"
        prop="musicGroupId"
      >
      </el-table-column>
      <el-table-column prop="id" width="100px" 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 prop="subjectName" label="声部"></el-table-column>
      <el-table-column
        label="课程名称"
        prop="name"
        width="150px"
      ></el-table-column>
      <el-table-column label="课程时长（分钟）" key="time">
        <span slot-scope="scope">{{ getTimers(scope.row) }}</span>
      </el-table-column>
      <el-table-column
        align="center"
        prop="teacherName"
        width="110"
        label="主教老师"
      ></el-table-column>
      <el-table-column label="助教老师" prop="teachingTeacherNames"></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 label="教学点">
         <template slot-scope="scope">
              <div>
                {{ scope.row.schoolName ? scope.row.schoolName : "网络教室" }}
              </div>
            </template>
      </el-table-column>
      <el-table-column label="上课模式" prop="teachMode">
          <template slot-scope="scope">
              <div>
                {{ scope.row.teachMode | paymentType}}课
              </div>
            </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { diffTimerFormMinute } from '@/utils/date'
import dayjs from 'dayjs';
export default {
  props: ["details"],
  data() {
    return {};
  },
  methods:{
     getTimers (item) {
      const time = diffTimerFormMinute(dayjs(item.classDate).format('YYYY-MM-DD'), dayjs(item.startClassTime).format('HH:mm'), dayjs(item.endClassTime).format('HH:mm'))
      return time
    }
  }
};
</script>

