import React, { useState, useEffect, useRef } from 'react';
import { Button, Popconfirm, Modal, Form, Input, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import moment from 'moment';
import PageTable from '@/components/PageTable';
import { getNewsTypeList, addNewsType, deleteNewsType, updateNewsType } from '@/services/newsType';

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

export default (props) => {
  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
  const [form] = Form.useForm();
  const [editModal, setEditModal] = useState(false);
  const [loading, setLoading] = useState(false);
  const [typeId, setTypeId] = useState();
  const actionRef = useRef();

  const Submit = (values) => {
    setLoading(true);
    if (typeId) {
      updateNewsType(typeId, values).then(() => {
        setLoading(false);
        message.success(`修改成功`);
        onCancel();
        actionRef.current.reload();
      });
    } else {
      addNewsType(values)
        .then(() => {
          setLoading(false);
          message.success(`保存成功`);
          onCancel();
          actionRef.current.reload();
        })
        .catch((err) => {
          setLoading(false);
          message.error(err.message || err);
        });
    }
  };
  const handelEdit = (val) => {
    setTypeId(val.typeId);
    form.setFieldsValue(val);
    setEditModal(true);
  };
  const onCancel = () => {
    setTypeId();
    form.resetFields();
    setEditModal(false);
  };
  const handleDelete = (id) => {
    deleteNewsType(id)
      .then(() => {
        message.success('删除成功');
        actionRef.current.reload();
      })
      .catch((err) => {
        message.error(err);
      });
  };
  useEffect(() => {
    if (typeId) {
    } else {
      form.resetFields();
    }
  }, [typeId]);
  const actions = () => [
    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setEditModal(true)}>
      新增
    </Button>,
  ];
  const columns = [
    {
      title: '分类名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: formatterTime,
      search: false,
      width: 240,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 160,
      render: (_, record) => [
        <Button type="link" style={{ padding: 0 }} key={1} onClick={() => handelEdit(record)}>
          编辑
        </Button>,
        <Popconfirm
          key={2}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.typeId)}
          okText="确定"
          cancelText="取消"
        >
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageHeaderWrapper>
      <PageTable
        request={getNewsTypeList}
        columns={columns}
        actionRef={actionRef}
        rowKey="typeId"
        options={false}
        toolBarRender={actions}
        scroll={{ x: 1000 }}
      />
      <Modal
        forceRender
        title={typeId ? '分类编辑' : '分类新增'}
        visible={editModal}
        onCancel={onCancel}
        keyboard={false}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <Form {...formItemLayout} onFinish={Submit} form={form}>
          <FormItem label="分类名" name="name" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label=" " colon={false}>
            <Button type="default" onClick={onCancel}>
              取消
            </Button>
            <Button
              type="primary"
              loading={loading}
              htmlType="Submit"
              style={{ marginLeft: '4em' }}
            >
              确认
            </Button>
          </FormItem>
        </Form>
      </Modal>
    </PageHeaderWrapper>
  );
};