<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'), width: '60px' },
        { prop: 'semester_name', label: this.$t('pages.grade.credit.semester') },
        { prop: 'class_name', label: this.$t('pages.grade.credit.class'), width: '200px' },
        { prop: 'course_name', label: this.$t('pages.grade.credit.course') },
        { prop: 'course_credit', label: this.$t('pages.grade.credit.courseCredits'), width: '100px' },
        { prop: 'passed', label: this.$t('pages.grade.credit.status'), width: '100px' },
        { prop: 'credit', label: this.$t('pages.grade.credit.credit'), width: '100px' },
        { prop: 'score', label: this.$t('pages.grade.credit.grade'), width: '100px' },
        // { 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.$off('command-tablelist-x').$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>
