import TabsComp from '@/components/TabsComp';
import styles from '../../../GLQ/index.less';
import { useEffect, useState } from 'react';
import { ConfigProvider, Pagination, Table, Upload, UploadProps, message } from 'antd';

import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';
import { secretFormatImport, secretFormatList } from '@/services/my';

export default function Page() {
  const [activeTab, setActiveTab] = useState(1)
  const [tableData, setTableData] = useState([]);
  const [pageNumber, setPageNumber] = useState(1);
  const [pageSize, setpageSize] = useState(10);
  const [total, setTotal] = useState(0);

  const columns: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{(pageNumber - 1) * pageSize + c + 1}</span>;
      },
    },
    { title: '产品名称', dataIndex: 'productName', key: 'productName', align: 'center' },
    { title: '载体类型', dataIndex: 'carrierType', key: 'carrierType', align: 'center' },
    { title: '载体型号', dataIndex: 'carrierNumber', key: 'carrierNumber', align: 'center' },
    { title: '管理文件名', dataIndex: 'managerFilename', key: 'managerFilename', align: 'center' }
  ]

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

  // 获取密钥体格式列表 
  const getList = () => {
    secretFormatList({ pageNumber, pageSize }).then((res) => {
      if (res?.result == "success") {
        setTotal(res.data[0].total)
        setTableData(res.data[0].list)
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  const pageOnChange = (pageNumber: number) => {
    setPageNumber(pageNumber);
  }

  const onShowSizeChange = (current: any, pageSize: any) => {
    setpageSize(pageSize);
    getList();
  }

  const props: UploadProps = {
    maxCount: 1,
    beforeUpload: (file: any) => {
      const formData = new FormData();
      formData.append('file', file);
      secretFormatImport(formData).then((res) => {
        if (res?.result == "success") {
          message.success('导入成功');
          getList()
        } else {
          message.error(res?.errorMsg);
        }
      })
    }
  };

  return (
    <div className={`${styles.params_warp}`}>
      <TabsComp
        dataSource={[{ id: 1, name: '密钥体格式导入和删除' }]}
        activeTab={activeTab}
        onChange={(e) => setActiveTab(e)} />

      <div className='mb20 flex_aiC_jB'>
        <div>密钥体格式列表</div>
        <div style={{ display: 'flex' }}>
          <Upload {...props} showUploadList={false}>
            <ButtonComp style={{ marginRight: 20 }} text={'密钥体格式导入'} />
          </Upload>
          <ButtonComp type={'delete'} text={'删除'} onClick={() => { }} />
        </div>
      </div>

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

      {total > 0 && <div className='flex_aiC_jB mt20'>
        <div>共 {total} 条</div>
        <Pagination
          current={pageNumber}
          pageSize={pageSize}
          total={total}
          showQuickJumper
          onChange={pageOnChange}
          onShowSizeChange={onShowSizeChange}
        />
      </div>}
    </div>
  );
}
