educoder/public/react/src/common/components/comment/CommentItem.js

/*
 * @Description: 评论单列
 * @Author: tangjiang
 * @Github: 
 * @Date: 2019-12-17 17:35:17
 * @LastEditors: tangjiang
 * @LastEditTime: 2019-12-19 18:02:28
 */
import './index.scss';
import React, { useState } from 'react';
import CommentIcon from './CommentIcon';
import { getImageUrl, CNotificationHOC } from 'educoder'
import { Icon } from 'antd';
import moment from 'moment';
// import QuillForEditor from '../../quillForEditor';
import CommentForm from './CommentForm';

// import {ModalConfirm} from '../ModalConfirm';
function CommentItem ({
  options,
  confirm
}) {
  // 显示评论输入框
  const [showQuill, setShowQuill] = useState(false);
  // 加载更多评论内容
  const [showMore, setShowMore] = useState(false);
  // 箭头方向
  const [arrow, setArrow] = useState(false);
  // 删除评论
  const deleteComment = () => {
    console.log('删除评论...');
    confirm({
      title: '提示',
      content: (<p>确定要删除该条回复吗?</p>),
      onOk () {
        console.log('点击了删除');
      }
    });
    // ModalConfirm('提示', (<p>确定要删除该条回复吗?</p>), () => {
    //   console.log('点击了删除');
    // });
  }

  // 评论头像
  const commentAvatar = (url) => ( 
    <img className="item-flex flex-image" src='https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg' alt=""/>
  );
  
  // 评论信息
  const commentInfo = () => (
    <p className="item-header">
      <span className="item-name">用户名</span>
      <span className="item-time">{moment(new Date(), 'YYYYMMDD HHmmss').fromNow()}</span>
      <span className="item-close"><Icon type="close" onClick={deleteComment}/></span>
    </p>
  );

  // 评论内容
  const commentCtx = (ctx) => (
    <p className="item-ctx">
      这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容
    </p>
  );

  // 加载更多
  const handleOnLoadMore = () => {
    if (!arrow) {
      // 展开所有
    } else {
      // 收起
    }
    setArrow(!arrow);
  };

  // 评论追加内容
  const commentAppend = () => {

    return (
      <ul className="comment_item_append_list">
        <li className="comment_item_area">
          {commentAvatar()}
          <div className="item-flex item-desc">
            {commentInfo()}
            {commentCtx()}
          </div>
        </li>
        <li className="comment_item_area">
          {commentAvatar()}
          <div className="item-flex item-desc">
            {commentInfo()}
            {commentCtx()}
          </div>
        </li>
        <li className="comment_item_area">
          {commentAvatar()}
          <div className="item-flex item-desc">
            {commentInfo()}
            {commentCtx()}
          </div>
        </li>

        <li className="comment_item_loadmore" onClick={handleOnLoadMore}>
          <p className="loadmore-txt">展开其余23条评论</p>
          <p className="loadmore-icon">
            <Icon type={!arrow ? 'down' : 'up'}/>
          </p>
        </li>
      </ul>
    );
  };
  // 点击图标
  const handleIconClick = () => {}
  
  // 点击评论icon
  const handleClickMessage = () => {
    setShowQuill(true);
  }

  // 点击取消
  const handleClickCancel = () => {
    setShowQuill(false);
  }

  // 点击保存
  const handleClickSubmit = (content) => {
    // 保存并关闭
    setShowQuill(false);
    console.log('获取保存内容', content);
  }

  return (
    <li className="comment_item_area">
      {commentAvatar()}
      <div className="item-flex item-desc">
        {commentInfo()}
        {commentCtx()}
        
        {commentAppend()}

        <div className="comment_icon_area">
          <CommentIcon className='comment-icon-margin' type="eye" count="100" iconClick={handleIconClick}/>
          {/* 回复 */}
          <CommentIcon 
            className='comment-icon-margin' 
            type="message" count="100" 
            iconClick={handleClickMessage}
          />
          {/* 点赞 */}
          <CommentIcon/>
        </div>

        <div
          style={{ display: showQuill ? 'block' : 'none'}}
          className="comment_item_quill">
          <CommentForm 
            onCancel={handleClickCancel}
            onSubmit={handleClickSubmit}
          />
        </div>
      </div>
    </li>
  );
}

export default CNotificationHOC() (CommentItem);