<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :left-tools="leftTools"
    :list="listAll"
    :table-props="{
  treeProps: { children: 'children', hasChildren: 'hasChildren' },
  treeLoad: treeLoad,
    }"
  >
    <template #searchFormItem="{ searchForm }">
      <ElFormItem label="菜单名称">
        <ElInput v-model="searchForm.title" placeholder="菜单名称"/>
      </ElFormItem>
      <ElFormItem label="路由名称">
        <ElInput v-model="searchForm.routeName" placeholder="路由名称"/>
      </ElFormItem>
    </template>
    <template #simpleSearchFormItem="{ searchForm }">
      <ElFormItem>
        <ElInput v-model="searchForm.title" placeholder="菜单名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="searchForm.routeName" placeholder="路由名称"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="图标" prop="icon" width="100">
        <template #default="scope">
          <AIcon :name="scope.row.icon"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="类型" prop="menuCategoryTxt" width="140"/>
      <ElTableColumn label="菜单名称" prop="title"/>
      <ElTableColumn label="编码" prop="sn" width="180"/>
      <ElTableColumn label="路由名称" prop="routeName">
        <template #default="scope">
          <span>
            {{ Strings.isBlank(scope.row.routeName) ? '-' : scope.row.routeName }}
          </span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="路由地址" prop="routePath">
        <template #default="scope">
          <span>
            {{ Strings.isBlank(scope.row.routePath) ? '-' : scope.row.routePath }}
          </span>
        </template>
      </ElTableColumn>

    </template>

    <MenuForm ref="menuForm" @editSucc="research"/>

  </FormPage>
</template>

<script lang="ts" setup>
import MenuApi from '@/pages/sys/menus/menu-api.ts'
import MenuForm from '@/pages/sys/menus/MenuForm.vue'
import Strings from '@/common/utils/strings.ts'
import AIcon from '@/components/a-icon/AIcon.vue'
import FormPage from '@/components/page/FormPage.vue'
import type {
  ActionColumnType,
  ToolType,
} from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'

const menuFormIns = useTemplateRef<InstanceType<typeof MenuForm>>('menuForm')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')

const actionColumn = reactive<ActionColumnType<MenuTypes.SysMenu>>({
  tableActions: [
    {
      tooltip: '编辑',
      icon: 'Edit',
      action({row}) {
        menuFormIns.value?.open(row as MenuTypes.MenuForm)
      },
    },
    {
      icon: 'Delete',
      loading: false,
      type: 'danger',
      tooltip: '删除',
      confirm: {
        title: '是否删除当前数据',
      },
      action({row}) {
        return MenuApi.del([ row.id! ])
          .then(() => {
            ElMessage.success('删除成功')
            return true
          })
      },
    },
  ],
})
const leftTools: ToolType[] = [
  {
    icon: 'Plus',
    label: '新建',
    action() {
      menuFormIns.value?.open()
    },
  },
]

function research() {
  formPageIns.value?.doSearch()
}

function listAll(param: MenuTypes.SearchForm) {
  return MenuApi.listAll({...param, pid: '0'})
    .then(res => {
      const data = res.data ?? []
      for (let it of data) {
        it.hasChildren = true
        it.children = []
      }
      return res
    })

}

function treeLoad(param: MenuTypes.SearchForm, row: MenuTypes.SysMenu, expanded: any, resolve?: (data: MenuTypes.SysMenu[]) => void) {
  if (resolve == null && !expanded) return
  MenuApi.listAll({...param, pid: row.id})
    .then(res => {
      if (resolve != null) {
        resolve(res.data?.map(it => {
          it.hasChildren = true
          return it
        }) ?? [])
      } else {
        formPageIns.value?.dataTableIns?.updateKeyChildren(row.id, res.data?.map(it => {
          it.hasChildren = true
          it.children = []
          return it
        }) ?? [])
      }
    })
}

</script>

