<script setup lang="tsx">
import type { ColumnDef } from '@tanstack/vue-table'
import DataTable from '~/components/common/table/DataTable.vue'
import DataTableColumnHeader from '~/components/common/table/DataTableColumnHeader.vue'
import DataTableRowActions from '~/components/common/table/DataTableRowActions.vue'

const router = useRoute()
const resource = usePolicyStore()
type Task = typeof resource.policy[0]

console.log(router.params.name)

const columns: ColumnDef<Task, any>[] = [
  {
    accessorKey: 'name',
    header: ({ column }) =>
    <DataTableColumnHeader column={column} title="政策名称" />,
    cell: ({ row }) => <div class='w-26'>{row.original.name}</div>,
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'description',
    header: ({ column }) =>
    <DataTableColumnHeader column={column} title="描述" />,

    cell: ({ row }) => <div class='w-26'>{row.original.description}</div>,
  },
  {
    accessorKey: 'url',
    header: ({ column }) =>
    <DataTableColumnHeader column={column} title="地址" />,

    cell: ({ row }) => <a href={row.original.url} target='_blank' class='w-26 text-primary '>{row.original.url}</a>,
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    },
  },
  {
    id: 'actions',
    cell: ({ row }) => (
      <DataTableRowActions row={row} menus={[{
        label: '修改',
        icon: 'tabler:edit',
        click: () => {
          console.log('edit', row.original)
        },
      }, {
        label: '删除',
        icon: 'tabler:trash',
        click: () => {
          console.log('delete', row.original)
        },
      }]}/>
    ),
  },
]

onMounted(() => {
  console.log(resource.policy)
  console.log(resource.policy.filter(i => i.type === router.params.name))
})
</script>

<template>
  <div class="p-4 mt-10 mx-autoto ">
    <div class="flex justify-center">
      <h1 class="text-3xl font-bold mb-4 text-center">
        {{ router.params.name }}政策
      </h1>
    </div>
    <DataTable :data="resource.policy.filter(i => i.type === router.params.name)" :columns="columns" class="px-10">
      <template #toolbar>
        <Button size="xs">
          添加
        </Button>
      </template>
    </DataTable>
  </div>
</template>
