import React, { useState } from 'react'
import { useHistory } from 'react-router-dom'
import useRequest from '@ahooksjs/use-request/es'

import { Button, Modal } from 'antd'

import { IMeetingreviewchaptItem, NewestService } from 'Newest/Newest.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from '../css/ItemComponent.module.scss'
export interface IMeetingCard {
  item: IMeetingreviewchaptItem
  title?: string // 标红的标题
}
/**晨会精华卡片组件 */
const MeetingCard: React.FC<IMeetingCard> = props => {
  const { item, title } = props
  const [visibleMore, setVisibleMore] = useState(false)
  const history = useHistory()
  const login2p = useLogin2p()

  const { run: applyClickRecord } = useRequest(NewestService.postMorningMeetingRecord, {
    manual: true
  })

  const handleClickMeeting = () => {
    setVisibleMore(true)
    applyClickRecord(item.Id, '首页')
  }
  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation()
    setVisibleMore(false)
  }
  const handleToOther = (item: IMeetingreviewchaptItem, type: 'meeting' | 'indepth') => {
    type === 'indepth' &&
      history.push(
        `/indepth/info/${item.ChartPermissionId}/${item.IndustryId}${
          login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''
        }`
      )
    type === 'meeting' && history.push(`/meeting${login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''}`)
  }
  const modalTitle = <div className="com-fz18 com-fw-bold g-ta-ct">【{item.IndustryName}】晨会精华</div>
  const modalFooter = (
    <div className="g-ta-ct m-t-md">
      <Button type="primary" onClick={handleToOther.bind(this, item, 'meeting')} ghost className=" m-r-lg">
        查看往期汇总
      </Button>
      <Button type="primary" onClick={handleToOther.bind(this, item, 'indepth')}>
        查看资源包
      </Button>
    </div>
  )
  const handleToLinkPage = (item: IMeetingreviewchaptItem) => {
    item.ReportLink && window.open(item.ReportLink)
  }
  if (!item) return null
  return (
    <div className={styles['item-article']} onClick={handleClickMeeting}>
      <div className="item-article-title">
        <div
          className="item-article-title-content"
          dangerouslySetInnerHTML={{
            __html: title || `【${item.IndustryName}】晨会精华`
          }}
        />
      </div>
      <div className={`item-article-annotation line-seven`}>
        <div dangerouslySetInnerHTML={{ __html: item.Content }} />
      </div>
      <div className="item-time-right">
        <div className="item-article-publistdate">{item.PublishTime}</div>
      </div>
      <Modal
        centered
        maskClosable={true}
        title={modalTitle}
        open={visibleMore}
        onCancel={handleCancel}
        footer={modalFooter}
      >
        <div className={styles['modal-article-body']}>
          <div className="blue-link">
            {item.Title && (
              <span className="m-r-sm" onClick={handleToLinkPage.bind(this, item)}>
                {item.Title}
              </span>
            )}
            {item?.ListSubject?.map(itemSubject => (
              <span className="m-r-sm not-link" key={itemSubject.IndustrialSubjectId}>
                #{itemSubject.SubjectName}
              </span>
            ))}
          </div>
          <div dangerouslySetInnerHTML={{ __html: item.Content }} />
        </div>
      </Modal>
    </div>
  )
}

export default MeetingCard
