import React from 'react'

import { EyeOutlined } from '@ant-design/icons'

import { INewestItem } from 'Newest/Newest.service'
import { IBillBoardItem } from 'Indepth/Indepth.service'
import styles from '../css/ItemComponent.module.scss'
export interface IArticleCard {
  item: IBillBoardItem | INewestItem
  title?: string
}
/**最新模块的报告卡片组件 */
const ArticleCard: React.FC<IArticleCard> = props => {
  const { item, title } = props

  // 二次转换（给了&lt;p&gt;这样的格式）
  const formatAbstractHtml = (str: string): string => {
    const cDiv = document.createElement('div')
    cDiv.innerHTML = str
    return cDiv.childNodes.length ? cDiv.childNodes[0].nodeValue || '' : ''
  }
  const formatLabel = (str: string): string => {
    return str ? `<img src=${item.LabelKeywordImgLink} alt="标签" class="mfyx-label-img" />` : ''
  }
  const handleToDetail = () => {
    window.open(`/material/info/${(item as IBillBoardItem)?.ArticleId || (item as INewestItem).SourceId}`)
  }

  if (!item) return null
  return (
    <div className={styles['item-article']} onClick={handleToDetail}>
      <div className="item-article-title">
        <div
          className="item-article-title-content"
          dangerouslySetInnerHTML={{
            __html: item?.IsResearch
              ? `${formatLabel(item.LabelKeywordImgLink)}<span>${title || item?.Title}</span>`
              : title || item?.Title
          }}
        />
      </div>
      {(item as IBillBoardItem)?.BodyHighlight?.length > 0 ? (
        <>
          <div className="item-article-annotation line-eight">
            <div
              dangerouslySetInnerHTML={{
                __html: (item as IBillBoardItem)?.BodyHighlight.join('')
              }}
            />
          </div>
          <div className="item-time-right item-article-flex">
            <div className="item-article-pv">
              <EyeOutlined size={14} className="pv-icon" />
              <span>{item.Pv || 0}</span>
            </div>
            <div className="item-article-publistdate">{item?.PublishDate}</div>
          </div>
        </>
      ) : (
        <>
          {(item as IBillBoardItem)?.Cover ? (
            <div
              className={`item-article-img-wrapper ${item?.Abstract?.length > 20 ? 'max-two-line' : 'max-one-line'}`}
            >
              <img src={(item as IBillBoardItem)?.Cover} alt="图像" className="item-article-cover" />
            </div>
          ) : (
            <>
              {item?.Annotation ? (
                <div className={`item-article-annotation ${item?.Abstract?.length > 20 ? 'line-five' : 'line-six'}`}>
                  <div>核心观点：</div>
                  <div dangerouslySetInnerHTML={{ __html: item?.Annotation }} />
                </div>
              ) : (
                <div
                  className={`item-article-img-wrapper ${
                    item?.Abstract?.length > 20 ? 'max-two-line' : 'max-one-line'
                  }`}
                >
                  <img src={item?.BodyImg} alt="图像" className="item-article-cover" />
                </div>
              )}
            </>
          )}
          {item?.Abstract && (
            <div
              className="item-article-abstract"
              dangerouslySetInnerHTML={{
                __html: '<span>摘要：</span>' + formatAbstractHtml(item?.Abstract)
              }}
            />
          )}
          <div className="item-article-flex">
            <div className="item-article-pv">
              <EyeOutlined size={14} className="pv-icon" />
              <span>{item.Pv || 0}</span>
            </div>
            <div className="item-article-publistdate">{item?.PublishDate}</div>
          </div>
        </>
      )}
    </div>
  )
}

export default ArticleCard
