mfyx_web/src/Column/components/ColumnContentMessage.tsx

import React, { useEffect, useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'
import { Input, message, Modal } from 'antd'
import { ColumnService, IMessageDetail, IMsgChildrenList } from 'Column/Column.service'

import { LikeOutlined, DeleteOutlined, LikeFilled } from '@ant-design/icons'
import styles from '../css/ColumnMessage.module.scss'
interface IColumnCenterProps {
  detailId: number
}

/**研选专栏 */
const ColumnContentMessage: React.FC<IColumnCenterProps> = props => {
  const { detailId } = props
  const pageSize = 100000
  const currentIndex = 1
  const [inputShow, setInputShow] = useState<boolean>(false) // 是否显示留言输入框
  const [massageList, setMassageList] = useState<IMessageDetail[]>([]) // 是否显示留言输入框
  const [massageNum, setMassageNum] = useState<number>(0) // 是否显示留言输入框
  const [messageContent, setMessageContent] = useState<string>('') // 是否显示留言输入框

  const handleChangeMessage = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setMessageContent(e.target.value)
  }
  const submitHandler = () => {
    if (messageContent) {
      applyCheckColumnNote(detailId, messageContent)
    } else {
      message.error('留言不能为空!')
    }
  }
  //   添加留言
  const { run: applyCheckColumnNote } = useRequest(ColumnService.postMessageAdd, {
    manual: true,
    onSuccess: res => {
      res.data.Success ? message.success(res.data.Msg) : message.error(res.data.Msg || res.data.ErrMsg)
      setInputShow(false)
      setMessageContent('')
      getColumnSpecialList(pageSize, currentIndex, detailId)
    }
  })

  //   获取留言数据
  const { run: getColumnSpecialList } = useRequest(ColumnService.getColumnSpecialList, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setMassageList(res.List)
      setMassageNum(res.PublicMessageTotal)
    }
  })
  // 删除留言的按钮
  const deleceMessageHandler = (item: IMessageDetail) => {
    Modal.confirm({
      title: '提醒',
      content: '确定要删除此回复内容吗？',
      okText: '确定',
      cancelText: '取消',
      centered: true,
      closable: true,
      onOk: () => {
        postMessageDelete(item.MessageId)
      }
    })
  }

  //  删除留言的接口
  const { run: postMessageDelete } = useRequest(ColumnService.postMessageDelete, {
    manual: true,
    onSuccess: res => {
      res.data.Success ? message.success(res.data.Msg) : message.error(res.data.Msg || res.data.ErrMsg)
      getColumnSpecialList(pageSize, currentIndex, detailId)
    }
  })

  // 留言的点赞
  const likeMessageHandler = (item: IMessageDetail | IMsgChildrenList) => {
    postMessageLike(item.MessageId, item.IsLikeCount ? 0 : 1)
  }

  //  点赞留言的接口
  const { run: postMessageLike } = useRequest(ColumnService.postMessageLike, {
    manual: true,
    onSuccess: res => {
      res.data.Success ? message.success(res.data.Msg) : message.error(res.data.Msg || res.data.ErrMsg)
      getColumnSpecialList(pageSize, currentIndex, detailId)
    }
  })

  useEffect(() => {
    if (detailId) {
      getColumnSpecialList(pageSize, currentIndex, detailId)
    }
  }, [detailId])

  return (
    <div>
      {!inputShow ? (
        <div
          className={styles['columndetail-messge-select-ipt']}
          onClick={() => {
            setInputShow(true)
          }}
        >
          请写下您的留言
        </div>
      ) : (
        <div style={{ marginTop: 20, marginBottom: 20 }}>
          <Input.TextArea
            placeholder="留言会私信给作者，作者设置留言公开后将在文章下展示"
            autoSize={{ minRows: 3, maxRows: 3 }}
            required
            value={messageContent}
            onChange={handleChangeMessage}
            autoFocus
          />
          <div className={styles['columndetail-messge-ipt-btn']}>
            <span
              onClick={() => {
                setInputShow(false)
              }}
            >
              取消
            </span>
            <span onClick={submitHandler}>提交</span>
          </div>
        </div>
      )}
      <div className={styles['disclosure-num-msg']}>{massageNum}条公开留言</div>
      {massageList.length > 0 &&
        massageList.map(item => (
          <div
            key={item.MessageId}
            className={`${styles[`columndetail-message-list`]} ${styles[item.Status === 0 ? 'no-disclosure' : '']}`}
          >
            <div className={styles['item-img-btn']}>
              <div>
                <img src={item.Headimgurl} />
                <span style={{ color: '#999999' }}>{item.CreateTime}</span>
              </div>
              <div>
                {item.Status === 0 ? (
                  <div className={styles['delete-box']}>
                    <p>未公开之前仅自己可见</p>
                    <DeleteOutlined className={styles['delete-icon']} onClick={() => deleceMessageHandler(item)} />
                  </div>
                ) : (
                  <>
                    <div>
                      {item.IsLikeCount ? (
                        <LikeFilled className={styles['collect-icon']} onClick={() => likeMessageHandler(item)} />
                      ) : (
                        <LikeOutlined className={styles['collect-icon']} onClick={() => likeMessageHandler(item)} />
                      )}
                      <span>{item.LikeCount}</span>
                    </div>
                  </>
                )}
              </div>
            </div>
            <div className={styles['columndetail-messge-content']}>{item.Content}</div>
            {item.ChildList.length > 0 &&
              item.ChildList.map(child => (
                <div key={child.MessageId} className={styles['columndetail-messge-child-list']}>
                  <div className={styles['child-item-img-btn']}>
                    <div>
                      <img src={child.Headimgurl} />
                      <span style={{ color: '#999999' }}>{child.CreateTime}</span>
                    </div>
                    <>
                      <div>
                        {child.IsLikeCount ? (
                          <LikeFilled className={styles['collect-icon']} onClick={() => likeMessageHandler(child)} />
                        ) : (
                          <LikeOutlined className={styles['collect-icon']} onClick={() => likeMessageHandler(child)} />
                        )}
                        <span>{child.LikeCount}</span>
                      </div>
                    </>
                  </div>
                  <div className={styles['columndetail-messge-content']}>{child.Content}</div>
                </div>
              ))}
          </div>
        ))}
    </div>
  )
}

export default ColumnContentMessage