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

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

export default function Page() {
  const [activeTab, setActiveTab] = useState(1)
  const [tableData, setTableData] = useState([]);
  const [form] = Form.useForm();
  const formItemSty = { width: 'auto', marginBottom: 20, marginRight: 30 };
  const [pageNumber, setPageNumber] = useState(1);
  const [pageSize, setpageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const [selectData, setSelectData] = useState<any>({
    productName: [],
    productNum: [],
    publisherType: [],
    carrierNumber: []
  });

  useEffect(() => {
    form.setFieldsValue({
      applyNewOld: '申请新密钥体',
    })
    getSelect()
  }, [])

  // 获取下拉框数据
  const getSelect = () => {
    secretFormatList({}).then((res) => {
      if (res?.result == "success") {
        let list = res.data[0].list;
        let productName = list.map((item: any) => { return { label: item.productName, value: item.productName } });
        let publisherType = list.map((item: any) => { return { label: item.publisherType, value: item.publisherType } });
        let productNum = list.map((item: any) => { return { label: item.productNum, value: item.productNum } });
        let carrierNumber = list.map((item: any) => { return { label: item.carrierNumber, value: item.carrierNumber } });

        setSelectData({
          productName,
          publisherType,
          productNum,
          carrierNumber
        })
      } 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: 'askType', key: 'askType', align: 'center' },
    { title: '产品名称', dataIndex: 'productName', key: 'productName', align: 'center' },
    { title: '产品编号', dataIndex: 'productNum', key: 'productNum', align: 'center' },
    { title: '申请数量', dataIndex: 'applyNum', key: 'applyNum', align: 'center' },
    { title: '申请时间', dataIndex: 'createTime', key: 'createTime', align: 'center' },
    {
      title: '申请结果', key: 'name', align: 'center',
      render: (a: any, b: any, c: any) => {
        return <span>申请成功</span>
      }
    },
    // { title: '载体型号', dataIndex: 'carrierModel', key: 'carrierModel', align: 'center' }
  ]


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

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

  const onFinish = (values: any) => {
    addSecretAsk(values).then((res) => {
      if (res?.result == "success") {
        message.success('申请成功')
        pageNumber == 1 ? getList() : setPageNumber(1);
        form.setFieldsValue({
          applyNewOld: '申请新密钥体',
        })
      } 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}`}>
      <TabsComp
        dataSource={[{ id: 1, name: '密钥体申请' }]}
        activeTab={activeTab}
        onChange={(e) => setActiveTab(e)} />

      <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
        <Form.Item name="applyNewOld" label="" style={{ width: '100%', marginBottom: 20 }}>
          <Radio.Group>
            <Radio value={'申请新密钥体'}> 申请新密钥体 </Radio>
            <Radio value={'申请旧密钥体'}> 申请旧密钥体 </Radio>
          </Radio.Group>
        </Form.Item>
        {/* 密钥种类字段未知 未对接字段 */}
        {/* <Form.Item name="keyType" label="密钥种类" style={formItemSty}>
          <Select 
            placeholder="请选择密钥种类"
            style={{ width: 260 }} 
            onChange={(e) => { }} 
            options={[
              { label: '1管理密销', value: 1 },
              { label: '2用户密钥', value: 2 },
              { label: '3用户密钥', value: 3 }
            ]} />
        </Form.Item> */}
        <Form.Item name="productName" label="产品名称" style={formItemSty} rules={[
          { required: true, message: '请选择产品名称' }
        ]}>
          <Select style={{ width: 260 }} placeholder={'请选择产品名称'} onChange={(e) => { }} options={selectData.productName} />
        </Form.Item>
        <Form.Item name="productNum" label="产品编号" style={formItemSty} rules={[
          { required: true, message: '请输入产品编号' }
        ]}>
          <Input placeholder="请输入产品编号" style={{ width: 260 }} />
        </Form.Item>
        <Form.Item name="askType" label="申请类型" style={formItemSty} rules={[
          { required: true, message: '请选择申请类型' }
        ]}>
          <Select style={{ width: 260 }} placeholder={'请选择申请类型'} onChange={(e) => { }} options={selectData.publisherType} />
        </Form.Item>
        <div className='flex_aiC'>
          <Form.Item name="applyNum" label="申请数量" style={{ marginBottom: 30 }} rules={[
            { required: true, message: '请输入申请数量' }
          ]}>
            <Input placeholder="请输入申请数量" style={{ width: 260 }} type='number' min={1} />
          </Form.Item>
          <ButtonComp style={{ marginBottom: 30 }} text={'申请密钥体'} onClick={() => form.submit()} />
        </div>
      </Form>

      <div className='mb20'>申请情况列表</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>
  );
}