<template>
  <div class="c_box">
    <div class="choice_box" v-loading="isloading">
      <div class="title" style="display: flex;">
        <span style="min-width: fit-content;">{{ tindex + 1 + '、' }}</span>
        <span>{{ checkJson.title }}</span>
      </div>
      <div
        class="detail"
        v-if="checkJson.detail"
        v-html="checkJson.detail"
        style="color: #00000099;margin-top: 5px;"
      ></div>
      <div class="choices">
        <el-button type="primary" size="small" @click="openCourseD">选择课程</el-button>
      </div>
      <div class="choices" v-if="checkJson.answer2.length">
        <div class="course" @click="openCourse(course.courseId)" v-for="(course, index) in courseDetail" :key="index">
          <div class="banner">
            <img :src="course.cover" alt="" />
          </div>
          <div class="content">
            <div class="c_c">
              <span>课程名字：</span>
              <span>{{ course.title }}</span>
            </div>
            <div class="c_c">
              <span>课程类型：</span>
              <span>{{ course.name ? course.name : '暂无' }}</span>
            </div>
            <div class="c_c">
              <span>创建人：</span>
              <span>{{ course.username }}</span>
            </div>
            <div class="c_c">
              <span>协作者：</span>
              <span>{{ course.xieName ? course.xieName : '暂无' }}</span>
            </div>
          </div>
        </div>
        <!-- <div class="page" v-if="checktype == '1'">
                    <el-button type="primary" size="mini" :disabled="page == 0" @click="setPage('-1')">上一个</el-button>
                    <div class="p_page"><span>{{ page + 1 }}</span><span>/</span><span>{{ checkJson.courses.length }}</span>
                    </div>
                    <el-button type="primary" size="mini" :disabled="page == (checkJson.courses.length - 1)"
                        @click="setPage('1')">下一个</el-button>
                </div> -->
      </div>
    </div>
    <courseDilogVue :dialogVisibleCourse.sync="dialogVisibleCourse" :courses="checkJson.answer2" @setCourse="setCourse">
    </courseDilogVue>
  </div>
</template>

<script>
import courseDilogVue from './components/courseDilog.vue'
import { getCourseInfoTestAll } from '@/api/home'
export default {
  components: {
    courseDilogVue
  },
  props: {
    tindex: {
      type: Number
    },
    cJson: {
      type: Object
    },
    checktype: {
      type: Number,
      default: 1
    },
    see: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      option: {
        1: { name: '附件' }
      },
      userid: this.$route.query.userid,
      checkJson: undefined,
      progress: 0,
      isFinishSize: 0,
      proVisible: false,
      isAllSize: 0,
      wurl: '',
      isTong: false,
      page: 0,
      isloading: false,
      courseDetail: [],
      dialogVisibleCourse: false
    }
  },
  computed: {},
  watch: {
    checkJson: {
      handler(newValue) {
        this.$emit('update:cJson', newValue)
      },
      deep: true
    }
  },
  methods: {
    setCourse(courses) {
      this.checkJson.answer2 = courses
      this.getCourse(this.checkJson.answer2)
      this.$forceUpdate()
    },
    depthCopy(s) {
      return JSON.parse(JSON.stringify(s))
    },
    openFileBox() {
      this.dialogVisiblefile = true
    },
    setPage(index) {
      if (index == '1') {
        this.page++
      } else if (index == '-1') {
        this.page--
      }
      this.checkJson.answer2 = this.checkJson.courses[this.page]
      this.getCourse(this.checkJson.answer2)
    },
    openCourse(cid) {
      top.postMessage({ cid: cid, screenType: '3' }, '*')
    },
    getCourse(id) {
      this.isloading = true
      const params = {
        cid: id.join(',')
      }
      getCourseInfoTestAll(params)
        .then(res => {
          this.isloading = false
          this.courseDetail = res[0]
          this.courseDetail.forEach(element => {
            element.cover = JSON.parse(element.cover)[0].url
          })
        })
        .catch(err => {
          this.isloading = false
          console.error(err)
        })
    },
    openCourseD() {
      this.dialogVisibleCourse = true
    }
  },
  mounted() {
    this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
    if (this.checkJson.answer2.length) {
      // this.page = this.checkJson.courses.indexOf(this.checkJson.answer2)
      this.getCourse(this.checkJson.answer2)
    }
  }
}
</script>

<style scoped>
.c_box {
  width: 100%;
  position: relative;
}

/* .mask {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
} */

.choice_box {
  white-space: pre-line;
}

.choice_box > .title {
  font-weight: bold;
  width: 100%;
  word-break: break-all;
}

.choice_box > .choices {
  margin-top: 10px;
}

.choices > .page {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.p_page {
  margin: 0 10px;
}

.course {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.course + .course {
  margin-top: 10px;
}

.course > .banner {
  min-width: 100px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #3896fc;
  box-sizing: border-box;
  padding: 5px;
  margin-right: 15px;
}
.course > .banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course > .content {
  max-width: calc(100% - 100px - 15px);
}
.course > .content > .c_c {
  display: flex;
}
.course > .content > .c_c + .c_c {
  margin-top: 5px;
}
.course > .content > .c_c span:nth-child(1) {
  min-width: fit-content;
}
.course > .content > .c_c span:nth-child(2) {
  word-break: break-word;
}
</style>
