<template>
  <div class="course-container">
    <head-bar :isBack="false">
      <template #title>
        <div class="course-nav-box">
          <span class="list" @click="navCheck"></span>
          <span class="last" @click="nextOrpreSteps(0)">上一步</span>
          <span class="next" @click="nextOrpreSteps(1)">下一步</span>
          <span class="comment" @click="setType(2)">评课</span>
        </div>
      </template>
    </head-bar>
    <div class="course-box">
      <course-title :chapInfo="chapInfo" :courseType="courseType" :taskCount="taskCount"></course-title>
      <course-content-list v-if="false"></course-content-list>
      <div class="course-type-box">
        <div class="type-nav">
          <div class="type-nav-box" :class="{ active: type == 1 }" @click="setType(1)">
            <img src="@/assets/images/course/pratice-acitve.png" v-if="type == 1" alt="" />
            <img src="@/assets/images/course/pratice.png" v-else alt="" />
            <span>练习</span>
          </div>
          <div class="type-nav-box" :class="{ active: type == 2 }" @click="setType(2)">
            <img src="@/assets/images/course/commmt-active.png" v-if="type == 2" alt="" />
            <img src="@/assets/images/course/comment.png" v-else alt="" />
            <span>评课</span>
          </div>
        </div>
        <steps-box
          v-if="type == 1"
          :courseDetail="courseDetail"
          :chapInfo="chapInfo"
          :courseType="courseType"
          :taskCount="taskCount"
          :courseid="courseid"
          :tcid="tcid"
          :oid="oid"
        ></steps-box>
        <comment-box
          v-if="type == 2"
          :courseid="courseid"
          :courseType="courseType"
          :taskCount="taskCount"
        ></comment-box>
      </div>
    </div>
    <nav-box
      ref="navbox"
      :navVisible.sync="navVisible"
      :chapList="chapList"
      :courseType.sync="courseType"
      :taskCount.sync="taskCount"
      @getCourse="getCourse"
    ></nav-box>
  </div>
</template>

<script>
import headBar from '@/components/headBar.vue'
import courseTitle from './components/courseTitle.vue'
import courseContentList from './components/courseContentList.vue'
import commentBox from './components/commentBox.vue'
import stepsBox from './components/stepsBox.vue'
import navBox from './components/navBox.vue'
import { getCourseInfo } from '@/api/course'
import '@/utils/aws-sdk-2.235.1.min.js'

export default {
  components: {
    headBar,
    courseTitle,
    courseContentList,
    stepsBox,
    navBox,
    commentBox
  },
  data() {
    return {
      courseid: this.$route.query.courseid,
      oid: this.$route.query.oid,
      courseDetail: {},
      chapInfo: {},
      chapList: [],
      courseType: 0,
      taskCount: 0,
      type: 1,
      tcid: '',
      tcid2: this.$route.query.tcid,
      navVisible: false
    }
  },
  methods: {
    arrayToArray(arrayo, arrayt) {
      const array1 = arrayo
      const array2 = arrayt

      const commonElements = []

      for (let i = 0; i < array1.length; i++) {
        for (let j = 0; j < array2.length; j++) {
          if (array1[i] === array2[j]) {
            commonElements.push(array1[i])
          }
        }
      }
      return commonElements
    },
    getCourse() {
      const params = {
        courseId: this.courseid
      }
      getCourseInfo(params)
        .then(res => {
          this.courseDetail = res[0][0]
          this.chapInfo = JSON.parse(this.courseDetail.chapters)[this.courseType]
          this.chapList = JSON.parse(this.courseDetail.chapters)
          this.tcid = this.arrayToArray(
            this.courseDetail.juri ? this.courseDetail.juri.split(',') : [],
            this.tcid2 ? this.tcid2.split(',') : []
          ).join(',')
          console.log(res)
        })
        .catch(err => {
          console.error(err)
        })
    },
    setType(type) {
      this.type = type
    },
    navCheck() {
      this.navVisible = true
    },
    nextOrpreSteps(t) {
      this.$refs.navbox.nextOrpreSteps(t)
    }
  },
  created() {
    this.getCourse()
  }
}
</script>

<style lang="scss" scoped>
.course-container {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: rgb(231, 231, 231);
  .course-nav-box {
    width: 100%;
    color: #fff;
    position: relative;
    box-sizing: border-box;
    // padding-left: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    > span {
      cursor: pointer;
    }
    .list {
      width: 0.8rem;
      height: 0.8rem;
      // background: #fff;
      background-image: url(../../assets/images/course/list.png);
      background-size: cover;
      position: absolute;
      left: 0;
    }
    .next {
      margin: 0 1rem;
    }
  }
  .course-box {
    margin-top: 1.5rem;
    width: 100%;
    height: calc(100% - 1.5rem);
    overflow: auto;
  }
  .course-type-box {
    background: #fff;
    width: 100%;
    margin-top: 10px;
    .type-nav {
      height: 1rem;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      border-bottom: 1px solid rgb(239, 239, 239);
    }
    .type-nav-box {
      height: 100%;
      display: flex;
      font-size: 16px;
      align-items: center;
      box-sizing: border-box;
      padding-bottom: 2px;

      + .type-nav-box {
        margin-left: 1.5rem;
      }

      &.active {
        padding-bottom: 0;
        color: rgb(73, 161, 241);
        border-bottom: 2px solid rgb(73, 161, 241);
      }
      > img {
        margin-right: 3px;
        width: 0.5rem;
        height: 0.5rem;
        object-fit: cover;
      }
    }
  }
}
</style>
