import React from 'react'

import { message, Popover } from 'antd'
import { IIndustrialSubjectList, IIndustyListItem } from 'Indepth/Indepth.service'
import CategoryTag from './CategoryTag'
import classNames from 'classnames'
import Img from 'assets/video-icon.svg'
import HotImg from 'assets/hot.png'
import styles from '../css/IndustryCard.module.scss'

interface IIndustryCardProps {
  industryItem: IIndustyListItem
  border?: boolean
  width?: string
  rankIndex?: number
  showType?: boolean
  onFllow: (ID: number) => void
  onShowMore: (ID: number, ChartPermissionId: number) => void
}

/**细分产业卡片 */
const IndustryCard: React.FC<IIndustryCardProps> = props => {
  const { industryItem, border = false, width, rankIndex, showType = false, onFllow, onShowMore } = props
  const handleInsertDiv = (list: IIndustrialSubjectList[]) => {
    const len = 3 - (list.length % 3)
    if (len === 2) {
      return (
        <>
          <div className="company-name g-hidden" />
          <div className="company-name g-hidden" />
        </>
      )
    }
    if (len === 1) {
      return <div className="company-name g-hidden" />
    }
    if (list.length === 3 && industryItem?.IndustryVideo) {
      return <div className="company-name g-hidden" />
    }
    return
  }
  const content = (
    <div className={styles['i-company-box']}>
      {industryItem.IndustrialSubjectList?.map(item => (
        <div className="company-name" key={item.IndustrialSubjectId}>
          {item.SubjectName}
        </div>
      ))}
      {handleInsertDiv(industryItem.IndustrialSubjectList || [])}
    </div>
  )
  const handleToFllow = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.stopPropagation()
    onFllow(industryItem.IndustrialManagementId)
  }
  const handleClick = () => {
    onShowMore(industryItem.IndustrialManagementId, industryItem.ChartPermissionId)
  }
  const handleVideoClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.stopPropagation()
    if (industryItem?.AuthInfo.HasPermission !== 1) {
      message.error('暂无权限查看')
      return
    }
    const url = `${window.location.origin}/indepth/video/${industryItem.ChartPermissionId}/${industryItem.IndustrialManagementId}/${industryItem?.IndustryVideo?.Id}`
    window.open(url)
  }

  const iRankClass = classNames(
    'i-rank',
    styles['mt-xs'],
    { 'i-rank-first': rankIndex === 1 },
    { 'i-rank-sec': rankIndex === 2 },
    { 'i-rank-thr': rankIndex === 3 }
  )

  return (
    <div
      className={`${styles['industry-card-wrapper']} ${border ? styles['hasborder'] : ''}`}
      style={{ width: width }}
      onClick={handleClick}
    >
      <div className="i-top-wrapper">
        {rankIndex && <span className={iRankClass}>{rankIndex}</span>}
        <div className="i-title-content">
          <div className="i-title-line">
            <div className="g-flex-c1 g-flex">
              <span className="i-title">{industryItem.IndustryName}</span>
              {!rankIndex && industryItem.IsHot && <img src={HotImg} alt="HOT" className="i-hot" />}
              {industryItem.IsNew && <span className="i-new">NEW</span>}
            </div>
            <div className={`i-unfocus ${industryItem.IsFollow && 'i-focus'}`} onClick={handleToFllow}>
              {industryItem.IsFollow ? '已' : '+'}关注
            </div>
          </div>
          <div className="update-time-line">
            <div className="time-point">
              {(industryItem.UpdateTime || industryItem.PublishDate) && (
                <span className="update-time">{industryItem.UpdateTime || industryItem.PublishDate}更新</span>
              )}
              {industryItem.IsRed && <span className="red-point m-l-sm" />}
            </div>
            <div>{showType && <CategoryTag content={industryItem.ChartPermissionName} />}</div>
          </div>
        </div>
      </div>
      <div className={`g-flex g-flex-v-center ${styles['video-and-company']}`}>
        {industryItem?.IndustryVideo && (
          <div className={styles['video-img-wrapper']} onClick={handleVideoClick}>
            <div className="bg-text">
              5min
              <br />
              逻辑解析
            </div>
            <div className="video-triangle" />
            <img src={Img} alt="video" className="video-logo" />
            <img src={industryItem?.IndustryVideo?.BackgroundImg} alt="视频" className="video-img" />
          </div>
        )}
        {(
          industryItem?.IndustryVideo
            ? industryItem.IndustrialSubjectList?.length > 4
            : industryItem.IndustrialSubjectList?.length > 6
        ) ? (
          <Popover content={content}>
            <div className={`${styles['i-company-box']} six-company`}>
              {industryItem.IndustrialSubjectList?.map(item => (
                <div className="company-name" key={item.IndustrialSubjectId}>
                  {item.SubjectName}
                </div>
              ))}
              {handleInsertDiv(industryItem.IndustrialSubjectList || [])}
            </div>
          </Popover>
        ) : (
          <div className={`${styles['i-company-box']} six-company`}>
            {industryItem.IndustrialSubjectList?.map(item => (
              <div className="company-name" key={item.IndustrialSubjectId}>
                {item.SubjectName}
              </div>
            ))}
            {handleInsertDiv(industryItem.IndustrialSubjectList || [])}
          </div>
        )}
      </div>
    </div>
  )
}

export default IndustryCard
