<script setup lang="tsx">
import type { ColumnDef } from '@tanstack/vue-table'
import Badge from '../../../packages/ui/components/ui/badge/Badge.vue'
import DataTable from '~/components/common/table/DataTable.vue'
import DataTableColumnHeader from '~/components/common/table/DataTableColumnHeader.vue'
import DataTableRowActions from '~/components/common/table/DataTableRowActions.vue'
import EditEnv from '~/components/form/resource/edit-env.vue'
import ShowCraft from '~/components/form/resource/show-craft.vue'

const resource = useResourceStore()

const columns: ColumnDef<ResourceTechnologyInfo, any>[] = [
  {
    accessorKey: 'properThing',
    header: ({ column }) => <DataTableColumnHeader column={column} title="适用废弃物" />,
    cell: ({ row }) => <div class='w-26'>{row.original.properThing.join(',')}</div>,
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'craftImage',
    header: ({ column }) => <DataTableColumnHeader column={column} title="工艺流程" />,
    cell: ({ row }) => (<ShowCraft resource={row.original}/>),
  },
  {
    accessorKey: 'device',
    header: ({ column }) => <DataTableColumnHeader column={column} title="所需设备" />,
    cell: ({ row }) => <div class='w-26'>{row.original.device}</div>,
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    },
  },
  {
    accessorKey: 'env',
    header: ({ column }) => <DataTableColumnHeader column={column} title="场地条件" />,
    cell: ({ row }) => <EditEnv env={row.original.env} />,
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    },
  },
  {
    accessorKey: 'production',
    header: ({ column }) => <DataTableColumnHeader column={column} title="产出产品" />,
    cell: ({ row }) => <div class='w-26'>{row.original.production}</div>,
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    },
  },
  {
    accessorKey: 'work',
    header: ({ column }) => <DataTableColumnHeader column={column} title="用工" />,
    cell: ({ row }) => <div class='w-26'>{row.original.work}</div>,
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    },
  },
  {
    accessorKey: 'discharge',
    header: ({ column }) => <DataTableColumnHeader column={column} title="排放物" />,
    cell: ({ row }) => (
      <>

      <div class=''>{ row.original.discharge.effluent.map(i => (<Badge class="bg-blue-500">{i}</Badge>))} </div>

      <div class=''>{ row.original.discharge.sludge.map(i => (<Badge class="bg-orange-500">{i}</Badge>))} </div>
      <div class=''>{ row.original.discharge.gas.map(i => (<Badge class="bg-gray-500">{i}</Badge>))} </div>
      </>
    ),
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    },
  },
  {
    accessorKey: 'cost',
    header: ({ column }) => <DataTableColumnHeader column={column} title="成本" />,
    cell: ({ row }) => <div class='w-26'>{row.original.cost}元</div>,
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    },
  },
  {
    accessorKey: 'efficiency',
    header: ({ column }) => <DataTableColumnHeader column={column} title="效益" />,
    cell: ({ row }) => <div class='w-26'>{row.original.efficiency}</div>,
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    },
  },
  {
    accessorKey: 'utilization',
    header: ({ column }) => <DataTableColumnHeader column={column} title="资源利用效率" />,
    cell: ({ row }) => <div class='w-26'>{row.original.utilization}</div>,
    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)
        },
      }]}/>
    ),
  },
]
</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">
        资源化技术信息
      </h1>
    </div>
    <DataTable :data="resource.resources" :columns="columns" class="px-10">
      <template #toolbar>
        <FormResourceCreateForm />
      </template>
    </DataTable>
  </div>
</template>
