import React, { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {
  Button,
  Card,
  Row,
  Col,
  Input,
  Table,
  Tooltip,
  Space,
  Popconfirm,
  message,
  Divider,
} from 'antd';

import { getNotice, deleteNotice } from '@/services/notice';

import NoticeModal from './modal';

import DetailModal from './detailModal';

import { filterTimestamp } from '@/filters/index';

import { connect, Dispatch } from 'umi';

import type { ConnectState } from '@/models/connect';

import type { Role } from '@/models/user';

interface IProps {
  dispatch: Dispatch;
  roleList: Role[];
}

const Notice: React.FC<IProps> = ({ dispatch, roleList }) => {
  const [label, setLabel] = useState('');
  const [curPage, setCurpage] = useState(1);
  const [total, setTotal] = useState(0);
  const [noticeList, setNoticeList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [type, setType] = useState(0);
  const [visible, setVisible] = useState(false);
  const [curNoticeData, setCurNoticeData] = useState({});
  const [DetailModalVisible, setDetailModalVisible] = useState(false);
  const [id, setId] = useState('');

  // 获取公告列表
  const GetNotice = async (): Promise<void> => {
    const $par = {
      curPage,
      label,
      type: 'ANN',
    };
    setLoading(true);
    const { code, data } = await getNotice($par);
    setLoading(false);
    if (code === 0) {
      console.log(data);
      const { records, total: Total } = data;
      setTotal(Total);
      setNoticeList(records);
    }
  };
  useEffect(() => {
    GetNotice();
  }, [label, curPage]);

  // 打开弹窗
  const openModal = (value: number, record: Record<string, any>) => {
    console.log(record, '打开弹窗 ');
    setType(value);
    setVisible(true);
    setCurNoticeData(record);
  };

  // 删除公告
  const DeleteNotice = async (value: string): Promise<void> => {
    const { code, data } = await deleteNotice(value);
    if (code === 0) {
      console.log(data);
      message.success('删除成功');
    }

    GetNotice();
  };
  // 关闭弹窗
  const closeModal = (): void => setVisible(false);
  // 搜索
  const onSearch = (value: string): void => setLabel(value);

  // 分页
  const changePagination = (page: number): void => setCurpage(page);
  return (
    <PageContainer title="公告管理">
      <Card>
        <Row justify="space-between">
          <Col>
            <Input.Search
              style={{ width: 250 }}
              placeholder="请输入搜索公告名称/内容"
              onSearch={onSearch}
              enterButton
            />
          </Col>
          <Col>
            <Button onClick={() => openModal(0, {})}>发布公告</Button>
          </Col>
        </Row>
        <Table
          loading={loading}
          dataSource={noticeList}
          style={{ marginTop: 20 }}
          pagination={{ total, onChange: changePagination }}
        >
          <Table.Column
            title="公告标题"
            ellipsis
            width={300}
            key="label"
            dataIndex="label"
            render={(text, record: Record<string, any>) => (
              <Tooltip title={record.label} placement="topLeft">
                <span>{record.label}</span>
              </Tooltip>
            )}
          ></Table.Column>
          <Table.Column
            title="公告内容"
            ellipsis
            width={300}
            key="content"
            dataIndex="content"
            render={(text, record: Record<string, any>) => (
              <a
                onClick={() => {
                  setDetailModalVisible(true);
                  setId(record.id);
                }}
              >
                {' '}
                查看公告内容{' '}
              </a>
            )}
          />
          <Table.Column
            title="发布人"
            key="1"
            dataIndex="1"
            render={() => <span>管理员</span>}
          ></Table.Column>
          <Table.Column
            title="发布时间"
            key="createTime"
            dataIndex="createTime"
            render={(text) => <span>{filterTimestamp(text)}</span>}
          ></Table.Column>
          <Table.Column
            title="操作"
            key="action"
            dataIndex="action"
            render={(text, record: Record<string, any>) => (
              <Space>
                <a
                  onClick={() => {
                    setDetailModalVisible(true);
                    setId(record.id);
                  }}
                >
                  查看
                </a>
                <Divider type="vertical" />

                <a onClick={() => openModal(1, record as Record<string, any>)}>编辑</a>

                <Divider type="vertical" />
                <Popconfirm
                  title="你确定要删除这条公告吗?"
                  onConfirm={() => DeleteNotice(record.id)}
                  okText="Yes"
                  cancelText="No"
                >
                  <a>删除</a>
                </Popconfirm>
              </Space>
            )}
          ></Table.Column>
        </Table>
      </Card>
      {visible && (
        <NoticeModal
          GetNotice={GetNotice}
          curNoticeData={curNoticeData}
          closeModal={closeModal}
          visible={visible}
          type={type}
          roleList={roleList}
          dispatch={dispatch}
        />
      )}

      {/*  详情弹窗 */}
      {DetailModalVisible && (
        <DetailModal
          DetailModalVisible={DetailModalVisible}
          id={id}
          closeModal={() => setDetailModalVisible(false)}
        />
      )}
    </PageContainer>
  );
};

export default connect(({ user }: ConnectState) => ({
  roleList: user.roleList,
}))(Notice);