<template>
  <a-row :gutter="24">
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <chart-card :loading="loading" title="" :total="data.totalClassHour">
        <template slot="footer">当前累计学时</template>
      </chart-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <chart-card :loading="loading" title="" :total="data.totalCourse">
        <template slot="footer">累计学习课程</template>
      </chart-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <chart-card :loading="loading" title="" :total="data.completeCourse">
        <template slot="footer">结业课程</template>
      </chart-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <chart-card :loading="loading" title="" :total="data.examSize">
        <template slot="footer">考试次数</template>
      </chart-card>
    </a-col>
    <a-col
      :span="24"
      :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" :style="{ height: '100%' }">
        <div class="flex-center" style="justify-content: flex-start;" slot="title">
          <h4 style="margin: 0;">年度学时完成情况</h4>
          <div style="flex: 0 0 220px;margin: 0 10px;"><a-progress :percent="data.yearClassHourSituation * 100" :show-info="false" /></div>
          <h4 style="margin: 0;">{{ data.yearTotalClassHour }}学时/{{ data.yearClassHourRequi }}学时</h4>
        </div>
      </a-card>
    </a-col>
    <a-col
      :span="24"
      :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" title="学时统计图" :style="{ height: '100%' }">
        <v-chart class="chart" :option="chartOptions" autoresize />
      </a-card>
    </a-col>
    <a-col
      :span="24"
      :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" title="所选课程的成绩情况" :style="{ height: '100%' }">
        <a-table
          ref="table"
          :pageSize="5"
          :columns="columns"
          :showPagination="false"
          :data-source="data.courseList"
          :rowKey="record => record.courseId">
          <template slot="trainSdate" slot-scope="text, record">
            {{ record.trainSdate }}至{{ record.trainEdate }}
          </template>
          <span slot="courseType" slot-scope="text, record">
            <a-tag v-if="record.courseType === 1" color="blue">选修</a-tag>
            <a-tag v-if="record.courseType === 0" color="red">必修</a-tag>
            <template v-else>-</template>
          </span>
          <span slot="status" slot-scope="text, record">
            <a-tag v-if="record.status === 0" color="blue">在修</a-tag>
            <a-tag v-if="record.status === 1" color="green">修完课程通过</a-tag>
            <template v-else>-</template>
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="handlerDetail(record)">查看详情</a>
          </span>
        </a-table>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import "echarts";
import VChart, { THEME_KEY } from 'vue-echarts'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'
import { getMyexamCount } from '@/api/myexamCount/index.js'

export default {
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea,
    VChart
  },
  provide: {
    [THEME_KEY]: 'light'
  },
  data () {
    return {
      data: {},
      loading: true,
      chartOptions: {},
      columns: [
        {
          title: '课程名称',
          dataIndex: 'courseName'
        },
        {
          title: '课程类别',
          dataIndex: 'courseType',
          scopedSlots: { customRender: 'courseType' }
        },
        {
          title: '开始时间',
          dataIndex: 'startTime'
        },
        {
          title: '课程状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '学时',
          dataIndex: 'studyTime'
        },
        {
          title: '考试成绩',
          dataIndex: 'testResult'
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      console.log('this.$sotre', this.$store)
      getMyexamCount().then(res => {
        console.log('data', res)
        this.data = res.data
        this.loading = false
        this.initChart(res.data)
      })
    },
    initChart (data) {
      this.chartOptions = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#1890ff'],
        xAxis: {
          type: 'category',
          data: ['必修课程', '选修课程', '必须公告']
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: 60,
          top: 30,
          right: 30,
          bottom: 30
        },
        series: [
          {
            name: '课时',
            type: 'bar',
            barMaxWidth: 30,
            data: [data.yearClassHour1, data.yearClassHour2, data.yearClassHour3],
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    },
    handlerDetail (row) {
      this.$router.push({ path: '/mycourse/courseLearn', query: { courseId: row.courseId } })
    }
  }
}
</script>

<style lang="less" scoped>
.chart{
  height: 300px;
}
</style>
