import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Form, Input, Space, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { queryPushHistory } from '@/services/pushMessage';
import moment from 'moment';
import PushHistoryDetail from '@/pages/PushMessageManagement/pushHistoryDetail';

interface DataType {
  title: string;
  content: string;
  content_type: number;
  time: string;
  record_id: string;
}

/**
 * 推送历史详情
 * @constructor
 */
const PushHistory: React.FC = () => {
  const [form] = Form.useForm();
  const [detailId, setDetailId] = useState('');
  const [visible, setVisible] = useState(false);
  const [searchData, setSearchData] = useState<object | null>({});
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
  const [dataList, setDataList] = useState([]);

  // 获取列表内容
  const getList = () => {
    const params = {
      q: 'page',
      current: pagination.current,
      pageSize: pagination.pageSize,
    };
    queryPushHistory(params).then((res) => {
      if (res && res.code === 0) {
        setDataList(res.data.list);
        setPagination(res.data.pagination);
        setLoading(false);
      }
    });
  };

  useEffect(() => {
    // setLoading(true);
    getList();
  }, []);

  // 搜索
  const onFinish = () => {
    form.validateFields().then((data) => {
      setLoading(true);
      setSearchData(data);
    });
  };

  // 编辑
  const toDetail = (data: any) => {
    setDetailId(data);
    setVisible(true);
  };

  // 分页切换
  const tableChange = (page: any) => {
    setLoading(true);
    const params = {
      q: 'page',
      current: page.current,
      pageSize: page.pageSize,
      ...searchData,
    };
    queryPushHistory(params).then((res) => {
      if (res && res.code === 0) {
        setDataList(res.data.list);
        setPagination(res.data.pagination);
        setLoading(false);
      }
    });
  };

  // 编辑回调
  const handleEdit = () => {
    setVisible(false);
    setLoading(true);
    getList();
  };

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      key: 'index',
      render: (_: any, row: any, index: number) => index + 1,
    },
    {
      title: '推送标题',
      dataIndex: 'title',
      key: 'title',
      width: 250,
    },
    {
      title: '展示内容',
      dataIndex: 'content',
      key: 'content',
      width: 250,
    },
    {
      title: '消息类型',
      dataIndex: 'content_type',
      key: 'content_type',
      width: 250,
      render: (text) => <span>{{ 1: '系统消息', 2: '活动消息' }[text]}</span>,
    },
    {
      title: '推送时间',
      dataIndex: 'time',
      key: 'time',
      width: 250,
      render: (time) => <span>{moment(time).format('YYYY-MM-DD HH:mm')}</span>,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              toDetail(record);
            }}
          >
            查看详情
          </a>
        </Space>
      ),
    },
  ];
  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => {
      return <span> 共 {total}条 </span>;
    },
    ...pagination,
  };

  return (
    <PageContainer>
      <div>
        <Card>
          <Form form={form} layout="inline" onFinish={onFinish}>
            <Form.Item name="name" label="推送内容名称">
              <Input placeholder="请输入推送内容名称" />
            </Form.Item>
          </Form>
          <Table
            columns={columns}
            dataSource={dataList}
            rowKey={(record) => record.record_id}
            pagination={paginationProps}
            loading={loading}
            onChange={tableChange}
          />
          {visible && (
            <PushHistoryDetail visible={visible} onCallback={handleEdit} record_id={detailId} />
          )}
        </Card>
      </div>
    </PageContainer>
  );
};
export default PushHistory;
