import React, { useEffect, useState, useRef } from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Steps,
  Button,
  Drawer,
  Comment,
  Tooltip,
  Avatar,
  List,
  Card,
  Modal,
  Checkbox,
  Row,
  Col,
  message,
  Input,
  Table,
  Alert,
  Spin,
  Tabs,
} from 'antd';
import moment from 'moment';

const { Step } = Steps;
const { TextArea } = Input;
const { TabPane } = Tabs;

// 评论
function CommentDrawer(props) {
  const { visible, onClose, list, addComment, loading } = props;
  const [value, setValue] = useState('');
  // const [commentList, setCommentList] = useState([]);

  const handleSubmit = () => {
    if (!value) return;
    addComment(value, () => {
      setValue('');
    });
  };
  return (
    <Drawer title="评论列表" mask={false} placement="right" onClose={onClose} visible={visible}>
      <List
        className="comment-list"
        itemLayout="horizontal"
        dataSource={list}
        loading={loading}
        renderItem={item => (
          <li>
            <Comment
              author={<a>{item.AuthorUser.CName}</a>}
              avatar={<Avatar icon={<UserOutlined />} alt={item.author} />}
              content={<p>{item.comment}</p>}
              datetime={
                <Tooltip title={moment(item.c_time).format('YYYY-MM-DD')}>
                  <span>{moment(item.c_time).fromNow()}</span>
                </Tooltip>
              }
            />
          </li>
        )}
      />
      <Comment
        avatar={<Avatar icon={<UserOutlined />} alt="张三" />}
        content={
          <>
            <Form.Item>
              <TextArea rows={4} onChange={e => setValue(e.target.value)} value={value} />
            </Form.Item>
            <Form.Item>
              <Button htmlType="submit" loading={loading} onClick={handleSubmit} type="primary">
                添加评论
              </Button>
            </Form.Item>
          </>
        }
      />
    </Drawer>
  );
}
export default CommentDrawer