<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput v-model="formData.title" placeholder="菜单名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="formData.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" :research="research"/>
  </ATablePage>
</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 ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
import Colls from '@/common/utils/colls.ts'

const menuFormIns = useTemplateRef<InstanceType<typeof MenuForm>>('menuForm')
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')

const tablePageProps = buildTablePageProps<MenuTypes.SearchForm, MenuTypes.SysMenu>({
  pageLayout: {
    enableHighForm: false,
  },
  searchForm: {
    simpleForm: {
      colCount: 2,
    },
    list() {
      return MenuApi.listAll()
        .then(res => {
          res.data = Colls.toTree(res.data ?? [])
            .map(it => {
              return {
                ...it,
                hasChildren: !Colls.isEmpty(it.children),
              }
            })
          return res
        })
    },
  },
  toolBar: {
    leftTools: [
      {
        icon: 'Plus',
        label: '新建',
        action() {
          menuFormIns.value?.open()
        },
      },
    ],
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '编辑',
          icon: 'Edit',
          type: 'success',
          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
              })
          },
        },
      ],
    },
  },
})

function research() {
  tablePageIns.value?.doSearch()
}
</script>

<style lang="stylus" scoped>
.expand-btn {
  margin-right 5px
  cursor pointer
  transition transform .3s ease-in-out
  margin-left calc(var(--expand-indent) * 16px)

  &.expand-btn-expanded {
    transform rotateZ(90deg)
  }
}
</style>
