<script setup lang="ts">
import type Node from 'element-plus/es/components/tree/src/model/node'

import { getMenu, getOwnMenu, grantMenu } from '#/api'
import { delConfirm } from '#/utils/tool'

interface Tree {
  children?: Tree[]
  id: number
  name: string
  type: number
}

const props = defineProps({
  showGrant: {
    type: Boolean,
    default: false,
  },
  diaData: {
    type: Object,
    default: () => {},
  },
})

const emit = defineEmits(['update:showGrant'])

const show = ref(false)
const menus = ref([])
const checkboxGroup = ref<string[]>([])
const checkboxList = ref<any[]>([])

const customNodeClass = (data: Tree, _: Node) => {
  if (data.type === 1) {
    return 'is-penultimate'
  }
  return null
}

const defaultProps = {
  children: 'children',
  label: 'name',
  class: customNodeClass,
}

const loading = ref(true)

watch(
  () => props.showGrant,
  (newVal) => {
    if (newVal) {
      loading.value = true
      getOwnMenu(props.diaData).then((res) => {
        // let list = changeGroup(res, menus.value)
        // let menusChild: anyObj[] = []
        // menus.value.forEach((m: anyObj) => {
        //     if (m.children.length > 0)
        //         // eslint-disable-next-line max-nested-callbacks
        //         m.children.forEach((mc: anyObj) => {
        //             menusChild.push(mc)
        //         })
        // })
        // let arr = changeGroup(list, menusChild)
        checkboxGroup.value = res
        checkboxList.value = [...checkboxGroup.value]
        loading.value = false
      })
    }
    show.value = newVal
  },
)

// function changeGroup(list: string[], menus: anyObj[]): any {
//     // eslint-disable-next-line array-callback-return
//     return list.filter(i => {
//         if (menus.every(m => m.children.length === 0 || m.id !== i)) {
//             return true
//         }
//     })
// }

function getTable() {
  getMenu().then((res) => {
    menus.value = res
  })
}
let flag = false
function onCheck(_: any, obj: any) {
  checkboxList.value = [...obj.checkedKeys, ...obj.halfCheckedKeys]
  checkboxGroup.value = obj.checkedKeys
  flag = true
}

function handleSave() {
  grantMenu({ ...props.diaData, grantMenuIdList: [...checkboxList.value] })
  emit('update:showGrant', false)
}

async function closeDia() {
  if (flag) await delConfirm(true)
  checkboxGroup.value = []
  emit('update:showGrant', false)
  flag = false
}

getTable()
</script>
<template>
  <el-dialog
    v-model="show"
    title="授权"
    width="600px"
    top="10vh"
    class="box,grant-dia"
    destroy-on-close
    :before-close="closeDia"
  >
    <el-scrollbar max-height="400px">
      <el-tree
        :data="menus"
        show-checkbox
        node-key="id"
        :default-expanded-keys="checkboxGroup"
        :default-checked-keys="checkboxGroup"
        :props="defaultProps"
        check-strictly
        @check="onCheck"
      />
    </el-scrollbar>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDia">关闭</el-button>
        <el-button type="primary" :disabled="loading" @click="handleSave">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-tree-node.is-expanded.is-penultimate > .el-tree-node__children) {
  display: flex;
  flex-flow: row wrap;
}
</style>
