<template>
  <div class="fx-column">
    <mx-table :prop-defines="facultyTableDefines" :rows="rows">
      <template #tag="{value}">
        <el-badge :value="badgeValue(value)" :hidden="!badgeValue(value)" :type="value>0?'danger':'success'">
          <el-tag v-if="badgeValue(value)" effect="light">{{ Math.abs(value) }}</el-tag>
          <span v-else>{{ value }}</span>
        </el-badge>
      </template>
    </mx-table>
    <div class="fx-column mt15">
      <span class="f16 bold f-666 mb5">师资超缺解决方案</span>
      <span>1、调整单科周课时数</span>
      <span>2、调整组合科目</span>
      <span>3、增加单科老师课时数</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'faculty-result',
  props: {
    rows: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    facultyTableDefines() {
      return {
        subjectName: {
          label: '科目'
        },
        levelClassCount: {
          label: '等级考班级数',
          minWidth: '130px'
        },
        qualifiedClassCount: {
          label: '合格考班级数',
          minWidth: '130px'
        },
        requiredClassesCount: {
          label: '所需课时数',
          minWidth: '130px'
        },
        actualClassesCount: {
          label: '实际课时数',
          minWidth: '130px',
          disabled: true
        },
        missingClassesCount: {
          label: '所缺课时数',
          slot: 'tag',
          minWidth: '130px'
        },
        missingTeacherCount: {
          label: '所需老师人数',
          slot: 'tag',
          minWidth: '130px'
        }
      }
    },

  },
  methods: {
    badgeValue(val) {
      if (!val) return ''
      if (val > 0) return '缺'
      return '超'
    }
  }
}
</script>

<style scoped>
/deep/ .el-badge__content.is-fixed {
  top: 8px;
}
</style>
