<script setup lang="ts">
import { state_checked, state_unchecked } from '@/components/XTree'
import XTreeItem from './item.vue'

const props = withDefaults(
  defineProps<{
    options: anyObj[]
    prop?: {
      label: string
      select?: string
    }
    type?: number // 0 章节 1 知识点
  }>(),
  {
    options: () => [],
    type: 0,
  },
)

defineOptions({
  name: 'XTree',
})

const key = props.prop?.select || 'selected'
const expands = ref([])

function onSelect(pData: anyObj, data?: anyObj, status?: 0 | 1, update = 1) {
  if (data) {
    if (status !== undefined) {
      data[key] = status
    } else {
      data[key] = data[key] ? 0 : 1
    }

    if (pData.children.some((i: anyObj) => i && !i?.[key])) {
      pData[key] = 0
    } else {
      pData[key] = 1
    }

    // if (props.type && pData.knowledgeVoList?.length) {
    //     if (pData.knowledgeVoList.some((i: anyObj) => i && !i[key])) {
    //         pData[key] = 0;
    //     } else {
    //         pData[key] = 1;
    //     }
    // }
    check(props.options)
  } else {
    if (status !== undefined) {
      pData[key] = status
    } else {
      pData[key] = pData[key] ? 0 : 1
    }
    pData.children.forEach((item: anyObj) => {
      item[key] = pData[key]

      // || (props.type && item.knowledgeVoList?.length)
      if (item.children?.length) {
        onSelect(item, data, item[key], pData[key] ? 0 : 1)
      }
    })
    // if (props.type && pData.knowledgeVoList?.length) {
    //     pData?.knowledgeVoList.forEach((item: anyObj) => {
    //         item && (item[key] = pData?.[key]);
    //     });
    // }
    if (update) check(props.options) // 仅在最后一次刷新
  }

  // 子节点更新，同步所有父节点状态
  function check(data: anyObj) {
    data?.forEach((i: anyObj) => {
      if (i.children?.length) {
        check(i.children)
        if (i.children.some((c: anyObj) => c && (c?.[key] || 0) === 0)) {
          i[key] = 0
        } else {
          i[key] = 1
        }
      }
      // if (props.type && i.knowledgeVoList?.length) {
      //     if (i.knowledgeVoList.some((c: anyObj) => c && (c?.[key] || 0) === 0)) {
      //         i[key] = 0;
      //     } else {
      //         i[key] = 1;
      //     }
      // }
    })
  }
}

const allSelect = computed(() => !props.options?.some(i => (i[key] || 0) === 0))
function toggleAllSelection() {
  const changeSelect = allSelect.value ? state_unchecked : state_checked
  props.options?.forEach(i => onSelect(i, undefined, changeSelect))
}

// 获取所有选中的ID
function getSelectId() {
  const ids: string[] = []
  function _getSelectId(data: anyObj) {
    data.forEach((i: anyObj) => {
      if (i.children?.length) {
        _getSelectId(i.children)
      }
      if (i[key] === 1) {
        ids.push(i.id) // 父节点 子节点 都要保存
      }
    })
  }
  _getSelectId(props.options)
  return ids
}

// 获取选中的对象
function getSelectObj() {
  function fn(arr: anyObj[]) {
    const list: anyObj[] = []
    arr.forEach((i: anyObj) => {
      if (!i) return
      if (i[key]) {
        list.push({ ...i })
      } else {
        if (i.children?.length) {
          const children = fn(i.children).filter((c: anyObj) => c[key])
          if (children.length) {
            const obj: anyObj = { ...i, children }
            if (obj.knowledgeVoList?.length) {
              obj.knowledgeVoList = obj.knowledgeVoList.filter((c: anyObj) => c?.[key])
            }
            obj[key] = 1
            list.push(obj)
          }
        }
        // if (props.type && i.knowledgeVoList?.length) {
        //     const knowledgeVoList = fn(i.knowledgeVoList).filter((c: anyObj) => c?.[key]);
        //     if (knowledgeVoList.length) {
        //         const obj: anyObj = { ...i, knowledgeVoList };
        //         obj[key] = 1;
        //         if (list.every(i => i.id !== obj.id)) list.push(obj);
        //     }
        // }
      }
    })
    return list
  }
  return fn(props.options)
}

defineExpose({
  allSelect,
  toggleAllSelection,
  getSelectId,
  getSelectObj,
})
</script>

<template>
  <div class="x-tree">
    <el-collapse v-model="expands">
      <XTreeItem
        v-for="item in options"
        :key="item.label"
        :data="item"
        :prop="prop"
        :expands="expands"
        :type="type"
        @select="onSelect"
      />
    </el-collapse>
  </div>
</template>

<style lang="scss" scoped>
.x-tree {
  background-color: #fff;
  :deep(.el-collapse) {
    padding: 0 $space-4;
    border: none;
    .el-collapse-item {
      .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;
        }
        .title {
          text-align: left;
          flex: 1;
          margin-left: $space-3;
        }
        .el-icon {
          display: none;
        }

        &::after {
          position: absolute;
          bottom: 0;
          content: '';
          display: block;
          width: 100%;
          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: 6.67vh;
          font-size: $font-size-5;
          line-height: 1.5em;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 72px;
          position: relative;
          &::after {
            position: absolute;
            bottom: 0;
            content: '';
            display: block;
            width: 100%;
            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 /* 线条间隔 */
            );
          }
        }
      }
    }

    .select-icon {
      cursor: pointer;
    }
  }
}
</style>
