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

import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';
import { mailIssueList, secretFormatList, secretList, secretUpdateStatus } 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 [form] = Form.useForm();
  const [selectData, setSelectData] = useState<any>({
    productName: [],
    publisherType: []
  });
  const [tableData1, setTableData1] = useState([]);
  const [pageNumber1, setPageNumber1] = useState(1);
  const [pageSize1, setpageSize1] = useState(10);
  const [total1, setTotal1] = useState(0);

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const formItemSty = { width: '31%', marginBottom: 20, marginRight: 30 };

  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: 'productNum', key: 'productNum', align: 'center' },
    { title: '载体类型', dataIndex: 'carrierType', key: 'carrierType', align: 'center' },
    { title: '载体型号', dataIndex: 'applyModel', key: 'applyModel', align: 'center' },
    { title: '数量', dataIndex: 'number', key: 'number', align: 'center' },
    { title: '当前状态', dataIndex: 'currentStatus', key: 'currentStatus', align: 'center' },
    { title: '导入时间', dataIndex: 'importTime', key: 'importTime', 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: 'name', key: 'name', align: 'center' },
    { title: '密钥分发平台名称', dataIndex: 'keyDistPlatformName', key: 'keyDistPlatformName', align: 'center' },
    { title: '密钥分发平台实体标识', dataIndex: 'keyDistPlatformEntity', key: 'keyDistPlatformEntity', align: 'center' },
    { title: '产品名称', dataIndex: 'productName', key: 'productName', align: 'center' },
    { title: '产品编号', dataIndex: 'productCode', key: 'productCode', align: 'center' },
    { title: '载体类型', dataIndex: 'carrierType', key: 'carrierType', align: 'center' },
    { title: '载体型号', dataIndex: 'applyModel', key: 'applyModel', align: 'center' },
    { title: '总数量', dataIndex: 'total', key: 'total', align: 'center' },
    { title: '已下载数量', dataIndex: 'downloadNum', key: 'downloadNum', align: 'center' },
    { title: '授权', dataIndex: 'empower', key: 'empower', align: 'center' },
    { title: '优先级', dataIndex: 'priority', key: 'priority', align: 'center' },
    { title: '结束时间', dataIndex: 'overTime', key: 'overTime', align: 'center' },
    { title: '通知标志', dataIndex: 'notificationFlag', key: 'notificationFlag', align: 'center' },
    { title: '删除标志', dataIndex: 'deleteFlag', key: 'deleteFlag', align: 'center' }
  ]

  useEffect(() => {
    form.setFieldsValue({
      productName: '',
      carrierType: '',
      carrierNumber: '',
      orderDirection: '',
    })
    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 carrierType = list.map((item: any) => { return { label: item.carrierType, value: item.carrierType } });
        let carrierNumber = list.map((item: any) => { return { label: item.carrierNumber, value: item.carrierNumber } });
        setSelectData({
          productName: [{ label: '全部', value: '' }, ...productName],
          carrierType: [{ label: '全部', value: '' }, ...carrierType],
          carrierNumber: [{ label: '全部', value: '' }, ...carrierNumber],
        })
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

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

  useEffect(() => {
    getList1();
  }, [pageNumber1]);

  // 获取密钥体列表
  const getList = () => {
    let data = form.getFieldsValue()
    let params = {
      'secretImport.productName': data.productName,
      'secretImport.productNum': data.productNum,
      'secretImport.carrierType': data.carrierType,
      'secretImport.carrierNumber': data.carrierNumber,
    }
    secretList({ 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 getList1 = () => {
    mailIssueList({ 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 pageOnChange = (pageNumber: number) => {
    setPageNumber(pageNumber);
  }

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

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

  const sending = (type: number) => {
    if (selectedRowKeys.length == 0) {
      message.info('请勾选数据');
      return
    }

    let promises = selectedRowKeys.map(item => {
      return secretUpdateStatus({ id: item, type }).then((res) => {
        if (res?.result === "success") {
          return 1;
        } else {
          message.error(res?.errorMsg);
          return 0;
        }
      });
    });

    Promise.all(promises).then(results => {
      let recordCount = results.reduce((acc: any, val) => acc + val, 0);
      if (recordCount === selectedRowKeys.length) {
        message.success('配发成功');
        pageNumber1 == 1 ? getList1() : setPageNumber1(1);
        setSelectedRowKeys([]);
      }
    });
  }

  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="productName" label="产品名称" style={formItemSty}>
          <Select style={{ width: 260 }} placeholder="请选择产品名称" onChange={(e) => { }} options={selectData.productName} />
        </Form.Item>
        <Form.Item name="carrierType" label="载体类型" style={formItemSty}>
          <Select style={{ width: 260 }} placeholder="请选择载体类型" onChange={(e) => { }} options={selectData.carrierType} />
        </Form.Item>
        {/* <Form.Item name="aaa" label="可下载数量" style={formItemSty}>
          <Input placeholder="请输入可下载数量" style={{ width: 260 }} />
        </Form.Item> */}
        <Form.Item name="productNum" label="产品编号" style={formItemSty}>
          <Input placeholder="请输入产品编号" style={{ width: 260 }} />
        </Form.Item>
        <div className='flex_aiC'>
          <Form.Item name="carrierNumber" label="载体型号" style={{ marginBottom: 30 }}>
            <Select style={{ width: 260 }} placeholder="请选择载体型号" onChange={(e) => { }} options={selectData.carrierNumber} />
          </Form.Item>
          <ButtonComp style={{ marginBottom: 30 }} text={'查询'} onClick={() => form.submit()} />
        </div>
        {/* <Form.Item name="aaa" label="&nbsp;&nbsp;&nbsp;&nbsp;下载授权" style={formItemSty}>
          <Select style={{ width: 260 }} placeholder="请选择下载授权" onChange={(e) => { }} options={[
            { label: '已授权', value: '已授权' },
            { label: '未授权', value: '未授权' }
          ]} />
        </Form.Item>
        <Form.Item name="systemName" label="目的系统" style={formItemSty}>
          <Select style={{ width: 260 }} placeholder="请选择目的系统" onChange={(e) => { }} options={[]} />
        </Form.Item>
        <Form.Item name="quantity" label="配发数量" style={formItemSty}>
          <Input placeholder="请输入配发数量" style={{ width: 260 }} type='number' min={0} />
        </Form.Item>
        <Form.Item name="aaa" label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;优先级" style={formItemSty}>
          <Select style={{ width: 260 }} placeholder="请选择优先级" onChange={(e) => { }} options={[
            { label: '普通', value: '普通' },
            { label: '特急', value: '特急' },
            { label: '紧急', value: '紧急' }
          ]} />
        </Form.Item>
        <Form.Item name="aaa" label="结束时间" style={formItemSty}>
          <DatePicker style={{ width: 260 }} />
        </Form.Item> */}
      </Form>


      <div className='mb20 flex_aiC_jB'>
        <div>密钥体列表</div>
        <ButtonComp type={'cancel'} text={'配发'} onClick={() => sending(2)} />
      </div>

      <Table
        scroll={{ x: 800, y: 41 * 11 }}
        pagination={false}
        bordered
        columns={columns}
        dataSource={tableData}
        rowKey={(record: any) => record?.id}
        rowClassName={rowClassName}
        rowSelection={{
          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={pageOnChange}
          onShowSizeChange={onShowSizeChange}
        />
      </div>}

      <div className='mt30 mb20 flex_aiC_jB'>
        <div>密钥体邮箱任务列表</div>
      </div>


      <Table
        scroll={{ x: 800, y: 41 * 11 }}
        pagination={false}
        bordered
        columns={columns1}
        dataSource={tableData1}
        rowKey={(record: any) => record?.id}
        rowClassName={rowClassName}
      />

      {total1 > 0 && <div className='flex_aiC_jB mt20'>
        <div>共 {total1} 条</div>
        <Pagination
          current={pageNumber1}
          pageSize={pageSize1}
          total={total1}
          showQuickJumper
          onChange={(pageNumber: number) => {
            setPageNumber1(pageNumber);
          }}
          onShowSizeChange={(current: any, pageSize: any) => {
            setpageSize1(pageSize);
            getList1();
          }}
        />
      </div>}
    </div>
  );
}