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

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

import { IYanxuanSpecialAuthorItem } from 'Newest/Newest.service'
import styles from '../css/ItemComponent.module.scss'
export interface IYanxuanSpecialCardProps {
  item: IYanxuanSpecialAuthorItem
  title?: string // 标红的标题
}
/**专栏笔记/观点组件 */
const YanxuanSpecialCard: React.FC<IYanxuanSpecialCardProps> = props => {
  const { item, title } = props
  const handleToDetail = () => {
    window.open(`/column/view/${item.Id}`)
  }
  if (!item) return null
  return (
    <div className={styles['item-article']} onClick={handleToDetail}>
      <div className="item-article-title-author">
        <div
          className="item-article-title-content"
          dangerouslySetInnerHTML={{
            __html: `<img src=${
              item.LabelKeywordImgLink || 'https://hzstatic.hzinsights.com/cygx_web/config/zhuanlan.png'
            } class="mfyx-label-img" />`
          }}
        />
      </div>

      <div>
        <div className={styles['head-img-specia-nick']}>
          <img src={item?.HeadImg} alt="" />
          <div className={styles['specia-nick-name']}>
            <div>{item?.SpecialName}</div>
            <div>{item?.NickName}</div>
          </div>
        </div>
        <p className={styles['author-introduce-box']}>{item?.Introduction}</p>
        <div className={styles['columnindex-count-wrapper']}>
          <div className={styles['columnindex-count-item']}>
            <div className={styles['columnindex-count']}>{item?.SpecialArticleNum || 0}</div>
            <div className={styles['columnindex-count-title']}>文章</div>
          </div>
          <div className={styles['columnindex-count-item']}>
            <div className={styles['columnindex-count']}>{item?.CollectNum || 0}</div>
            <div className={styles['columnindex-count-title']}>被收藏</div>
          </div>
          <div className={styles['columnindex-count-item']}>
            <div className={styles['columnindex-count']}>{item?.FansNum || 0}</div>
            <div className={styles['columnindex-count-title']}>粉丝</div>
          </div>
        </div>
      </div>
      <div className="item-time-right item-article-flex">
        <div className="item-article-pv"></div>
        <div className="item-article-publistdate">{dayjs(item.LatestPublishDate || '').format('YYYY-MM-DD')}</div>
      </div>
    </div>
  )
}

export default YanxuanSpecialCard
