<script setup lang="ts">
import XTreeItem from './item.vue'
import type { Chapter } from '@/api/subject/subject'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const props = withDefaults(
  defineProps<{
    modelValue: string
    options: Chapter[]
    activeNames?: string[]
    prop?: {
      label: string
      select: string
    }
  }>(),
  {
    options: () => [],
  },
)

const emits = defineEmits(['select', 'update:modelValue', 'update:activeNames'])

const active = computed({
  get: () => props.modelValue,
  set: (val: string) => emits('update:modelValue', val),
})

const handleSelect = (item: anyObj) => {
  active.value = item.id
  emits('select', item)
}

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

<template>
  <div class="x-tree">
    <el-collapse :modelValue="activeNames" @update:modelValue="emits('update:activeNames', $event)">
      <XTreeItem
        v-for="item in options"
        :key="item.id"
        :active="active"
        :data="item"
        :prop="prop"
        :idx="1"
        @select="handleSelect"
      />
    </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;
        }
        &_2 {
          padding-left: 56px;
        }
        &_3 {
          padding-left: 88px;
        }
        &_4 {
          padding-left: 110px;
        }
        &.active {
          background-color: #ccefff;
          & + .icon-box {
            height: 100%;
            background-color: #ccefff;
          }
        }
        & + .icon-box {
          display: flex;
          align-items: center;
        }

        &::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;
      }

      // .child-list {
      //     .child-list-item {
      //         height: 80px;
      //         font-size: $font-size-5;
      //         line-height: 1.5em;
      //         display: flex;
      //         align-items: center;
      //         justify-content: space-between;
      //         padding-left: 56px;
      //         position: relative;
      //         &::after {
      //             position: absolute;
      //             bottom: 0;
      //             content: '';
      //             display: block;
      //             width: calc(100% - 80px);
      //             height: 1px;
      //             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 {
      background: transparent;
    }
    .el-collapse-item__wrap {
      background: transparent;
    }
  }
}
:global(.el-scrollbar__bar) {
  display: none;
}
</style>
