<template>
  <div class="nav-container" v-if="navVisible" @click="back">
    <div
      class="nav-box"
      @click.stop="
        () => {
          return
        }
      "
    >
      <div class="title">
        <span class="name">目录</span>
        <span class="close" @click="back">×</span>
      </div>
      <div class="navBox">
        <div v-for="(item, stageIndex) in navList" :key="stageIndex">
          <div class="blue_box_one" @click="get(stageIndex)">
            <div>第{{ stageIndex + 1 }}阶段</div>
            <div>{{ item.dyName }}</div>
          </div>
          <div class="twoChild" :class="{ navActive: item.isOpen }">
            <div class="navChild" v-for="(nav, navIndex) in item.task" :key="navIndex">
              <div
                class="navTask"
                @click="openTask(stageIndex, navIndex, nav.id)"
                :class="{
                  openTaskActive: navIndex == taskCount && nav.id == navId && stageIndex == courseType
                }"
              >
                <div
                  class="vedioNav"
                  :class="{
                    isClick: navIndex == taskCount && nav.id == navId && stageIndex == courseType
                  }"
                  style="margin: 0"
                >
                  任务{{ navIndex + 1 }}
                </div>
                <div
                  class="navTaskname"
                  :style="{
                    width: IsLookOpen && !nav.isLook ? 'calc(100% - 75px)' : 'auto'
                  }"
                >
                  {{ nav.taskName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    navVisible: {
      type: Boolean
    },
    chapList: {
      type: Array,
      default: () => []
    },
    courseType: {
      type: Number,
      default: 0
    },
    taskCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      navList: [],
      navId: [],
      IsLookOpen: false
    }
  },
  watch: {
    chapList(newValue, oldValue) {
      this.setNavList()
    }
  },
  methods: {
    back() {
      this.$emit('update:navVisible', false)
    },
    setNavList() {
      if (this.navList.length === 0 && this.chapList.length) {
        const navList = []
        for (var l = 0; l < this.chapList.length; l++) {
          var q = this.chapList[l].dyName
          var w = this.chapList[l].chapterInfo[0].taskJson
          var e
          navList.push({
            dyName: q,
            isOpen: l === 0,
            task: []
          })
          for (var r = 0; r < w.length; r++) {
            e = w[r].task
            if (this.chapList[l].easy === 1) {
              navList[l].task.push({
                taskName: q,
                id: l + '-' + r,
                isLook: w[r].isLook
              })
            } else {
              navList[l].task.push({
                taskName: e,
                id: l + '-' + r,
                isLook: w[r].isLook
              })
            }
          }
        }
        navList[0].isOpen = false
        navList[this.courseType].isOpen = true
        this.navList = navList
        this.navId = navList[this.courseType].task[this.taskCount].id
      }
    },
    nextOrpreSteps(t) {
      var b = this.chapList.length - 1
      if (t === 0) {
        if (this.courseType === 0) {
          if (this.taskCount === 0) {
            this.navList[this.courseType].isOpen = false
            this.$emit('update:courseType', b)
            this.$emit('update:taskCount', this.chapList[b].chapterInfo[0].taskJson.length - 1)
            this.navList[this.courseType].isOpen = true
          } else {
            this.$emit('update:taskCount', this.taskCount - 1)
          }
        } else {
          if (this.taskCount === 0) {
            this.navList[this.courseType].isOpen = false
            this.$emit('update:courseType', this.courseType - 1)
            this.$emit('update:taskCount', this.chapList[this.courseType - 1].chapterInfo[0].taskJson.length - 1)
            this.navList[this.courseType].isOpen = true
          } else {
            this.$emit('update:taskCount', this.taskCount - 1)
          }
        }
      } else {
        if (this.courseType === b) {
          if (this.taskCount === this.chapList[this.courseType].chapterInfo[0].taskJson.length - 1) {
            this.navList[this.courseType].isOpen = false
            this.$emit('update:courseType', 0)
            this.$emit('update:taskCount', 0)
            this.navList[this.courseType].isOpen = true
          }
        } else {
          if (this.taskCount === this.chapList[this.courseType].chapterInfo[0].taskJson.length - 1) {
            this.navList[this.courseType].isOpen = false
            this.$emit('update:courseType', this.courseType + 1)
            this.$emit('update:taskCount', 0)
            this.navList[this.courseType].isOpen = true
          } else {
            this.$emit('update:taskCount', this.taskCount + 1)
          }
        }
      }
      document.scrollingElement.scrollTop = 0
      this.$emit('getCourse')
      this.$forceUpdate()
    },
    get(i) {
      this.navList[i].isOpen = !this.navList[i].isOpen
    },
    openTask(s, n, i) {
      this.navId = i
      document.scrollingElement.scrollTop = 0
      this.$emit('update:courseType', s)
      this.$emit('update:taskCount', n)
      this.$emit('update:navVisible', false)
      this.$emit('getCourse')
    }
  },
  mounted() {
    this.setNavList()
  }
}
</script>

<style lang="scss" scoped>
.nav-container {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  .nav-box {
    background: #fff;
    height: 90%;
    width: 95%;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .title {
      position: relative;
      display: flex;
      align-items: center;
      height: 1.2rem;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid #d8d8d8;

      .close {
        position: absolute;
        right: 0.5rem;
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 100%;
        background: rgb(231, 235, 236);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 400;
        color: rgb(128, 131, 139);
      }
    }

    .navBox {
      height: calc(100% - 1.8rem);
      overflow: auto;
      width: 100%;
      .blue_box_one {
        text-align: center;
        color: #fff;
        background-image: linear-gradient(90deg, #477cd7, #65b9fc);
        border-radius: 7px;
        margin: 10px;
        cursor: pointer;
        width: 95%;
        height: 45px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 16px;
      }

      .blue_box_one > div:nth-child(1) {
        line-height: 30px;
        margin: 0 5px 0 10px;
        width: 30%;
        min-width: 70px;
        border-radius: 4px;
      }

      .blue_box_one > div:nth-child(2) {
        @include textoverflow();
        width: 70%;
        text-align: left;
        margin-right: 10px;
        max-width: calc(100% - 85px);
      }

      .blue_box_one > div:nth-child(2):hover {
        @include textoverflow();
        cursor: pointer;
      }
      .twoChild {
        width: 95%;
        margin: 10px;
        border-radius: 5px;
        background: #f2f2f2;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        transition: all 0.5s;
        overflow: hidden;
        height: 0;
        background: #e7f3ff;
      }

      .twoChild > div:nth-child(1) {
        margin-top: 5px;
      }

      .navChild {
        width: 100%;
        cursor: pointer;
        margin-bottom: 10px;
        position: relative;
      }

      .navChild img {
        position: absolute;
        right: 11px;
        width: 15px;
        top: 50%;
        transform: translateY(-50%);
      }

      .navActive {
        height: auto;
      }

      .navTask {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        align-content: flex-start;
        height: 40px;
        justify-content: flex-start;
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
      }

      .navTaskname {
        @include textoverflow();
        padding-left: 5px;
        font-size: 14px;
      }

      .openTaskActive {
        color: #4386e6;
      }
      .isClick {
        background: #4d9def !important;
      }

      .vedioNav {
        margin: 10px 0 0 15px;
        border-bottom: 1px solid #d7d7d7;
        padding-bottom: 5px;
        background: #96d1ff;
        width: 55px;
        min-width: 55px;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        height: 20px;
        line-height: 26px;
        font-size: 12px;
      }
    }
  }
}
</style>
