import React from 'react'
import dayjs from 'dayjs'

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

import { IYanxuanSpecialItem } from 'Newest/Newest.service'
import styles from '../css/ItemComponent.module.scss'
export interface IYanxuanSpecialCardProps {
  item: IYanxuanSpecialItem
  title?: string // 标红的标题
}
/**专栏笔记/观点组件 */
const YanxuanSpecialCard: React.FC<IYanxuanSpecialCardProps> = props => {
  const { item, title } = props
  const handleToDetail = () => {
    window.open(`/column/detail/${item.Id}`)
  }
  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: `<img src=${
              item.LabelKeywordImgLink || 'https://hzstatic.hzinsights.com/cygx_web/config/zhuanlan.png'
            } alt="标签" class="mfyx-label-img" /><span>【${item.Type === 1 ? '笔记' : '观点'}】${
              title || item?.Title
            }</span>`
          }}
        />
      </div>
      {item?.BodyHighlight?.length > 0 ? (
        <>
          <div className="item-article-annotation line-seven">
            <div
              dangerouslySetInnerHTML={{
                __html: item?.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">{dayjs(item.PublishTime || '').format('YYYY-MM-DD')}</div>
          </div>
        </>
      ) : (
        <>
          <div className={`item-article-annotation line-seven`}>
            <div dangerouslySetInnerHTML={{ __html: item.Annotation }} />
          </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">{dayjs(item.PublishTime || '').format('YYYY-MM-DD')}</div>
          </div>
        </>
      )}
    </div>
  )
}

export default YanxuanSpecialCard
