import { h, ref, unref, reactive } from 'vue'
import TableAction from '@/components/DataTable/tools/Action.vue'
import TableTags from '@/components/DataTable/tools/Tags.vue'
import { MENU_TYPE, MENU_STATUS, MENU_VISIBLE } from '@/utils/dictionary.js'
import { getMenuList, deleteMenu, deletePermission } from '@/api/system/menu/index.js'
import { toTreeData } from '@/utils/handleData.js'

/* 注册table */
const tableRef = ref()
const searchParams = ref()

async function fetchList() {
  const params = {
    ...unref(data.searchParams),
    menuType: 1
  }
  const res = await getMenuList(params)
  const { menuListVoList, permissionList } = res.data
  menuListVoList.forEach((item) => { item.type = 0; item.value = item.id })
  const sourecData = [...menuListVoList]
  permissionList.forEach((item) => { item.type = 1; item.value = `${item.menuId}_${item.id}`; item.parentId = item.menuId })
  const tableData = [...menuListVoList.concat(permissionList)]
  data.menuSource = toTreeData(sourecData, 'value', 'parentId', 'children')
  data.tableData = toTreeData(tableData, 'value', 'parentId', 'children')
}

function handleSearch(params) {
  searchParams.value = { ...params }
  fetchList()
}

/**
 * @description: 获取数据及操作
 * @param {*} row 单行数据
 * @param {*} type 操作类型 create:创建，preview:预览，edit:编辑
 * @return {*}
 */
function getRowData(row, type) {
  data.rowData = type === 'create' ? { parentId: row.id } : row
  data.modalType = type
  data.modalShow = true
}

// 删除方法
function deleteData({ type, id }) {
  if (type === 0) {
    deleteMenu(id).then((res) => {
      if (res.code === 0) {
        handleSearch()
      }
    })
      .catch((e) => {
        console.log(e)
      })
  } else {
    deletePermission(id)
      .then((res) => {
        if (res.code === 0) {
          handleSearch()
        }
      })
      .catch((e) => {
        console.log(e)
      })
  }
}

const data = reactive({
  tableRef,
  searchParams,
  rowData: {},
  menuSource: [],
  tableData: [],
  modalType: 'create',
  modalShow: false,
  handleSearch,
  fetchList,

  columns: [
    {
      title: '编号',
      key: 'key',
      render: (_, index) => {
        return `${index + 1}`
      },
      align: 'center',
      width: 100
    },
    {
      title: '菜单标题',
      key: 'name',
      align: 'center',
      width: 150
    },
    {
      title: '菜单类型',
      key: 'type',
      align: 'center',
      width: 100,
      render(row) {
        return h(TableTags, {
          data: row.type,
          filters: MENU_TYPE,
          tags: {
            bordered: true
          }
        })
      }
    },
    {
      title: '路由地址',
      key: 'path',
      align: 'center',
      minWidth: 200
    },
    {
      title: '组件路径',
      key: 'component',
      align: 'center',
      minWidth: 300
    },
    {
      title: '权限标识',
      key: 'code',
      align: 'center',
      minWidth: 200
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      width: 100,
      render(row) {
        if (row.status) {
          return h(TableTags, {
            data: row.status,
            filters: MENU_STATUS
          })
        }
      }
    },
    {
      title: '排序',
      key: 'sort',
      align: 'center'
    },
    {
      title: '可见',
      key: 'isHidden',
      align: 'center',
      width: 100,
      render(row) {
        if (row.isHidden) {
          return h(TableTags, {
            data: row.isHidden,
            filters: MENU_VISIBLE
          })
        }
      }
    },
    {
      title: '创建时间',
      key: 'createTime',
      align: 'center',
      minWidth: 200
    },
    {
      title: '操作',
      align: 'center',
      width: 150,
      fixed: 'right',
      render(row) {
        return h(TableAction, {
          actions: [
            {
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: getRowData.bind(null, row, 'create')
              },
              auth: 'system:menu:add'
            },
            {
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: getRowData.bind(null, row, 'update')
              },
              auth: 'system:menu:edit'
            },
            {
              type: 'popconfirm',
              tip: '确定删除这条数据吗?',
              props: {
                onPositiveClick: deleteData.bind(null, { type: row.type, id: [row.id] })
              },
              ButtonProps: {
                text: true,
                type: 'primary'
              },
              auth: 'system:menu:delete'
            }
          ],
          align: 'center'
        })
      }
    }
  ]
})

export default data
