<script setup lang="ts">
import XTreeItem from './item.vue'
const props = withDefaults(
  defineProps<{
    options: anyObj[]
    type: number // 0 章节 1 知识点
  }>(),
  {
    options: () => [],
    type: 0,
  },
)

defineOptions({
  name: 'XTree',
})
</script>

<template>
  <div class="x-tree">
    <el-collapse>
      <XTreeItem v-for="item in options" :key="item.label" :data="item" :idx="1" :type="type" />
    </el-collapse>
  </div>
</template>

<style lang="scss" scoped>
.x-tree {
  height: 100%;
  width: 100%;
  // padding: 0 24px;
  :deep(.el-collapse) {
    padding: 0;
    border: none;
    height: 100%;

    .el-collapse-item__wrap {
      -webkit-transition:
        0s height,
        0s padding-top,
        0s padding-bottom;
      transition:
        0s height,
        0s padding-top,
        0s padding-bottom;
    }

    .el-collapse-item__wrap {
      -webkit-transition:
        0s width,
        0s padding-left,
        0s padding-right;
      transition:
        0s width,
        0s padding-left,
        0s padding-right;
    }

    .el-collapse-item {
      margin-left: 0;

      .title {
        text-align: left;
        flex: 1;
        margin-left: 0 !important;
        height: 6.67vh;
        line-height: 6.67vh;
        font-size: $font-size-5;
        color: $font-tag-color;
        border: none;
        position: relative;
        justify-content: space-between;
        @include single_ellipsis;

        &_1 {
          padding-left: 24px;
          // font-weight: 700;
          color: #7a7ff5;
        }
        &_2 {
          padding-left: 56px;
        }
        &_3 {
          padding-left: 88px;
        }
        &_4 {
          padding-left: 120px;
        }

        &::after {
          position: absolute;
          bottom: 0;
          content: '';
          display: block;
          width: calc(100% - 80px);
          height: 0.08vh;
          background: repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 8px,
            transparent 8px,
            transparent 16px /* 线条间隔 */
          );
        }
      }
      .child-list-item.active {
        background-color: #ccefff;
      }

      .el-collapse-item__header {
        height: 6.67vh;
        font-size: $font-size-5;
        line-height: 1.5em;
        font-weight: 400;
        color: $font-tag-color;
        border: none;
        position: relative;
        justify-content: space-between;
        .arrow-icon {
          transition: all 0.3s ease-in-out;
        }
        &.is-active {
          .arrow-icon {
            transform: rotate(180deg);
          }
        }

        .el-icon {
          display: none;
        }

        &::after {
          position: absolute;
          left: 24px;
          bottom: 0;
          content: '';
          display: block;
          width: calc(100% - 48px);
          height: 0.08vh;
          background: repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 8px,
            transparent 8px,
            transparent 16px /* 线条间隔 */
          );
        }
      }
      .el-collapse-item__wrap {
        border: none;
      }
      .el-collapse-item__content {
        padding-bottom: 0;
      }
    }
    .el-collapse-item__header {
      background: transparent;
    }
    .el-collapse-item__wrap {
      background: transparent;
    }
  }
}
:global(.el-scrollbar__bar) {
  display: none;
}
</style>
