<script setup lang="ts">
import { getChapter, createCharacter } from '../../api'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const route = useRoute()

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

const chapterList = ref([])
onMounted(() => {
  getChapter({ book_id: route.query?.bid 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')
  })
})
// emit('update:isShowTextbookDialog', false)

const handleView = function (id: any) {
  window.open(`https://zijingebook.ezijing.com/student/book?book_id=${route.query.bid}&chapter_id=${id}`)
}

const handleGl = function (val: any) {
  const params: any = {
    name: val.name,
    course_id: props.course_id,
    resource_type: '13',
    parent_id: props.chapterID,
    resource_id: val.id
  }
  createCharacter(params).then(() => {
    emit('update:isShowTextbookDialog', false)
    emit('create', val)
    ElMessage.success('添加成功')
  })
}
</script>

<template>
  <el-drawer
    :model-value="isShowTextbookDialog"
    draggable
    :before-close="handleCancel"
    size="60%"
    :title="drawerName || '添加数字教材'"
  >
    <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>
          <div v-if="course_id">
            <el-button class="btn_operate" v-if="data.index === '1'" @click="handleView(data.id)">查阅 </el-button>
            <el-button class="btn_operate" v-if="data.index === '1'" @click="handleGl(data)">
              <el-icon><Plus /></el-icon>
              &nbsp; 关联
            </el-button>
          </div>
        </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>
