<script setup lang="ts">
import { viewTagCourse } from '../api'

const route = useRoute()

const emit = defineEmits<Emits>()
const props = defineProps({
  isShowGraphCourseDialog: {
    type: Boolean,
    required: true
  },
  id: {
    type: String,
    required: false
  }
})
interface Emits {
  (e: 'update:isShowGraphCourseDialog', isShowVideoDialog: boolean): void
  (e: 'create', val: any): void
}
// 取消
const handleCancel = () => {
  emit('update:isShowGraphCourseDialog', false)
}

const chapterList = ref([])
onMounted(() => {
  viewTagCourse({ tag_id: props.id as string, course_id: route.query.cid as string }).then(res => {
    chapterList.value = res.data.reduce((a: any, b: any) => {
      b.index = '0'
      if (b.children) {
        b.children.map((m: any) => {
          m.index = '1'
        })
      }
      a.push(b)
      return a
    }, [])
    console.log(chapterList.value, 'chapterList.value')
  })
})
</script>

<template>
  <el-drawer
    :model-value="isShowGraphCourseDialog"
    draggable
    :before-close="handleCancel"
    size="60%"
    title="关联课程章节"
  >
    <el-tree :data="chapterList" node-key="id" :accordion="true" :expand-on-click-node="false" style="min-width: 100%">
      <template #default="{ data }">
        <span class="custom-tree-node">
          <span class="node_title">{{ data.name }}</span>
        </span>
      </template>
    </el-tree>
  </el-drawer>
</template>
<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.btn_operate {
  background-color: rgba(248, 241, 229, 0.39);
  font-weight: 400;
  color: #b2833d;
  border: none;
  border-radius: 16px;
  margin: 3px;
}

.card-list {
  display: flex;
  flex-direction: column;
}
.card-list-con {
  background: #fafafa;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}
.video-head {
  position: relative;
  .video-head-icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 30px;
    color: #666;
    cursor: pointer;
  }
}
.video-tool-btn {
  padding: 10px 0 30px 0;
}

.video-head-icon {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 30px;
  color: #666;
  cursor: pointer;
}
</style>
