<template>
  <div>
    <el-form :inline='true'>
      <el-row>
        <el-col :span="12">
          <el-form-item label="主教老师">
            <!-- <div>{{item.actualTeacherName}}</div> -->
            <div v-if="diff.hasOwnProperty('actualTeacherName')">
              <el-tag type="danger"><s>{{before.actualTeacherName}}</s></el-tag>
              <el-tag type="success">{{after.actualTeacherName}}</el-tag>
            </div>
            <div v-else>{{after.actualTeacherName}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上课时间">
            <!-- <div>{{ item.startClassTime ? item.startClassTime.substr(0, 16) : '' }}-{{ item.endClassTime ? item.endClassTime.substr(11,5) : ''}}</div> -->
            <div v-if="diff.hasOwnProperty('startClassTime')">
              <el-tag type="danger"><s>{{ before.startClassTime ? before.startClassTime.substr(0, 16) : '' }}-{{ before.endClassTime ? before.endClassTime.substr(11,5) : ''}}</s></el-tag>
              <el-tag type="success">{{ after.startClassTime ? after.startClassTime.substr(0, 16) : '' }}-{{ after.endClassTime ? after.endClassTime.substr(11,5) : ''}}</el-tag>
            </div>
            <div v-else>{{ after.startClassTime ? after.startClassTime.substr(0, 16) : '' }}-{{ after.endClassTime ? after.endClassTime.substr(11,5) : ''}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="课程时长">
            <!-- <div>{{getTimers(item)}}分钟</div> -->
            <div v-if="diff.hasOwnProperty('timers')">
              <el-tag type="danger"><s>{{before.timers}} 分钟</s></el-tag>
              <el-tag type="success">{{after.timers}} 分钟</el-tag>
            </div>
            <div v-else>{{after.timers}} 分钟</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="课程类型">
            <!-- <div>{{item.teachMode| teachMode}}</div> -->
            <div v-if="diff.hasOwnProperty('teachMode')">
              <el-tag type="danger"><s>{{before.teachMode | teachMode}}</s></el-tag>
              <el-tag type="success">{{after.teachMode | teachMode}}</el-tag>
            </div>
            <div v-else>{{after.teachMode | teachMode}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="教学地点">
            <div v-if="diff.hasOwnProperty('schoolName')">
              <el-tag type="danger"><s>{{before.schoolName}}</s></el-tag>
              <el-tag type="success">{{after.schoolName}}</el-tag>
            </div>
            <div v-else>{{after.schoolName}}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import ObjectDiff from 'object-diff'
export default {
  props: ['before', 'after'],
  computed: {
    diff() {
      return ObjectDiff(this.before, this.after)
    }
  },
}
</script>
<style lang="less" scoped>

</style>
