import React, { useRef } from 'react';
import { history } from 'umi';
import moment from 'moment';
import { Button, Popconfirm, message, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import PageTable from '@/components/PageTable';
import { getNoticeList, deleteNotice, updateNotice } from '@/services/notice';

const formatterTime = (val) => {
  return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
};

export default (props) => {
  const actionRef = useRef();

  const gotoEdit = (id) => {
    const queryStr = id ? `?id=${id}` : '';
    history.push(`./notice/edit.jsx${queryStr}`);
  };
  const handleDelete = (id) => {
    deleteNotice(id).then(() => {
      message.success('删除成功');
      actionRef.current.reload();
    }).catch((err) => {
      console.log(err.message)
    });
  };
  //列表切换通知状态方法
  const handleOK = (record, data) => {
    const title = record.status
      ? '您确定要将该通知状态变更为未发布吗? 变更后该通知将不在移动端显示'
      : '您确定要将该通知状态变更为发布吗? 发布后该通知可以在移动端显示';
    Modal.confirm({
      title: title,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        updateNotice(record.newsId, { ...record, status: record.status === 1 ? 0 : 1 })
          .then((res) => {
            message.success('操作成功');
            actionRef.current.reload();
          })
          .catch((err) => {
            console.log(err.message)
          });
      },
    });
  };
  const actions = () => [
    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => gotoEdit()}>
      新增
    </Button>,
  ];
  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '权重',
      dataIndex: 'weight',
      key: 'weight',
      search: false,
      width: 100,
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: formatterTime,
      search: false,
      width: 100,
    },
    {
      title: '发布状态',
      dataIndex: 'status',
      key: 'status',
      search: false,
      width: 100,
      render: (_, record) => {
        return record.status === 1 ? '发布' : '未发布';
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 240,
      render: (_, record) => [
        <Button style={{ padding: 0 }} type="link" key={1} onClick={() => handleOK(record)}>
          {record.status === 0 ? '发布' : '取消发布'}
        </Button>,
        <Button style={{ padding: 0 }} type="link" key={2} onClick={() => gotoEdit(record.noticeId)}>
          编辑
        </Button>,
        <Popconfirm
          key={3}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.noticeId)}
          okText="确定"
          cancelText="取消"
        >
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageHeaderWrapper>
      <PageTable
        request={getNoticeList}
        toolBarRender={actions}
        actionRef={actionRef}
        columns={columns}
        rowKey="noticeId"
        options={false}
        scroll={{ x: 1000 }}
      />
    </PageHeaderWrapper>
  );
};