import styles from '../../../GLQ/index.less';
import { useEffect, useState } from 'react';
import { ConfigProvider, Form, Pagination, Select, Table, message } from 'antd';

import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';
import { algorithmArgsDistributeList } from '@/services/sf';

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

  const columns: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{c + 1}</span>;
      },
    },
    { title: '密码算法名称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '密码算法简称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '算法标识', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '密码种类', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '算法用途', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '算法模式简称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '参数简称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '当前状态', dataIndex: 'currentStatus', key: 'currentStatus', align: 'center' },
    { title: '配发结果', dataIndex: 'name', key: 'name', align: 'center' }
  ]

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

  const updataList = () => {
    pageNumber == 1 ? getList() : setPageNumber(1);
  }

  const getList = () => {
    let params = form.getFieldsValue()
    algorithmArgsDistributeList({ pageNumber, pageSize, ...params }).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();
  }

  return (
    <div className={`${styles.params_warp}`}>
      <ButtonComp type={'special'} text={'算法参数配发'} onClick={() => { }} />

      <div className='flex_aiC mt30 mb30'>
        <div style={{ marginRight: 12 }}>目的系统</div>
        <Select style={{ width: 200, marginRight: 20 }} placeholder="请选择目的系统" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />

        <div style={{ marginRight: 12 }}>配发方式</div>
        <Select style={{ width: 200, marginRight: 20 }} placeholder="请选择配发方式" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />

        <div style={{ marginRight: 12 }}>载体类型</div>
        <Select style={{ width: 200 }} placeholder="请选择载体类型" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
      </div>

      <div className='mb30' style={{ height: 1, background: '#EDEDED' }}></div>

      <div className='flex_aiC_jB mb10'>
        <div>选择算法参数</div>
        <div className='flex_aiC'>
          <div style={{ marginRight: 12 }}>设备型号</div>
          <Select style={{ width: 200, marginRight: 20 }} placeholder="请选择设备型号"  onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />

          <div style={{ marginRight: 12 }}>参数中文名称</div>
          <Select style={{ width: 200 }} placeholder="请选择参数中文名称"  onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
        </div>
      </div>
      <Table
        scroll={tableData.length > 0 ? { y: 41 * 10 } : {}}
        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 className='flex_aiC_jB mt30'>
        <ButtonComp text={'查看记录'} onClick={() => { }} />
        <ButtonComp text={'配发'} onClick={() => { }} />
      </div>
    </div>
  );
}