<template>
  <div v-loading="loading">
    <div class="con-title">{{ $t('pages.grade.credit.title') }}</div>
    <div class="con-box">
      <div v-if="false">
        <p>注：</p>
        <p>1. 每一门课程达到77分及格通过，低于77分需要重修，重修费用按照每学分1000元进行缴纳。</p>
        <p>2. 所有课程全部通过，且16门必修课平均分达到{{ detail.degree_score }}分，符合申请学位要求。</p>
      </div>
      <div class="total-core">
        <div class="title">{{ $t('pages.grade.credit.totalCredits') }}</div>
        <div class="core">{{ detail.total_credits }}（分）</div>
        <el-progress
          :text-inside="true"
          :stroke-width="30"
          :percentage="totalPercentage"
          :format="progressFormat.bind(null, detail.my_total_credits)"
          color="#df9d75"
        ></el-progress>
      </div>
      <div class="total-core" v-if="false">
        <div class="title">综合必修平均分</div>
        <div class="core">100（分）</div>
        <div class="progress">
          <div class="progress-baseline" :style="progressBasseLineStyle">
            <span>{{ detail.degree_score }}(分)</span>
          </div>
          <el-progress
            :text-inside="true"
            :stroke-width="30"
            :percentage="detail.average_score"
            :format="progressFormat"
            color="#8ca4cf"
          >
          </el-progress>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="total-core">
            <div class="title">{{ $t('pages.grade.credit.compCredits') }}</div>
            <div class="core">{{ detail.required_credits }}（分）</div>
            <el-progress
              :text-inside="true"
              :stroke-width="30"
              :percentage="requiredPercentage"
              :format="progressFormat.bind(null, detail.my_required_credits)"
              color="#df9d75"
            ></el-progress>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="total-core">
            <div class="title">{{ $t('pages.grade.credit.eleCredits') }}</div>
            <div class="core">{{ detail.optional_credits }}（分）</div>
            <el-progress
              :text-inside="true"
              :stroke-width="30"
              :percentage="optionalPercentage"
              :format="progressFormat.bind(null, detail.my_optional_credits)"
              color="#df9d75"
            ></el-progress>
          </div>
        </el-col>
      </el-row>
      <div class="color-box">
        <div class="color" style="background: #8ca4cf"></div>
        <div class="txt">{{ $t('pages.grade.credit.compCredits') }}</div>
        <div class="color" style="background: #66c6bd"></div>
        <div class="txt">{{ $t('pages.grade.credit.eleCredits') }}</div>
        <!-- <div class="color" style="background: #8ca4cf"></div>
        <div class="txt">综合必修平均分</div> -->
        <div class="color" style="background: #df9d75"></div>
        <div class="txt">{{ $t('pages.grade.credit.allCredits') }}</div>
      </div>
      <table-list v-bind="tableOptions"></table-list>
    </div>
  </div>
</template>

<script>
import mPage from '@/components/comTable/mPage.vue'
import cAction from '@action'
import TableList from '@/components/comTable/tableList'
export default {
  components: { mPage, TableList },
  data() {
    return {
      loading: false,
      detail: {}
    }
  },
  computed: {
    tableOptions() {
      return {
        columns: [
          { prop: 'semester_name', label: this.$t('pages.grade.credit.semester'), attrs: { width: '160px' } },
          { prop: 'class_name', label: this.$t('pages.grade.credit.class'), attrs: { width: '120px' } },
          { prop: 'course_name', label: this.$t('pages.grade.credit.course') },
          { prop: 'course_credit', label: this.$t('pages.grade.credit.courseCredits'), attrs: { width: '100px' } },
          {
            prop: 'passed',
            label: this.$t('pages.grade.credit.status'),
            attrs: { width: '100px' },
            computed: value => {
              const map = {
                0: this.$t('pages.grade.credit.failed'),
                1: this.$t('pages.grade.credit.passed'),
                2: this.$t('pages.grade.credit.unpublished')
              }
              return map[value]
            }
          },
          { prop: 'credit', label: this.$t('pages.grade.credit.credit'), attrs: { width: '100px' } },
          { prop: 'score', label: this.$t('pages.grade.credit.grade'), attrs: { width: '100px' } },
          {
            label: this.$t('pages.grade.credit.operate'),
            attrs: { width: '100px' },
            buttons: [
              {
                label: '申请重修',
                isShow(row) {
                  return row.passed === 0
                },
                onClick: row => {
                  this.$router.push({ path: '/app/offices', query: { channel: 'retake' } })
                }
              }
            ]
          }
        ],
        data: this.detail.lists
      }
    },
    // 总计学分进度
    totalPercentage() {
      return (this.detail.my_total_credits / this.detail.total_credits) * 100 || 0
    },
    // 必修学分进度
    requiredPercentage() {
      return (this.detail.my_required_credits / this.detail.required_credits) * 100 || 0
    },
    // 选修学分进度
    optionalPercentage() {
      return (this.detail.my_optional_credits / this.detail.optional_credits) * 100 || 0
    },
    progressBasseLineStyle() {
      return { left: `${this.detail.degree_score}%` }
    }
  },
  methods: {
    getDetail() {
      this.loading = true
      cAction.Grade.getCredit()
        .then(response => {
          this.detail = response
        })
        .finally(() => {
          this.loading = false
        })
    },
    progressFormat(percentage) {
      return `${percentage}（分）`
    }
  },
  beforeMount() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.total-core,
.compulsory-core,
.elective-core {
  margin-top: 0.1rem;
  font-size: 16px;
  line-height: 36px;
  .title {
    float: left;
    // margin-left: 5px;
  }
  .core {
    float: right;
    margin-right: 3px;
    font-size: 12px;
  }
}
.color-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
  .color {
    display: inline-block;
    vertical-align: text-bottom;
    width: 14px;
    height: 14px;
  }
  .txt {
    display: inline-block;
    padding: 0 10px;
    font-size: 14px;
    line-height: 36px;
  }
}
.progress {
  position: relative;
  .progress-baseline {
    position: absolute;
    bottom: 30px;
    display: inline-block;
    span {
      font-size: 12px;
      display: block;
      transform: translateX(-50%);
    }
    &::after {
      position: absolute;
      bottom: -30px;
      content: '';
      display: block;
      width: 4px;
      height: 36px;
      background-color: #f56c6c;
      margin-left: -2px;
      z-index: 1;
    }
  }
  ::v-deep .el-progress-bar__innerText {
    position: relative;
    z-index: 1;
  }
}
</style>
