<template>
  <el-card shadow="hover">
    <div class="fx-row fx-bet-cen">
      <div class="fx-column fx-cen-cen">
        <el-image :src="avatar||defaultAvatar" class="icon80 rd40 mb10"></el-image>
        <slot name="extra"></slot>
      </div>
      <div class="fx-1 fx-column ml10" style="overflow-y: auto" :style="{height: contentHeight}">
        <div class="bold">{{ name }}</div>
        <div v-if="subjects" class="light f13 f-999 mt5" style="word-break: break-all">{{ subjects }}</div>
        <div v-if="classes" class="light f13 f-999 mt5" style="word-break: break-all">{{ classes }}</div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'mx-teacher-info',
  props: {
    avatar: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    subjects: {
      type: String,
      default: ''
    },
    classes: {
      type: String,
      default: ''
    },
    contentHeight: {
      type: String,
      default: '110px'
    }
  },
  data() {
    return {
      defaultAvatar: require('@/assets/images/teacher_avatar.png')
    }
  }
}
</script>

<style scoped>

</style>
