<template>
  <BreadPage>
    <Table v-bind="table"></Table>
  </BreadPage>
</template>

<script setup lang="tsx">
import { api } from "@/api";
import { Table, useTable } from "@/components";
import { dayjs } from "@/plugins";

const table = useTable({
  data: async (model, paging) => {
    return api.permission.getPermissions();
  },
  columns: [
    {
      type: "index",
    },
    {
      title: "权限名称",
      dataIndex: "username",
      width: 200,
      render({ record }) {
        return (
          <div class="flex flex-col overflow-hidden">
            <span>{record.name}</span>
            <span class="text-gray-400 text-xs truncate">标识：{record.slug}</span>
          </div>
        );
      },
    },
    {
      title: "权限描述",
      dataIndex: "description",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      width: 200,
      render: ({ record }) => dayjs(record.createdAt).format(),
    },
    {
      title: "操作",
      type: "button",
      width: 70,
      buttons: [
        {
          type: "modify",
          text: "修改",
        },
      ],
    },
  ],
  common: {
    items: [
      {
        field: "name",
        label: "角色名称",
        type: "input",
        required: true,
      },
      {
        field: "slug",
        label: "角色标识",
        type: "input",
      },
      {
        field: "description",
        label: "个人描述",
        type: "input",
      },
      {
        field: "permissions",
        label: "关联角色",
        type: "select",
        options: () => api.permission.getPermissions(),
        component: ({ item }) => {
          return (
            <div class="flex flex-col">
              <span>关联角色</span>
              <div>
                <span></span>
              </div>
            </div>
          );
        }
      },
    ],
    modalProps: {
      width: 580,
      maskClosable: false,
    },
    formProps: {
      layout: "vertical",
    },
  },
  search: {
    items: [
      {
        field: "name",
        label: "权限名称",
        type: "input",
        required: false,
      },
    ],
  },
  create: {
    title: "添加权限",
    submit: ({ model }) => {
      return api.permission.addPermission(model as any);
    },
  },
  modify: {
    title: "修改权限",
    submit: ({ model }) => {
      return api.permission.updatePermission(model.id, model);
    },
  },
});
</script>

<style scoped></style>

<route lang="json">
{
  "meta": {
    "sort": 10303,
    "title": "权限管理",
    "icon": "icon-park-outline-permissions"
  }
}
</route>
