<template>
  <a-card :bordered="false" title="课程详情">
    <a-descriptions 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.courseTypeName}} </a-descriptions-item>
      <a-descriptions-item label="课时"> {{ detailData.hour }} </a-descriptions-item>
      <a-descriptions-item label="学习内容"> {{ detailData.learningContent }} </a-descriptions-item>
      <a-descriptions-item label="试题数量"> {{ detailData.questionCount }} </a-descriptions-item>
      <a-descriptions-item label="备注"> {{ detailData.remark }} </a-descriptions-item>
      <a-descriptions-item label="课程封面图">
        <div>
          <img :src="detailData.coverPath">
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="标签">
      <a-tag color="blue" v-for="(item,index) in detailData.tags" :key="index ">
        {{item}}
      </a-tag>
      </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>
</template>
<script>
import { getCourseDetails } from '@/api/course/course'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
export default {
  name: 'details',
  components: {},
  data() {
    return {
      queryParam: { id: this.$route.query.id },
      detailData: {
        coverPath: [],
      },
      dictCourseType: [],
      dictCourseTag: [],
      tags:[] //用于存放标签
    }
  },
  created: function () {
    let parameter = {}
    getCourseDetails(Object.assign(parameter, this.queryParam)).then((res) => {
      this.detailData = res.data
      console.log(this.detailData)
    })
    //调用词典
    this.dictionaryDropDown()
    this.getTagName();
  },
  methods: {
    close() {
      this.$router.push({ path: '/course/CourseList', query: {} })
    },
    edit(record) {
      this.$router.push({ path: '/course/CourseAdd', query: { id: this.queryParam.id } })
    },

    //获取数据字典
    dictionaryDropDown() {
      // 课程类别
      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
        this.dictCourseType = res.data

        //课程类别的value转换成字典name
        for (let i = 0; i < this.dictCourseType.length; i++) {
          if (this.dictCourseType[i].value == this.detailData.courseType) {
            this.detailData.courseTypeName = this.dictCourseType[i].name
          }
        }
      })
    },
    getTagName() {
      dictionaryDropDown({ dictionaryCode: '0008' }).then((res) => {
        this.dictCourseTag = res.data

        console.log(this.dictCourseTag);

        let tags = [];
        for (let i = 0; i < this.dictCourseTag.length; i++) {
          for (let j = 0; j < this.detailData.courseTags.length; j++) {
            if(this.dictCourseTag[i].value == this.detailData.courseTags[j].dictValue){
              tags.push(this.dictCourseTag[i].name);
            }
          }
        }
        console.log('tagagagaga',tags);
        this.detailData.tags = tags;
      })
    },
  },
}
</script>

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