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 } from 'Column/Column.service'

import { LikeOutlined, DeleteOutlined } 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 [messageContent, setMessageContent] = useState<string>('') // 是否显示留言输入框

  const handleChangeMessage = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setMessageContent(e.target.value)
  }
  const submitHandler = () => {
    applyCheckColumnNote(detailId, messageContent)
  }
  //   添加留言
  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)
    }
  })

  //   获取留言数据
  const { run: getColumnSpecialList } = useRequest(ColumnService.getColumnSpecialList, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setMassageList(res.List)
    }
  })
  // deleceMessageHandler
  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)
    }
  })
  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 }}>
          <Input.TextArea
            placeholder="留言会私信给作者，作者设置留言公开后将在文章下展示"
            autoSize={{ minRows: 3, maxRows: 3 }}
            required
            value={messageContent}
            onChange={handleChangeMessage}
          />
          <div className={styles['columndetail-messge-ipt-btn']}>
            <span
              onClick={() => {
                setInputShow(false)
              }}
            >
              取消
            </span>
            <span onClick={submitHandler}>提交</span>
          </div>
        </div>
      )}
      {massageList.length > 0 &&
        massageList.map(item => (
          <div key={item.MessageId} className={styles['columndetail-message-list']}>
            <div className={styles['item-img-btn']}>
              <div>
                <img src={item.Headimgurl} />
                <span>{item.CreateTime}</span>
              </div>
              <div>
                {item.Status === 0 ? (
                  <DeleteOutlined className={styles['delete-icon']} onClick={() => deleceMessageHandler(item)} />
                ) : (
                  <>
                    <LikeOutlined className={styles['collect-icon']} />
                    <span>{item.LikeCount}</span>
                  </>
                )}
              </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['item-img-btn']}>
                    <div>
                      <img src={child.Headimgurl} />
                      <span>{child.CreateTime}</span>
                    </div>
                  </div>
                  <div className={styles['columndetail-messge-content']}>{child.Content}</div>
                </div>
              ))}
          </div>
        ))}
    </div>
  )
}

export default ColumnContentMessage