import React, { useState, useRef } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { Drawer, Descriptions, message } from 'antd';
import ProTable from '@ant-design/pro-table';
import Field from '@ant-design/pro-field';
import { CopyOutlined } from '@ant-design/icons';

import { useIntl, FormattedMessage } from 'umi';
import { GetRequestLogPageAsync } from '../services';

const RequestLog = (props) => {
  const actionRef =useRef();
  const [currentRow, setCurrentRow] = useState({});
  //drawer 显示控制
  const [drawerVisible, setDrawerVisible] = useState(false);

  //请求详情
  const requestloginfo = async (fields) => {

    setCurrentRow({
      ip: fields.ip,
      refererUrl: fields.refererUrl,
      requestUrl: fields.requestURL,
      parameters: fields.requestData,
      returnResult: fields.resultData,
    });
  };

  const valueEnum = new Map();
  valueEnum.set(true, { text: '异常', status: 'Error', });
  valueEnum.set(false, { text: '正常', status: 'Success', });
  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '操作人',
      dataIndex: 'name',
      valueType: 'textarea',
    },
    {
      title: '操作说明',
      dataIndex: 'methodName',
      valueType: 'textarea',

      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createAt',
      valueType: 'date',
      hideInForm: true,
      // width: 100,
      // fixed: 'right',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key={record.id}
          onClick={async () => {
            await requestloginfo(record);
            setDrawerVisible(true);
          }} >
          详情
        </a>
      ],
    },
  ];
  const intl = useIntl();
  return (
    <PageContainer>
      <ProTable
       search={false}
        headerTitle="操作日志"
        actionRef={actionRef}
        rowKey="id"
        request={async (params) => {
          var queryData = [];
          var total = 0;
          params.value=props.storeId;
          params.method=["AddStoreGoodAsync", "DelStoreGoodAsync", "UpdateStoreGoodsAsync"];
          await GetRequestLogPageAsync(JSON.stringify(params)).then((re) => {
            queryData = re.data.data;
            total = re.data.total;
          });
          return {
            data: queryData,
            success: true,
            total: total,
          };
        }}
        columns={columns}
        pagination={{ defaultPageSize: 10 }}
      />
      {/* ------------------------ */}
      <Drawer
        title="详情"
        key="1"
        placement="right"
        size="large"
        onClose={() => {
          setDrawerVisible(false);
        }}
        visible={drawerVisible}
      >
        <Descriptions column={1}>
          <Descriptions.Item label="操作IP">
            <Field text={currentRow.ip} />
          </Descriptions.Item>
          <Descriptions.Item label="参考地址">
            <Field text={currentRow.refererUrl} />
          </Descriptions.Item>
          <Descriptions.Item label="请求地址">
            <Field text={currentRow.requestUrl} />
          </Descriptions.Item>
        </Descriptions>
        <Descriptions>
          <Descriptions.Item label="请求数据" >
            <a
              onClick={() => {
                let oInput = document.createElement('input');
                oInput.value = currentRow.parameters;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand('Copy'); // 执行浏览器复制命令
                message.success('复制成功');
                oInput.remove();
              }}
            >
              <CopyOutlined />
            </a>
            <div style={{ width: '220px', overflow: 'scroll', overflowX: 'auto' }}>
              <Field text={currentRow.parameters} valueType="jsonCode" />
            </div>
          </Descriptions.Item>
          <Descriptions.Item label="返回数据" >
            <a
              onClick={() => {
                let oInput = document.createElement('input');
                oInput.value = currentRow.returnResult;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand('Copy'); // 执行浏览器复制命令
                message.success('复制成功');
                oInput.remove();
              }}
            >
              <CopyOutlined />
            </a>
            <div style={{ width: '400px', overflow: 'scroll', overflowX: 'auto' }}>
              <Field text={currentRow.returnResult} valueType="jsonCode" />
            </div>
          </Descriptions.Item>
        </Descriptions>
      </Drawer>
    </PageContainer>
  );
};

export default RequestLog;
