import React, { useMemo, useRef, 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'

type Props = {
  colseFu: (flag: boolean) => void
}

function C4import({ colseFu }: Props) {
  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[]>([])

  const flagRef = useRef(false)
  // 导入合格数据之后变成true

  // 待完善
  return (
    <div className={styles.C4import}>
      <div className='C4top'>
        <div>
          一普数据<Button type='primary'>上传表格</Button>
          <Button>下载模板</Button>
          <span className='jianGe'></span>
          省平台数据<Button type='primary'>上传表格</Button>
          <Button>下载模板</Button>
        </div>
        <Button onClick={() => colseFu(flagRef.current)}>返回</Button>
      </div>
      <MyTable list={list} columnsTemp={C4tableC} lastBtn={tableLastBtn} pagingInfo={false} />

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

const MemoC4import = React.memo(C4import)

export default MemoC4import
