import React, { useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import BreadTit from '@/components/BreadTit'
import { Button, Popconfirm, Table } from 'antd'

// 待完善 假数据
const listTemp = {
  藏品编号名称: [
    '藏品总登记号',
    '辅助账号',
    '索书号',
    '档案编号',
    '固定资产登记号',
    '财产登记号',
    '出土(水)登记号',
    '其他编号'
  ],
  文物类别: [
    '玉石器、宝石',
    '陶器',
    '瓷器',
    '铜器',
    '金银器',
    '铁器、其他金属器',
    '漆器',
    '雕塑、造像',
    '石器、石刻、砖瓦',
    '书法、绘画',
    '文具',
    '甲骨',
    '玺印符牌',
    '钱币',
    '牙骨角器',
    '竹木雕',
    '家具',
    '珐琅器',
    '织绣',
    '古籍图书',
    '碑帖拓本',
    '武器',
    '邮品',
    '文件、宣传品',
    '档案文书',
    '名人遗物',
    '玻璃器',
    '乐器、法器',
    '皮革',
    '音像制品',
    '票据',
    '交通、运输工具',
    '度量衡器',
    '标本、化石',
    '其他'
  ],
  质地类别1: ['单一质地', '复合或组合质地'],
  单一质地: ['有机质', '无机质'],
  有机质: [
    '木',
    '竹',
    '纸',
    '毛',
    '丝',
    '皮革',
    '骨角牙',
    '棉麻纤维',
    '其他植物质',
    '其他动物质',
    '其他有机质'
  ],
  无机质: [
    '石',
    '瓷',
    '砖瓦',
    '泥',
    '陶',
    '玻璃',
    '铁',
    '铜',
    '宝玉石',
    '金',
    '银',
    '其他金属',
    '其他无机质'
  ],
  复合或组合质地: ['有机复合或组合', '无机复合或组合', '有机无机复合或组合'],
  具体质量单位: ['g', 'kg'],
  文物级别: ['一级', '二级', '三级', '一般', '未定级'],
  文物来源: [
    '征集购买',
    '接受捐赠',
    '依法交换',
    '拨交',
    '移交',
    '旧藏',
    '发掘',
    '采集',
    '拣选',
    '其他'
  ],
  完残程度: ['完整', '基本完整', '残缺', '严重残缺(含缺失部件)'],
  保存状态: ['状态稳定，不需修复', '部分损腐，需要修复', '腐蚀损毁严重，急需修复', '已修复'],
  入藏时间范围: ['1949.10.1前', '1949.10.1-1965', '1966-1976', '1977-2000', '2001至今'],
  质量范围: ['<0.01 kg', '0.01-1 kg', '1-50 kg', '50-100 kg', '100-1000 kg', '>1000 kg']
}

function System4() {
  const [list, setList] = useState<any[]>([])

  useEffect(() => {
    const arr: any[] = []
    for (const k in listTemp) {
      const arrSon = listTemp[k as keyof typeof listTemp]
      // 修改这里：将父级的键名(k)和子项索引(i)结合，生成全局唯一的id
      arr.push({
        name: k,
        arr: arrSon.map((v: any, i: number) => ({
          name: v,
          sort: i + 1,
          id: `${k}_${i}` // 使用如 "文物类别_0" 这样的组合作为id
        }))
      })
    }
    setList(arr)
  }, [])

  const columns = useMemo(() => {
    return [
      {
        title: '字典名称',
        dataIndex: 'name'
      },
      {
        title: '排序值',
        render: (item: any) => item.sort
      },

      {
        title: '操作',
        render: (item: any) => (
          <>
            <Button type='text' danger>
              编辑
            </Button>
            <Popconfirm title='确定删除吗?' okText='确定' cancelText='取消' onConfirm={() => {}}>
              <Button type='text' danger>
                删除
              </Button>
            </Popconfirm>
          </>
        )
      }
    ]
  }, [])

  return (
    <div className={styles.System4}>
      <div className='breadTit'>
        <BreadTit>
          <div className='breadTitRow active'>数据字典</div>
        </BreadTit>
      </div>

      <div className='objectSonMain'>
        {list.map((item1, index) => (
          <div className='S4box1' key={index}>
            <div className='S4Tit'>
              {item1.name}
              <Button type='primary'>新增</Button>
            </div>

            <Table dataSource={item1.arr} columns={columns} rowKey='id' pagination={false} />
          </div>
        ))}
      </div>
    </div>
  )
}

const MemoSystem4 = React.memo(System4)

export default MemoSystem4
