import React, { useEffect, useState } from 'react';
import { Descriptions, Modal } from 'antd';
import moment from 'moment';
import { queryPushHistoryDetail } from '@/services/pushMessage';

interface userCheckPros {
  visible: boolean;
  record_id: string;
  onCallback: () => void;
}

interface detailType {
  title: string;
  phone: string;
  created_at: string;
}

/**
 * 推送历史详情
 * @param props
 * @constructor
 */
const PushHistoryDetail: React.FC<userCheckPros> = (props) => {
  const { visible, onCallback, record_id } = props;
  const [dataDetail, setDataDetail] = useState<detailType>({
    title: '',
    phone: '',
    created_at: '',
  });

  useEffect(() => {
    queryPushHistoryDetail(record_id).then((res) => {
      if (res.code === 0) {
        setDataDetail(res.data);
      }
    });
  }, []);

  // 确定
  const onOk = () => {
    onCallback();
  };

  // 取消
  const onCancel = () => {
    onCallback();
  };

  return (
    <Modal title="查看" open={visible} onOk={onOk} onCancel={onCancel} width={1000}>
      <Descriptions title="历史记录" bordered column={2}>
        <Descriptions.Item label="推送标题">{dataDetail?.title}</Descriptions.Item>
        <Descriptions.Item label="推送类型">{dataDetail?.phone}</Descriptions.Item>
        <Descriptions.Item label="推送时间">
          {dataDetail?.created_at
            ? moment(dataDetail?.created_at).format('YYYY-MM-DD HH:ss:mm')
            : '暂无'}
        </Descriptions.Item>
        {/*<MyEditor data={dataDetail?.body ? dataDetail?.body : ''} readOnly={true} />*/}
      </Descriptions>
    </Modal>
  );
};
export default PushHistoryDetail;