<template>
  <Page :left="leftFuns">
    <IxForm :control="searchForm" class="search-form" layout="inline" @submit.prevent="searchHandler">
      <IxFormItem :gutter="[0, 10]" align="center" label="菜单名称">
        <IxInput control="title" placeholder="请输入菜单名称"></IxInput>
      </IxFormItem>
      <IxFormItem :gutter="[0, 10]" label="路由名称">
        <IxInput control="routeName" placeholder="请输入路由名称"></IxInput>
      </IxFormItem>
      <button style="display: none" type="submit"/>
    </IxForm>
    <IxTable
        v-model:selectedRowKeys="selectedRowKeys"
        :columns="columns"
        :dataSource="datasource"
        :pagination="false"
        :scroll="{height:'50rem'}"
        :spin="tableSpin"
        class="list-table">
      <template #action="{record}">
        <IxButtonGroup :gap="16" mode="link">
          <IxButton @click="lookup(record)">查看</IxButton>
          <IxButton @click="modify(record)">修改</IxButton>
          <IxPopconfirm :title="'是否删除菜单：【' + record.title + '】？'" placement="top" @ok="del(record)">
            <IxButton>删除</IxButton>
          </IxPopconfirm>
        </IxButtonGroup>
      </template>
    </IxTable>
    <!--<IxRow justify="end">
      <IxPagination v-model:pageIndex="pagination.current" v-model:pageSize="pagination.size" :total="pagination.total"
          class="pagination"
          show-quick-jumper
          show-size-changer show-total @change="pagingChangeHandler"/>
    </IxRow>-->
    <IxModal v-model:visible="visibleDialog" title="删除提醒" type="confirm" @ok="confirmDelHandler">
      <p>是否删除已选数据？</p>
    </IxModal>
  </Page>
</template>

<script lang="ts" setup>
import {
  h,
  ref
} from 'vue'

import { VKey } from '@idux/cdk/utils'
import { TableColumn } from '@idux/components/table'
import {
  MenuCategory,
  MenuCategoryDict
} from '@/common/app/contants.ts'
import colls from '@/common/utils/colls.ts'
import Page from '@/components/page/Page.vue'
import { useFormGroup } from '@idux/cdk'
import nav from '@/common/router/nav.ts'
import MenuApi from '@/pages/sys/menus/menu-api.ts'
import { TreeSelectNode } from '@idux/components/tree-select/src/types'
import Toast from '@/components/toast'
import { useMenuDetailStore } from '@/pages/sys/menus/menu-detail/menu-detail-store.ts'
import Iconfont from '@/components/iconfont/Iconfont.vue'

const searchForm = useFormGroup<MenuTypes.SearchForm>({
  title: [ '' ],
  routeName: [ '' ],
})
const visibleDialog = ref(false)
const tableSpin = ref(false)
const selectedRowKeys = ref<VKey[]>([])
const datasource = ref<TreeSelectNode[]>()

const columns: TableColumn<MenuTypes.SysMenu>[] = [
  {
    type: 'selectable',
  },
  {
    type: 'expandable',
    width: 160,
    indent: 16,
    title: '层级',
    dataKey: 'tier',
  },
  {
    title: '菜单名称',
    dataKey: 'title',
  },
  {
    title: '路由名称',
    dataKey: 'routeName',
  },
  {
    title: '图标',
    dataKey: 'icon',
    customCell({value}: { value: string; record: MenuTypes.SysMenu; rowIndex: number }) {
      return h(Iconfont, {name: value as IconfontTypes.name})
    }
  },
  {
    title: '路径',
    dataKey: 'breadcrumb',
    customCell({value}: { value: string[]; record: MenuTypes.SysMenu; rowIndex: number }) {
      return h('span', {}, {default: () => value.join('/')})
    }
  },
  {
    title: '类型',
    dataKey: 'menuCategory',
    customCell({value}: { value: MenuCategory; record: MenuTypes.SysMenu; rowIndex: number }) {
      return h('span', {}, {default: () => MenuCategoryDict[value]})
    }
  },
  {
    title: '排序',
    dataKey: 'sort',
  },
  {
    title: '操作',
    key: 'action',
    customCell: 'action',
  },
]
const leftFuns = computed<PageTypes.Fun[]>(() => {
  return [
    {
      title: '删除',
      mode: 'text',
      icon: 'delete',
      danger: true,
      disabled: selectedRowKeys.value.length === 0,
      onClick() {
        visibleDialog.value = true
      }
    },
    {
      title: '新建',
      mode: 'text',
      icon: 'plus',
      onClick() {
        nav.open('menu-create')
      }
    },
    {
      title: '搜索',
      mode: 'text',
      icon: 'search',
      onClick() {
        pageList()
      }
    },
    {
      title: '重置',
      mode: 'text',
      icon: 'search',
      onClick() {
        searchForm.reset()
        searchHandler()
      }
    },
    {
      title: '刷新',
      mode: 'text',
      icon: 'reload',
      onClick() {
        searchHandler()
      }
    },
  ]
})

function confirmDelHandler() {
  const recode = selectedRowKeys.value.map(it => ({id: it as string}))
  del(...recode)
}

function searchHandler() {
  pageList()
}

function pageList() {
  tableSpin.value = true
  MenuApi.list(searchForm.getValue())
      .then(res => {
        datasource.value = colls.toTree(res.data.map(it => {
          return {
            key: it.id,
            ...it
          }
        }))
      })
      .finally(() => {
        tableSpin.value = false
      })
}

function del(...recode: { id: string }[]) {
  const toastId = Toast.loading('正在提交')
  MenuApi.del(recode.map(it => it.id))
      .then(_ => {
        Toast.success('删除成功')
        pageList()
      })
      .finally(() => {
        Toast.close(toastId)
      })
}

const menuDetailStore = useMenuDetailStore()

function modify(recode: MenuTypes.SysMenu) {
  menuDetailStore.$patch({
    id: recode.id,
    edit: true
  })
  nav.open('menu-detail')
}

function lookup(recode: MenuTypes.SysMenu) {
  menuDetailStore.$patch({
    id: recode.id,
    edit: false
  })
  nav.open('menu-detail')
}

pageList()

</script>

<style lang="stylus" scoped>
.search-form {
  padding 1rem
  margin 1rem 0
}

.list-table {
  margin 1rem
  //height: 500px;
  //height: calc(100% - 100px);
}


.pagination {
  margin-right: 1rem;
  margin-bottom: 1rem;
}
</style>
