<script setup lang="ts">
import AddTextbookDialog from '../../create/components/stepTwoComponents/AddTextbookDialog.vue'

const route = useRoute()

const tableData = ref([
  {
    id: 1,
    points: '项目一：初识商务数据分析',
    update: '管理员',
    time: '2024-09-12 12:00:23',
    children: [
      {
        id: 2,
        points: '任务一：人人都需要商务数据分析',
        update: '管理员',
        time: '2024-09-12 12:00:23',
        children: [
          {
            id: 3,
            points: '商务数据分析就业情况',
            update: '管理员',
            time: '2024-09-12 12:00:23',
            children: [
              {
                id: 4,
                points: '商务数据分析师岗位',
                update: '管理员',
                time: '2024-09-12 12:00:23'
              },
              {
                id: 5,
                points: '商务数据分析师的市场优势',
                update: '管理员',
                time: '2024-09-12 12:00:23'
              },
              {
                id: 6,
                points: '商务数据分析师的工作职责',
                update: '管理员',
                time: '2024-09-12 12:00:23'
              }
            ]
          }
        ]
      }
    ]
  }
])

// 弹窗输入框
const pName: any = ref('')
const dialogVisible = ref(false)

// 点击添加同级的id
const addSameId = ref<any>('')
const stu = ref<number>(0)
const addChild = function (scope: any, n: number) {
  if (scope !== 1) {
    addSameId.value = scope?.row.id
  } else {
    addSameId.value = 1
  }
  stu.value = n
  dialogVisible.value = true
}

const handleConfirm = () => {
  // 查找 ID 为 4 的所有层级下标
  // 同级增加
  // for (let i = 0; i < fIndex.length - 1; i++){
  //   // tableData[]
  //   tableData.value[fIndex[i]]
  // }
  const getRandomInt = function (min: any, max: any) {
    return Math.floor(Math.random() * (max - min + 1)) + min
  }
  const data: any = {
    id: getRandomInt(100, 100000),
    points: pName.value,
    update: '管理员',
    time: '2024-09-12 12:00:23'
  }
  if (stu.value === 0) {
    manageById(tableData.value, addSameId.value, data)
  }
  if (stu.value === 1) {
    manageById(tableData.value, addSameId.value, data, true)
  }
  if (stu.value === 2) {
    manageById(tableData.value, addSameId.value, null, false, pName.value)
  }
  // if (stu.value === 3) {
  //   manageById(tableData.value, addSameId.value, null, false, null, true)
  // }
  pName.value = ''
  dialogVisible.value = false
}

function manageById(
  array: any,
  targetId: any,
  newElement = null,
  insertAsChild = false,
  newPoints = null,
  deleteTarget = false
) {
  for (let i = 0; i < array.length; i++) {
    const item = array[i]

    // 检查当前项的 ID 是否匹配目标 ID
    if (item.id === targetId) {
      if (deleteTarget) {
        // 删除目标对象
        array.splice(i, 1)
        return true // 删除成功
      }

      // 如果需要更新 points，则修改
      if (newPoints !== null) {
        item.points = newPoints
        return false
      }

      if (insertAsChild) {
        // 如果插入为子级，初始化 children 如果不存在
        if (!item.children) {
          item.children = []
        }
        // 在 children 中插入新元素
        item.children.push(newElement)
      } else {
        // 如果不作为子级，插入在当前项后面
        array.splice(i + 1, 0, newElement)
      }
      return true // 插入或更新成功
    }

    // 如果当前项有 children，递归查找
    if (Array.isArray(item.children)) {
      const result = manageById(item.children, targetId, newElement, insertAsChild, newPoints, deleteTarget)
      if (result) {
        return true // 插入、更新或删除成功
      }
    }
  }
  return false // 未找到目标 ID
}

const handleDelete = (scope: any) => {
  addSameId.value = scope?.row.id
  manageById(tableData.value, addSameId.value, null, false, null, true)
}

const isShowTextbookDialog = ref(false)
const bookName = ref('关联课程章节')

const handleView = function (n: any) {
  bookName.value = n
  isShowTextbookDialog.value = true
}

const formInline = reactive({
  user: ''
})
</script>
<template>
  <AppCard title="知识图库">
    <div style="margin-bottom: 15px">课程名称：{{ route.query?.n }}</div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="知识点">
          <el-input v-model="formInline.user" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
          <el-button type="primary">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" @click="addChild(1, 1)">添加知识点</el-button>
    <el-button type="primary">批量导入</el-button>
    <el-button type="primary">导出</el-button>
    <el-table
      :data="tableData"
      style="width: 100%; margin: 20px 0"
      row-key="id"
      highlight-current-row
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      align="center"
    >
      <!-- <el-table-column type="index"></el-table-column> -->
      <el-table-column prop="points" label="知识点"> </el-table-column>
      <el-table-column prop="update" label="更新人" width="180"> </el-table-column>
      <el-table-column prop="time" label="更新时间" width="180"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="addChild(scope, 0)"> 添加同级 </el-button>
          <el-button link type="primary" size="small" @click="addChild(scope, 1)">添加子级</el-button>
          <el-button link type="primary" size="small" @click="addChild(scope, 2)">编辑知识点</el-button>
          <el-button link type="primary" size="small" @click="handleDelete(scope)">删除</el-button>
          <el-button link type="primary" size="small" @click="handleView('关联课程章节')">查看关联章节</el-button>
          <el-button link type="primary" size="small" @click="handleView('关联数字教材章节')"
            >查看关联数字教材</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="提示" width="500px">
      <!-- <span>This is a message</span> -->
      <el-input v-model="pName" placeholder="请输入知识点名称" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- <Operation :data="courseDetails" @update="handleFresh"></Operation>
    <div class="course-view">
      <ViewCourseInfoTop :data="courseDetails"></ViewCourseInfoTop>

      <div class="course-left_info">
        <ViewCourseInfo :data="courseDetails" class="info_bottom" :id="id"></ViewCourseInfo>
        <ViewCourseChapter
          v-if="Object.keys(courseDetails).length"
          :data="chapters"
          class="info_chapter"
        ></ViewCourseChapter>
      </div>
    </div> -->
  </AppCard>
  <AddTextbookDialog
    :drawerName="bookName"
    v-if="isShowTextbookDialog === true"
    v-model:isShowTextbookDialog="isShowTextbookDialog"
  />
</template>
<style lang="scss">
.course-view {
  border: 1px solid #bfbfbf;

  border-radius: 10px;
  display: flex;
  flex-direction: column;
  .course-left_info {
    display: flex;
    .info_bottom {
      width: 67%;
    }
    .info_chapter {
      width: 25%;
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.course_tip {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  margin-left: 16px;
  line-height: 36px;
  height: 36px;
}
.el-tree-node__content {
  height: 42px;
  margin-bottom: 15px;
  background: #f4f4f4;
}
.btn_operate {
  background-color: rgba(248, 241, 229, 0.39);
  font-weight: 400;
  color: #b2833d;
  border: none;
  border-radius: 16px;
  margin: 3px;
}
.btn_control {
  font-weight: 400;
  color: #b2833d;
}
.btn_edit {
  color: #b2833d;
  margin-right: 10px;
}
.node_type {
  background: #bf9d6b;
  border-radius: 20px;
  line-height: 1;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  padding: 4px 8px;
  margin-right: 14px;
}
.node_title {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 1;
  text-align: center;
}
</style>
