import ContentWarp from '@/components/ContentWarp';
import styles from '../../../GLQ/index.less';
import ButtonComp from '@/components/ButtonComp';
import { ConfigProvider, Pagination, Select, Table, message } from 'antd';

import { rowClassName } from '@/utils';
import { useEffect, useState } from 'react';
import { algorithmArgsConfigEditOrAdd, algorithmArgsConfigList, upholdArgsInfoList } from '@/services/sf';
import { deviceHardPage } from '@/services/register';

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

  const [tableData1, setTableData1] = useState([]);
  const [pageNumber1, setPageNumber1] = useState(1);
  const [pageSize1, setpageSize1] = useState(10);
  const [total1, setTotal1] = useState(0);
  const [selectedRowKeys1, setSelectedRowKeys1] = useState([]);

  const [tableData2, setTableData2] = useState([]);
  const [pageNumber2, setPageNumber2] = useState(1);
  const [pageSize2, setpageSize2] = useState(10);
  const [total2, setTotal2] = useState(0);

  const [paramsList, setParamsList] = useState<any>([{ label: '全部', value: '' }]);
  const [paramsId, setParamsId] = useState('');

  useEffect(() => { getList(); setSelectedRowKeys([]) }, [pageNumber]);
  useEffect(() => { getList1(); setSelectedRowKeys1([]) }, [pageNumber1]);
  useEffect(() => { getList2(); }, [pageNumber2]);

  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: 'argsCnName', key: 'argsCnName', align: 'center' },
    { title: '对应算法标识', dataIndex: 'algorithmId', key: 'algorithmId', align: 'center' },
    { title: '参数简称', dataIndex: 'argsShortName', key: 'argsShortName', align: 'center' },
    { title: '算法模式简称', dataIndex: 'modelShortName', key: 'modelShortName', align: 'center' },
  ]

  const columns1: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{(pageNumber1 - 1) * pageSize1 + c + 1}</span>;
      },
    },
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center' },
    { title: '管理实体标识', dataIndex: 'deviceEntityId', key: 'deviceEntityId', align: 'center' },
    { title: '设备型号', dataIndex: 'deviceType', key: 'deviceType', align: 'center' },
    { title: '协同管理标志', dataIndex: 'name', key: 'name', align: 'center' }
  ]

  const columns2: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{(pageNumber2 - 1) * pageSize2 + c + 1}</span>;
      },
    },
    { title: '参数中文名称', align: 'center', render: (val: any) => { return val.upholdArgsInfo.argsCnName} },
    { title: '对应算法标识', align: 'center', render: (val: any) => { return val.upholdArgsInfo.algorithmId} },
    { title: '参数简称', align: 'center', render: (val: any) => { return val.upholdArgsInfo.argsShortName}  },
    { title: '算法模式简称', align: 'center', render: (val: any) => { return val.upholdArgsInfo.modelShortName}  },
    { title: '设备名称', align: 'center', render: (val: any) => { return val.deviceHard.deviceName}  },
    { title: '管理实体标识', align: 'center', render: (val: any) => { return val.deviceHard.deviceEntityId}  },
    { title: '设备型号', align: 'center', render: (val: any) => { return val.deviceHard.deviceType}  },
    { title: '协同管理标识', dataIndex: 'name', key: 'name', align: 'center' }
  ]

  const getList = () => {
    upholdArgsInfoList({ pageNumber, pageSize }).then((res) => {
      if (res?.result == "success") {
        setTotal(res.data[0].total);
        setTableData(res.data[0].list);
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  // 获取注册设备列表
  const getList1 = () => {
    deviceHardPage({ pageNumber: pageNumber1, pageSize: pageSize1 }).then((res) => {
      if (res?.result == "success") {
        setTotal1(res.data[0].total)
        setTableData1(res.data[0].list)
      } else {
        message.error(res?.errorMsg);
      }
    })
  }
  // 获取安装配置成功记录列表
  const getList2 = () => {
    algorithmArgsConfigList({ pageNumber: pageNumber2, pageSize: pageSize2 }).then((res) => {
      if (res?.result == "success") {
        setTotal2(res.data[0].total)
        setTableData2(res.data[0].list)
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  // 确认提交
  const submit = () => {
    if (selectedRowKeys.length == 0 && selectedRowKeys1.length == 0) {
      message.info("请选择算法与设备后再提交！");
      return
    }
    let algorithm: any = tableData.filter((val: any) => val?.id == selectedRowKeys);
    let device: any = tableData1.filter((val: any) => val?.id == selectedRowKeys1);

    let params = {
      argsId: algorithm[0]?.id,
      deviceId: device[0]?.id,
      argsCnName: algorithm[0]?.argsCnName,
      algorithmId: algorithm[0]?.algorithmId,
      argsShortName: algorithm[0]?.argsShortName,
      modelShortName: algorithm[0]?.modelShortName,
      deviceName: device[0]?.deviceName,
      deviceEntityId: device[0]?.deviceEntityId,
      deviceType: device[0]?.deviceType,
      cooperateManagerNumber: Math.floor(Math.random())
    }
    algorithmArgsConfigEditOrAdd(params).then((res) => {
      if (res?.result == "success") {
        message.success("新增算法参数配置成功");
        pageNumber2 == 1 ? getList2() : setPageNumber2(1);
        setSelectedRowKeys([])
        setSelectedRowKeys1([])
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  return (
    <div className={styles.params_warp}>
      <div className='flex_jB'>
        <div style={{ width: 'calc(40% - 20px)', marginRight: 20 }}>
          <ContentWarp text={'参数安装配置'} style={{ padding: '45px 20px 20px 20px', minHeight: '623px' }}>
            <div className='mb20'>选择算法参数</div>
            <div className='mb20 mt20 flex_aiC'>
              <div className='mr16'>参数集合</div>
              <Select style={{ width: 260 }} placeholder="请选择参数集合" value={paramsId} onChange={(e) => {
                setParamsId(e)
              }} options={paramsList} />
            </div>

            <Table
              scroll={tableData.length > 0 ? { y: 41 * 12 } : {}}
              pagination={false}
              bordered
              columns={columns}
              dataSource={tableData}
              rowKey={(record: any) => record?.id}
              rowClassName={rowClassName}
              rowSelection={{
                type: 'radio',
                selectedRowKeys,
                onChange: (selectedKeys: any) => {
                  setSelectedRowKeys(selectedKeys);
                }
              }}
            />
            {total > 0 && <div className='flex_aiC_jB mt20'>
              <div>共 {total} 条</div>
              <Pagination
                current={pageNumber}
                pageSize={pageSize}
                total={total}
                showQuickJumper
                onChange={(val) => {
                  setPageNumber(val);
                }}
                onShowSizeChange={(val) => {
                  setpageSize(val);
                  getList();
                }}
              />
            </div>}

          </ContentWarp>
        </div>
        <div style={{ width: '60%' }}>
          <ContentWarp text={'选择设备'} style={{ padding: '40px 20px 20px 20px', minHeight: '280px' }}>
            <div className='flex_jE mb20'>
              <ButtonComp text={'查询'} onClick={() => { }} />
            </div>

            <Table
              scroll={tableData1.length > 0 ? { y: 41 * 4 } : {}}
              pagination={false}
              bordered
              columns={columns1}
              dataSource={tableData1}
              rowKey={(record: any) => record?.id}
              rowClassName={rowClassName}
              rowSelection={{
                type: 'radio',
                selectedRowKeys: selectedRowKeys1,
                onChange: (key: any, row: any) => {
                  setSelectedRowKeys1(key);
                }
              }}
            />
            {total1 > 0 && <div className='flex_aiC_jB mt20'>
              <div>共 {total1} 条</div>
              <Pagination
                current={pageNumber1}
                pageSize={pageSize1}
                total={total1}
                showQuickJumper
                onChange={(val) => setPageNumber1(val)}
                onShowSizeChange={(val) => {
                  setpageSize1(val);
                  getList1();
                }}
              />
            </div>}
          </ContentWarp>
          <ContentWarp text={'安装配置成功记录'} style={{ padding: '48px 20px 20px 20px', marginTop: 28, minHeight: '240px' }}>
            <Table
              scroll={tableData2.length > 0 ? { y: 41 * 4 } : {}}
              pagination={false}
              bordered
              columns={columns2}
              dataSource={tableData2}
              rowKey={(record: any) => record?.id}
              rowClassName={rowClassName}
            />

            {total2 > 0 && <div className='flex_aiC_jB mt20'>
              <div>共 {total2} 条</div>
              <Pagination
                current={pageNumber2}
                pageSize={pageSize2}
                total={total2}
                showQuickJumper
                onChange={(val) => setPageNumber2(val)}
                onShowSizeChange={(val) => {
                  setpageSize2(val);
                  getList2();
                }}
              />
            </div>}
          </ContentWarp>
        </div>
      </div>
      <div className='flex_jE mt20'>
        <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => submit()} />
        <ButtonComp type={'cancel'} text={'载体输出'} onClick={() => { }} />
      </div>
    </div>
  );
}