import React, { useEffect, useMemo, useRef, useState } from 'react';
import {
  addMobilelog,
  exportMobilelog,
  getMobileLogList,
  removeMobilelog,
  updateMobilelog,
} from '@/services/logs/mobilelog';
import type { FormInstance } from 'antd';
import { Button, message, Modal } from 'antd';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { FormattedMessage, useAccess } from '@umijs/max';
import { DeleteOutlined, ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
import DictTag from '@/components/DictTag';
import { getDictValueEnum } from '@/services/system/dict';
import UpdateForm from './detail';

/**
 * 添加节点
 *
 * @param fields
 */
const handleAdd = async (fields: API.Logs.Operlog) => {
  const hide = message.loading('正在添加');
  try {
    const resp = await addMobilelog({ ...fields });
    hide();
    if (resp.code === 200) {
      message.success('添加成功');
    } else {
      message.error(resp.msg);
    }
    return true;
  } catch (error) {
    hide();
    message.error('添加失败请重试！');
    return false;
  }
};
/**
 * 更新节点
 *
 * @param fields
 */
const handleUpdate = async (fields: API.Logs.Operlog) => {
  const hide = message.loading('正在更新');
  try {
    const resp = await updateMobilelog(fields);
    hide();
    if (resp.code === 200) {
      message.success('更新成功');
    } else {
      message.error(resp.msg);
    }
    return true;
  } catch (error) {
    hide();
    message.error('配置失败请重试！');
    return false;
  }
};

/**
 * 删除节点
 *
 * @param selectedRows
 */
const handleRemove = async (selectedRows: API.Logs.Operlog[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;
  try {
    const resp = await removeMobilelog(selectedRows.map((row) => row.operId).join(','));
    hide();
    if (resp.code === 200) {
      message.success('删除成功，即将刷新');
    } else {
      message.error(resp.msg);
    }
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};
/**
 * 导出数据
 *
 *
 */
const handleExport = async () => {
  const hide = message.loading('正在导出');
  try {
    await exportMobilelog();
    hide();
    message.success('导出成功');
    return true;
  } catch (error) {
    hide();
    message.error('导出失败，请重试');
    return false;
  }
};

const MobileLog: React.FC = () => {
  // ref
  const formTableRef = useRef<FormInstance>();
  const access = useAccess();
  const actionRef = useRef<ActionType>();
  // status
  const [params, useParams] = useState({});
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.Logs.Mobilelog>();
  const [selectedRows, setSelectedRows] = useState<API.Logs.Mobilelog[]>([]);
  // 枚举
  const [businessTypeOptions, setBusinessTypeOptions] = useState<any>([]);
  const [operatorTypeOptions, setOperatorTypeOptions] = useState<any>([]);
  const [statusOptions, setStatusOptions] = useState<any>([]);

  // 初始化
  useEffect(() => {
    getDictValueEnum('sys_oper_type', true).then((data) => {
      setBusinessTypeOptions(data);
    });
    getDictValueEnum('sys_oper_type', true).then((data) => {
      setOperatorTypeOptions(data);
    });
    getDictValueEnum('sys_common_status', true).then((data) => {
      setStatusOptions(data);
    });
  }, []);

  const columns: ProColumns<API.Logs.Mobilelog>[] = useMemo(
    () => [
      {
        title: '日志主键',
        dataIndex: 'operId',
        valueType: 'text',
        hideInSearch: true,
      },
      {
        title: '操作模块',
        dataIndex: 'title',
        valueType: 'text',
      },
      {
        title: '业务类型',
        dataIndex: 'businessType',
        valueType: 'select',
        valueEnum: businessTypeOptions,
        render: (_, record) => {
          return <DictTag enums={businessTypeOptions} value={record.businessType} />;
        },
      },
      {
        title: '请求方式',
        dataIndex: 'requestMethod',
        valueType: 'text',
      },
      // {
      //   title: "操作类别",
      //   dataIndex: 'operatorType',
      //   valueType: 'select',
      //   valueEnum: operatorTypeOptions,
      //   render: (_, record) => {
      //     return (<DictTag enums={operatorTypeOptions} value={record.operatorType} />);
      //   },
      // },
      {
        title: '操作人员',
        dataIndex: 'operName',
        valueType: 'text',
      },
      {
        title: '主机地址',
        dataIndex: 'operIp',
        valueType: 'text',
      },
      {
        title: '操作地点',
        dataIndex: 'operLocation',
        valueType: 'text',
      },
      {
        title: '操作状态',
        dataIndex: 'status',
        valueType: 'select',
        valueEnum: statusOptions,
        render: (_, record) => {
          return <DictTag key="status" enums={statusOptions} value={record.status} />;
        },
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        valueType: 'dateTime',
      },
      {
        title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
        dataIndex: 'option',
        width: '120px',
        valueType: 'option',
        render: (_, record) => [
          <Button
            type="link"
            size="small"
            key="edit"
            hidden={!access.hasPerms('logs:mobilelog:edit.tsx')}
            onClick={() => {
              setModalVisible(true);
              setCurrentRow(record);
            }}
          >
            详细
          </Button>,
        ],
      },
    ],
    [businessTypeOptions, operatorTypeOptions, statusOptions],
  );

  return (
    <>
      <PageContainer>
        <div style={{ width: '100%', float: 'right' }}>
          <ProTable
            // params 是需要自带的参数
            // 这个参数优先级更高，会覆盖查询表单的参数
            actionRef={actionRef}
            formRef={formTableRef}
            rowKey="operId"
            columns={columns}
            search={{
              labelWidth: 120,
            }}
            rowSelection={{
              onChange: (_, selectedRows) => {
                setSelectedRows(selectedRows);
              },
            }}
            request={(params) =>
              getMobileLogList({ ...params } as API.Logs.MobilelogListParams).then((res) => {
                const result = {
                  data: res.rows,
                  total: res.total,
                  success: true,
                };
                return result;
              })
            }
            toolBarRender={() => [
              // <Button
              //   type="primary"
              //   key="add"
              //   hidden={!access.hasPerms('logs:mobilelog:add')}
              //   onClick={async () => {
              //     setCurrentRow(undefined);
              //     setModalVisible(true);
              //   }}
              // >
              //   <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
              // </Button>,
              <Button
                type="primary"
                key="remove"
                danger
                hidden={selectedRows?.length === 0 || !access.hasPerms('logs:mobilelog:remove')}
                onClick={async () => {
                  Modal.confirm({
                    title: '是否确认删除所选数据项?',
                    icon: <ExclamationCircleOutlined />,
                    content: '请谨慎操作',
                    async onOk() {
                      const success = await handleRemove(selectedRows);
                      if (success) {
                        setSelectedRows([]);
                        actionRef.current?.reloadAndRest?.();
                      }
                    },
                    onCancel() {},
                  });
                }}
              >
                <DeleteOutlined />
                <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
              </Button>,
              <Button
                type="primary"
                key="export"
                hidden={!access.hasPerms('logs:mobilelog:export')}
                onClick={async () => {
                  handleExport();
                }}
              >
                <PlusOutlined />
                <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
              </Button>,
            ]}
          />
        </div>
        <UpdateForm
          onSubmit={async (values) => {
            let success = false;
            if (values.operId) {
              success = await handleUpdate({ ...values } as API.Logs.Mobilelog);
            } else {
              success = await handleAdd({ ...values } as API.Logs.Mobilelog);
            }
            if (success) {
              setModalVisible(false);
              setCurrentRow(undefined);
              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          onCancel={() => {
            setModalVisible(false);
            setCurrentRow(undefined);
          }}
          open={modalVisible}
          values={currentRow || {}}
          businessTypeOptions={businessTypeOptions}
          operatorTypeOptions={operatorTypeOptions}
          statusOptions={statusOptions}
        />
      </PageContainer>
    </>
  );
};

export default MobileLog;
