<!--
 * @Author: xiejiang
 * @Date: 2024-12-06 17:31:56
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-09 17:31:06
 * @Description: 
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <Drawer
    :drawer-visible="drawerVisible"
    width="480px"
    title="应用至其他菜单"
    :loading="submitLoading"
    confirm-btn-text="保存"
    :cancel-btn="false"
    @confirm="handleConfirm"
    @close="close"
  >
    <t-tree
      :data="props.menuTree"
      :checkable="true"
      v-model="allChecked"
      expand-all
      value-mode="parentFirst"
      activable
      hover
      transition
    >
    </t-tree>
  </Drawer>
</template>

<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next'
import { ResMenuTree } from '@/api/interface/menu/index'
import { postDataRangeClone } from '@/api/modules/menu/index'

const props = withDefaults(
  defineProps<{
    menuTree: ResMenuTree[]
  }>(),
  {
    menuTree: () => [] as ResMenuTree[]
  }
)

// const menuTree = ref<ResMenuTree[]>([])
const drawerVisible = ref(false)
const submitLoading = ref(false)
// const loading = ref(false)
const roleId = ref('')
const sourceMenuId = ref('')

const allChecked = ref([])

// // 为树形结构的每个节点添加新参数
// function newParamToTree(tree: ResMenuTree[]): ResMenuTree[] {
//   return tree.map(node => {
//     const newNode = {
//       ...node,
//       children: node?.children || [],
//       label: node?.menuName || '-',
//       value: node?.menuId
//     }
//     if (newNode.children && newNode.children.length > 0) {
//       newNode.children = newParamToTree(newNode.children)
//     }
//     return newNode
//   })
// }

// const getData = () => {
//   loading.value = true
//   getMenuTree({})
//     .then(res => {
//       menuTree.value = newParamToTree(res.data)
//     })
//     .finally(() => {
//       loading.value = false
//     })
// }

// 保存权限
const handleConfirm = () => {
  if (allChecked.value.length == 0) {
    MessagePlugin.error('请选择需要应用到其他的菜单！')
    return
  }
  submitLoading.value = true
  postDataRangeClone({
    roleId: roleId.value,
    targetMenuId: allChecked.value,
    sourceMenuId: sourceMenuId.value
  }).finally(() => {
    submitLoading.value = false
    close()
  })
}

const open = (roleID: string, sourceMenuID: string) => {
  roleId.value = roleID
  sourceMenuId.value = sourceMenuID
  drawerVisible.value = true
}

// 关闭抽屉
const close = () => {
  allChecked.value = []
  drawerVisible.value = false
}

// onMounted(() => {
//   getData()
// })

defineExpose({
  open
})
</script>

<style lang="less" scoped></style>
