import styles from '../../../GLQ/index.less';
import { useEffect, useState } from 'react';
import { ConfigProvider, Input, Modal, Table, Upload, UploadProps, message } from 'antd';

import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';
import { manageDiskDataImport, managerSysDataList } from '@/services/register';
import ImportProgress from '@/components/ImportProgress';

export default function Page() {
  const [tableData, setTableData] = useState([]);
  const [visibility, setVisibility] = useState(false);
  const [speed, setSpeed] = useState(1);
  const [fileInfo, setFileInfo] = useState(null);

  const columns: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{c + 1}</span>;
      },
    },
    { title: '管理盘号', dataIndex: 'managementDiskNumber', key: 'managementDiskNumber', align: 'center' },
    { title: '密钥种类', dataIndex: 'carrierModel', key: 'carrierModel', align: 'center' },
    { title: '当前版本号', dataIndex: 'version', key: 'version', align: 'center' },
    { title: '导入时间', dataIndex: 'createTime', key: 'createTime', align: 'center' }, ,
    { title: '数据长度', dataIndex: 'dataLength', key: 'dataLength', align: 'center' }
  ]

  const props: UploadProps = {
    maxCount: 1,
    beforeUpload: (file: any) => {
      setFileInfo(file);
    }
  };

  useEffect(() => {
    getList()
  }, [])

  const uploadFiles = () => {
    const formData = new FormData();
    formData.append('file', fileInfo);
    manageDiskDataImport(formData).then((res) => {
      if (res?.result == "success") {
        setVisibility(false)
        setSpeed(2)
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  // 管理系统管理盘数据维护 -- 列表 
  const getList = () => {
    managerSysDataList({ pageNumber: 1, pageSize: 50 }).then((res) => {
      if (res?.result == "success") {
        setTableData(res.data[0])
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  return (
    <div className={`${styles.params_warp}`}>
      <ButtonComp type={'special'} text={'管理系统管理盘数据维护'} onClick={() => { }} />

      <div className='flex_aiC mt20 mb20'>
        <ButtonComp text={'数据导入'} onClick={() => {
          setSpeed(1);
          setFileInfo(null);
          setVisibility(true)
        }} />
      </div>

      <Table
        scroll={tableData.length > 0 ? { y: 41 * 10 } : {}}
        pagination={false}
        bordered
        columns={columns}
        dataSource={tableData}
        rowKey={(record: any) => record?.id}
        rowClassName={rowClassName}
      />

      <Modal
        title="xx部一体化对称密码管理系统"
        open={visibility}
        centered
        width={speed != 1 ? 425 : 515}
        onCancel={() => setVisibility(false)}
        footer={null}
        maskClosable={false}>
        <div>
          {
            speed == 1 &&
            <div className='mb30'>
              <div className='mb10'>请选择载体的输入路径</div>
              <div className='flex_aiC'>
                <span style={{ marginRight: 4, color: 'red' }}>*</span>文件路径
                <Input style={{ width: 300, marginLeft: 16 }} value={fileInfo?.name || ''} disabled={true} />
                <Upload {...props} showUploadList={false}>
                  <ButtonComp style={{ marginLeft: 20 }} text={'选择'} />
                </Upload>
              </div>
            </div>
          }
          {speed == 3 && <div>导入成功</div>}
          {speed == 4 && <div>已经存在管理盘数据，是否重新导入？</div>}
        </div>
        <div className='flex_jE mt20'>
          <ButtonComp text={'确定'} style={{ marginRight: 20 }} onClick={() => {
            switch (speed) {
              case 1:
                uploadFiles()
                setSpeed(2)
                break;
              case 3:
                getList()
                setVisibility(false)
                break;
            }
          }} />
          <ButtonComp type='cancel' text={'取消'} onClick={() => setVisibility(false)} />
        </div>
      </Modal>


      {speed == 2 && <ImportProgress show={speed == 2 ? true : false} onoK={() => {
        setVisibility(true)
        setSpeed(3)
      }} />}
    </div>
  );
}