import React, { useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button } from 'antd'
import MyTable from '@/components/MyTable'
import { C4tableC } from '@/utils/tableData'
import MyPopconfirm from '@/components/MyPopconfirm'
function C4import() {
  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '导入结果',
        render: (item: any) => (
          <Button size='small' type='text'>
            <a href={item.src} download target='_blank' rel='noreferrer'>
              下载
            </a>
          </Button>
        )
      },
      {
        title: '操作',
        render: (item: any) => {
          return (
            <>
              <>
                <MyPopconfirm txtK='导入当前合格数据' onConfirm={() => {}} />
                <Button size='small' type='text' onClick={() => setList([])}>
                  重新上传
                </Button>
                <MyPopconfirm txtK='清空数据' onConfirm={() => {}} />
              </>
            </>
          )
        }
      }
    ]
  }, [])

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

  return (
    <div className={styles.C4import}>
      <div className='pageTitle'>
        藏品导入<span className='C4tit'>最多支持单次导入1000条</span>
      </div>

      <div className='C4top'>
        <Button>下载模板</Button>
      </div>
      {list.length ? (
        <MyTable list={list} columnsTemp={C4tableC} lastBtn={tableLastBtn} pagingInfo={false} />
      ) : (
        <div className='C4base'>
          <Button
            size='large'
            type='primary'
            onClick={() =>
              setList([{ id: 1, hang1: '560', hang2: '520', hang3: '40', src: 'xxxx' }])
            }
          >
            上传表格
          </Button>
        </div>
      )}

      {/* 表格 */}
    </div>
  )
}

const MemoC4import = React.memo(C4import)

export default MemoC4import
