<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 ref="credit_total" :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}}</div>
            <el-progress ref="credit_must" :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 ref="credit_unmust" :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>
      <m-page
        :tableHead="tableHead"
        :tableData="tableData"
        :params="params"
        :objFn="objFn"
        :tableConfig="tableConfig"
      />
      <div style="height: 0.3rem;"></div>
    </div>
  </div>
</template>

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

import mPage from '../../components/module/mPage.vue'

export default {
  components: { mPage },
  data () {
    return {
      score: {
        total: 0,
        myTotal: 0,
        myTotalStr: '0%',
        must: 0,
        myMust: 0,
        myMustStr: '0%',
        unmust: 0,
        myUnmust: 0,
        myUnmustStr: '0%'
      },
      tableConfig: { border: '', size: '', selection: { has: false, sels: [], width: '50px', fix: 'left', align: '' } }, // 增加选择框，has设置为true
      tableHead: [
        { prop: 'index', label: '序号', minWidth: '50', fix: false },
        { prop: 'semester_name', label: '学期', minWidth: '80', fix: false },
        { prop: 'course_name', label: '课程', minWidth: '300', fix: false },
        { prop: 'passed', label: '状态', minWidth: '60', fix: false },
        { prop: 'credit', label: '学分', minWidth: '30', fix: false },
        { prop: 'score', label: '成绩', minWidth: '40', fix: false }
        // { prop: '', label: '', minWidth: '', fix: false, goObj: { routerName: '', params: {} } }, // 点击跳转页面并传参数
        // { prop: 'operate-x', label: '操作', width: '160px', fix: false, commandArr: [ { command: 'activelist-show', name: '查看报告' }, { command: 'activelist-edit', name: '编辑' }, { command: 'activelist-delete', name: '删除' } ] }
      ],
      tableData: [],
      params: { keywords: '', curPage: 1, pageSize: 100, total: '' },
      objFn: {
        paramsFn: (_this) => { return {} },
        nameAPI: 'getMyScore',
        actionClass: 'scoreAction',
        // nameExcel: 'getStatSummaryExcel',
        nameExcel: 'getExportExcel3_4_14',
        callback: (_this, data) => {
          _this.params.total = 100
          data = data.list
          data.forEach((elem, i) => {
            elem.index = i + 1 + (_this.params.curPage - 1) * _this.params.pageSize
            elem.passed = elem.passed ? '通过' : '未通过'
            _this.tableData.push(elem)
          })
        }
      }
    }
  },
  mounted () {
    request({
      component: this,
      actionName: 'scoreAction',
      functionName: 'getMyScore',
      data: {},
      thenCallback: data => {
        this.score = data
      },
      catchCallback: () => {},
      finallyCallback: () => {
        console.log(this.$refs['credit_total'])
        this.$refs['credit_total'].$el.children[0].children[0].children[0].children[0].innerHTML = this.score.myTotal + '（分）'
        this.$refs['credit_must'].$el.children[0].children[0].children[0].children[0].innerHTML = this.score.myMust + '（分）'
        this.$refs['credit_unmust'].$el.children[0].children[0].children[0].children[0].innerHTML = this.score.myUnmust + '（分）'
      }
    })
  }
}
</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 {
  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>
