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

import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';
import { secretList } from '@/services/my';

export default function Page() {
  const [tableData, setTableData] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedData, setSelectedData] = useState([]);
  const [proxy, setProxy] = useState('全部');
  const [keyType, setKeyType] = useState(null);

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

  const getList = () => {
    secretList({ pageNumber: 1, pageSize: 10 }).then((res) => {
      if (res?.result == "success") {
        let show = true;
        let pmcs;
        res.data[0].list.forEach((e: any) => {
          if (e?.content == 'PMCS') {
            pmcs = { ...e, label: e.keyType, value: e.keyType }
          }
          if (!['PMCS', 'vpn', 'ythglmy'].includes(e?.content) && e?.assemblySituation == '未装配') {
            show = false
          }
        });

        if (show) { setSelectedData([pmcs]) }

      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  const columns: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{c + 1}</span>;
      },
    },
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center' },
    { title: '管理实体标识', dataIndex: 'managerModelId', key: 'managerModelId', align: 'center' },
    { title: '310标识', dataIndex: 'deviceMarkId', key: 'deviceMarkId', align: 'center' },
    { title: '密钥种类名称', dataIndex: 'keyType', key: 'keyType', align: 'center' },
    { title: '安装方式', dataIndex: 'installMethod', key: 'installMethod', align: 'center' },
    { title: '载体类型', dataIndex: 'carrierType', key: 'carrierType', align: 'center' },
    { title: '输出日期', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '协同管理标志', dataIndex: 'managementFlag', key: 'managementFlag', align: 'center' },
    { title: '是否下载到邮箱', dataIndex: 'name', key: 'name', align: 'center' }
  ]

  return (
    <div className={`${styles.params_warp}`}>
      <ButtonComp type={'special'} text={'专用密钥装配'} onClick={() => { }} />

      <div className='flex_aiC mt20 mb20'>
        <div className='mr16'>密钥类型</div>
        <Select
          style={{ width: 260, marginRight: 30 }}
          placeholder={'请选择密钥类型'}
          value={keyType}
          onChange={(e, option) => {
            setKeyType(e);
            setTableData([option])
          }}
          options={selectedData} />

        <div className='mr16'>管理代理</div>
        <Select
          style={{ width: 260 }}
          placeholder={'请选择管理代理'}
          value={proxy}
          onChange={(e) => setProxy(e)}
          options={[
            { label: '全部', value: '全部' },
            { label: '无代理', value: '无代理' }
          ]} />
      </div>

      <div className='mb10'>专用密钥装配列表</div>
      <Table
        scroll={tableData.length > 0 ? { y: 41 * 8 } : {}}
        pagination={false}
        bordered
        columns={columns}
        dataSource={tableData}
        rowKey={(record: any) => record?.id}
        rowClassName={rowClassName}
        rowSelection={tableData.length > 0 ? {
          type: 'radio',
          selectedRowKeys,
          onChange: (selectedKeys: any) => {
            setSelectedRowKeys(selectedKeys);
          }
        } : null}
      />

      <div className='flex_jE mt20'>
        <ButtonComp type='cancel' style={{ marginRight: 20 }} text={'过滤'} onClick={() => {
          if (selectedRowKeys.length == 0) {
            message.info('请在管理密钥装配列表中选择一条数据！');
            return
          }
          getList()
          message.success('载体输出成功！')
        }} />
        <ButtonComp type='cancel' style={{ marginRight: 20 }} text={'载体输出'} onClick={() => { }} />
        <ButtonComp type='cancel' text={'下载到邮箱'} onClick={() => { }} />
      </div>
    </div>
  );
}