<template>
  <div>
    <div class="con-title">{{ $t('pages.grade.credit.title') }}</div>
    <div class="con-box">
      <div class="total-core">
        <div class="title">{{ $t('pages.grade.credit.totalCredits') }}</div>
        <div class="core">{{score.total}}</div>
        <el-progress ref="credit_total" :text-inside="true" :stroke-width="30" :percentage="percent1" 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">{{ $t('pages.grade.credit.compCredits') }}</div>
            <div class="core">{{score.must}}</div>
            <el-progress ref="credit_must" :text-inside="true" :stroke-width="30" :percentage="percent2" 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">{{ $t('pages.grade.credit.eleCredits') }}</div>
            <div class="core">{{score.unmust}}</div>
            <el-progress ref="credit_unmust" :text-inside="true" :stroke-width="30" :percentage="percent3" color="#66c6bd"></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: #df9d75;"></div><div class="txt">{{ $t('pages.grade.credit.allCredits') }}</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 mPage from '@/components/comTable/mPage.vue'

export default {
  components: { mPage },
  data () {
    return {
      percent1: 0,
      percent2: 0,
      percent3: 0,
      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: this.$t('pages.grade.credit.serialNumber'), minWidth: '40', fix: false },
        { prop: 'semester_name', label: this.$t('pages.grade.credit.semester'), minWidth: '60', fix: false },
        { prop: 'class_name', label: this.$t('pages.grade.credit.class'), minWidth: '120', fix: false },
        { prop: 'course_name', label: this.$t('pages.grade.credit.course'), minWidth: '260', fix: false },
        { prop: 'course_credit', label: this.$t('pages.grade.credit.courseCredits'), minWidth: '60', fix: false },
        { prop: 'passed', label: this.$t('pages.grade.credit.status'), minWidth: '60', fix: false },
        { prop: 'credit', label: this.$t('pages.grade.credit.credit'), minWidth: '40', fix: false },
        { prop: 'score', label: this.$t('pages.grade.credit.grade'), minWidth: '40', fix: false },
        // { prop: '', label: this.$t('pages.grade.credit')'', minWidth: '', fix: false, goObj: { routerName: '', params: {} } }, // 点击跳转页面并传参数
        { prop: 'operate-x', label: this.$t('pages.grade.credit.operate'), width: '80px', fix: false, commandArr: [{ command: 're-start', name: '重修' }, { command: 're-start', name: '已申请' }] }
      ],
      tableData: [],
      params: { keywords: '', curPage: 1, pageSize: 100, total: '' },
      objFn: {
        paramsFn: (_this) => { return {} },
        nameAPI: 'getCredit',
        actionClass: 'Grade',
        // nameExcel: 'getStatSummaryExcel',
        nameExcel: 'getExportExcel3_4_14',
        callback: (_this, data) => {
          this.score = data
          this.percent1 = Math.floor(this.score.myTotal / this.score.total * 100) || 0
          this.percent2 = Math.floor(this.score.myMust / this.score.must * 100) || 0
          this.percent3 = Math.floor(this.score.myUnmust / (this.score.unmust ? this.score.unmust : 1) * 100) || 0
          // console.log(111, this.score, this.percent1, this.percent2, this.percent3)
          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 + '（分）'

          _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 !== 0 ? (elem.passed === 2 ? this.$t('pages.grade.credit.unpublished') : this.$t('pages.grade.credit.passed')) : this.$t('pages.grade.credit.failed')
            _this.tableData.push(elem)
          })
        }
      }
    }
  },
  mounted () {
    this.VueEvent.$on('command-tablelist-x', (data) => {
      if (data.command.command === 're-start') {
        const _data = data.tableData[data.index - 1]
        window.localStorage.setItem('rebuild', JSON.stringify(_data))
        this.$router.push({ path: '/app/grade/rebuild' })
      }
    })
  }
}
</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>
