import { lazy } from 'react'
import { Button, Card, Input, Select } from 'antd'
import AppList, { AppListProps } from '@/components/AppList'
import { useMapStore } from '@/stores/map'
import { getDatasetList } from '../api'
import { useDeleteDataset } from '../query'

const FormButtonModal = lazy(() => import('../components/FormButtonModal'))
const ViewDataButtonModal = lazy(() => import('@/components/data/ViewDataButtonModal'))

export default function DataWriteBuilt() {
  const getMapValuesByKey = useMapStore((state) => state.getMapValuesByKey)
  const industryList = getMapValuesByKey('bi_data_industry')

  const { mutate } = useDeleteDataset()
  const handleRemove = (record: any) => {
    mutate({ id: record.id })
  }

  const listOptions: AppListProps = {
    queryKey: ['builtDataset'],
    fetchApi: async (params) => {
      const { data } = await getDatasetList(params)
      return { ...data }
    },
    filters: [
      {
        name: 'industry',
        element: <Select placeholder="请选择所属行业" options={industryList} />,
      },
      {
        name: 'name',
        element: <Input placeholder="请输入数据集名称" />,
      },
    ],
    columns: [
      {
        title: '序号',
        key: 'index',
        render(_value, _record, index) {
          return index + 1
        },
        width: 62,
        align: 'center',
      },
      { title: '数据集名称', dataIndex: 'name', align: 'center' },
      { title: '数据量', dataIndex: 'number', align: 'center' },
      { title: '所属行业', dataIndex: 'industry_name', align: 'center' },
      { title: '数据来源', dataIndex: 'source_name', align: 'center' },
      { title: '敏感等级', dataIndex: 'sensitivity_level_name', align: 'center' },
      { title: '访问权限', dataIndex: 'access_permissions_name', align: 'center' },
      { title: '说明', dataIndex: 'describe', align: 'center' },
      { title: '创建人', dataIndex: 'created_operator_name', align: 'center' },
      { title: '创建时间', dataIndex: 'created_time', align: 'center' },
      { title: '更新时间', dataIndex: 'updated_time', align: 'center' },
      {
        title: '操作',
        key: 'x',
        width: 160,
        align: 'center',
        render(_value, record) {
          return (
            <>
              <ViewDataButtonModal data={record}></ViewDataButtonModal>
              <Button color="danger" variant="text" onClick={() => handleRemove(record)}>
                删除
              </Button>
            </>
          )
        },
      },
    ],
  }
  return (
    <Card className="app-card" title="内置数据集管理">
      <AppList {...listOptions} filterAside={<FormButtonModal title="添加数据集"></FormButtonModal>}></AppList>
    </Card>
  )
}
