<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false">
      <a-descriptions title="课程详情" layout="horizontal" bordered size="small" :column="1">
        <a-descriptions-item label="课程编号"> {{ detailData.courseCode }} </a-descriptions-item>
        <a-descriptions-item label="课程名称"> {{ detailData.courseName }} </a-descriptions-item>
        <a-descriptions-item label="课程类别"> {{ detailData.courseType }} </a-descriptions-item>
        <a-descriptions-item label="课时"> {{ detailData.hour }} </a-descriptions-item>
        <a-descriptions-item label="试题数量"> {{ detailData.questionCount }} </a-descriptions-item>
        <a-descriptions-item label="学习内容"> {{ detailData.learningContent }} </a-descriptions-item>
        <a-descriptions-item label="备注"> {{ detailData.remark }} </a-descriptions-item>
      </a-descriptions>
      <div class="buttonGroup">
        <a-button type="primary" @click="close"> 返回 </a-button>
        <a-button type="primary" @click="edit"> 编辑 </a-button>
      </div>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getCourseDetails } from '@/api/course/course'

export default {
  name: 'details',
  components: {},
  data() {
    return {
      queryParam: { id: this.$route.query.id },
      detailData: {}
    }
  },
  created: function() {
    let parameter = {};
    getCourseDetails(Object.assign(parameter, this.queryParam)).then(res => { this.detailData = res.data });
  },
  methods: {
    close () {
      this.$router.push({ path: '/course/CourseList', query: {  } });
    },
    edit(record) {
      this.$router.push({ path : '/course/CourseAdd', query:{ id: this.queryParam.id }});
    }
  },

}
</script>

<style>
.ant-descriptions-item-label {
  width: 100px;
  text-align: center;
}
.buttonGroup{
  width: 100%;
  height: auto;
  text-align: center;
  margin-top: 10px;
}
</style>