<script setup lang="ts">
import { CaretBottom, CaretRight } from '@element-plus/icons-vue'

defineProps<{ data: any[]; isBlack?: boolean }>()

const route = useRoute()
const id = route.query.id ? route.query.id : (route.params.courseId as string)

const handleRes = function (item: any) {
  item.show = !item.show
}
</script>
<template>
  <div :class="isBlack ? 'chapter-box active-black' : 'chapter-box'">
    <div class="title">课程章节</div>
    <div class="line"></div>

    <div class="chapter-list">
      <div class="item" v-for="(item, index) in data" :key="item.id">
        <div class="order">
          <div class="order-number">{{ index + 1 }}</div>
        </div>
        <div class="chapter-text">
          <div class="chapter">{{ item.name }}</div>
          <div class="sections" v-for="child in item.children" :key="child.id">
            <div style="display: flex" @click="handleRes(child)">
              <template v-if="child.children.length">
                <template v-if="child.children.length">
                  <el-icon v-if="child.show" style="margin-right: 5px; margin-top: 2px" color="#fff"
                    ><CaretBottom
                  /></el-icon>
                  <el-icon v-else style="margin-right: 5px; margin-top: 2px" color="#fff"><CaretRight /></el-icon>
                </template>
                <span>{{ child.name }}</span>
              </template>
              <router-link v-else :to="`/course/my/view/${child.id}/${id}`">
                {{ child.name }}
              </router-link>
            </div>
            <template v-for="res in child.children">
              <div v-if="child.show" class="resources" :key="res.id">
                <router-link
                  :to="`/course/my/view/${child.id}/${id}?resid=${res.resource_id}&type=${res.resource_type}`"
                >
                  {{ res.name }}
                </router-link>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.chapter-box {
  width: 300px;
  background: #aa1941;
  margin-left: 20px;
  height: fit-content;
  border-radius: 10px;
  height: 800px;
  overflow-y: auto;

  &.active-black {
    background: #1f1e24;
    border-radius: 0px;
    overflow-y: auto;
    margin-left: 0px;
    .chapter-list {
      .item {
        border-bottom: 1px dashed #fff;
      }
    }
  }
  .title {
    margin: 0 auto;
    font-size: 24px;
    font-weight: 500;
    line-height: 52px;
    color: #ffffff;
    text-align: center;
    word-break: normal;
    word-wrap: break-all;
    margin-left: 10px;
  }
  .line {
    width: 85%;
    margin: 20px auto;
    border-bottom: 1px solid #ffffff;
  }
  .chapter-list {
    margin: 0 auto;
    padding: 0 23px 11px;
    .item:last-child {
      border-bottom: none;
    }
    .item {
      display: flex;
      border-bottom: 1px dotted #e06386;
      margin-top: 30px;
      .order {
        width: 26px;
        margin-right: 7px;
        .order-number {
          width: 26px;
          height: 26px;
          background: rgba(255, 255, 255, 1);
          border-radius: 50%;
          font-size: 16px;
          line-height: 26px;
          color: #aa1941;
          text-align: center;
        }
      }
      .chapter-text {
        width: 90%;

        .chapter {
          font-size: 16px;
          line-height: 1.5;
          color: #ffffff;
          margin-bottom: 20px;
          margin-top: 2px;
          cursor: pointer;
          word-break: break-all;
        }
        .sections {
          font-size: 14px;
          line-height: 1.5;
          color: #ffffff;
          margin-bottom: 20px;
          cursor: pointer;
          margin-left: 15px;
          cursor: pointer;
          word-break: break-all;
          text-align: left;
        }
        .resources {
          font-size: 14px;
          line-height: 1.5;
          color: #ffffff;
          margin-top: 10px;
          cursor: pointer;
          margin-left: 30px;
          cursor: pointer;
          word-break: break-all;
          text-align: left;
        }
      }
    }
  }
}
</style>
