<template>
  <div>
    <div class="con-title">我的学分</div>
    <div class="con-box">
      <div class="total-core">
        <div class="title">总计学分</div>
        <div class="core">{{score.total}}</div>
        <el-progress :text-inside="true" :stroke-width="30" :percentage="Math.floor(score.myTotal/score.total) || 0" color="#df9d75"></el-progress>
      </div>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="compulsory-core">
            <div class="title">必修学分</div>
            <div class="core">{{score.must + 1}}</div>
            <el-progress :text-inside="true" :stroke-width="30" :percentage="Math.floor(score.myMust/score.must) || 0" color="#8ca4cf"></el-progress>
          </div>
        </el-col>
        <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="elective-core">
            <div class="title">选修学分</div>
            <div class="core">{{score.unmust}}</div>
            <el-progress :text-inside="true" :stroke-width="30" :percentage="Math.floor(score.myUnmust/score.unmust) || 0" color="#66c6bd"></el-progress>
          </div>
        </el-col> -->
      </el-row>
      <div class="color-box">
        <div class="color" style="background: #8ca4cf;"></div><div class="txt">必修学分</div>
        <div class="color" style="background: #66c6bd;"></div><div class="txt">选修学分</div>
        <div class="color" style="background: #df9d75;"></div><div class="txt">总学分</div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from '@actions'

export default {
  components: { },
  data () {
    return {
      score: {
        total: 0,
        myTotal: 0,
        myTotalStr: '0%',
        must: 0,
        myMust: 0,
        myMustStr: '0%',
        unmust: 0,
        myUnmust: 0,
        myUnmustStr: '0%'
      }
    }
  },
  mounted () {
    request({
      component: this,
      actionName: 'scoreAction',
      functionName: 'getMyScore',
      data: {},
      thenCallback: data => {
        this.score = data
      },
      catchCallback: () => {},
      finallyCallback: () => {}
    })
  }
}
</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: 10px;
  }
  .core {
    float: right;
    margin-right: 10px;
    font-size: 12px;
  }
}
.color-box {
  padding: 0.1rem 0 0.2rem 0;
  text-align: right;
  .color {
    display: inline-block;
    vertical-align: text-bottom;
    width: 14px;
    height: 14px;
  }
  .txt {
    display: inline-block;
    padding: 0 0.2rem 0 0.1rem;
    font-size: 14px;
    line-height: 36px;
  }
}
</style>
