import React from 'react'
import { Link } from 'react-router-dom'

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

import { IGetListBySearchItem } from 'Material/Material.service'
import styles from '../css/ItemComponent.module.scss'
export interface ISearchArticleCard {
  item: IGetListBySearchItem
}
/**搜索时的报告卡片组件 */
const SearchArticleCard: React.FC<ISearchArticleCard> = props => {
  const { item } = props
  const handleToDetail = () => {
    window.open(`/material/info/${item.ArticleId}`)
  }
  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
              ? `<span class="mfyx-label-normal mfyx-label-article no-wrap">买方研选</span><span>${item?.Title}</span>`
              : item.Title
          }}
        />
      </div>
      <div className="item-article-annotation line-seven">
        <div dangerouslySetInnerHTML={{ __html: item.Body.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>
    </div>
  )
}

export default SearchArticleCard
