import React, { useEffect, useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'
import { useHistory } from 'react-router-dom'

import { Col, Row, Spin } from 'antd'

import ValidateLogin2p from 'components/ValidateLogin2p'
import ValidateEmpty from 'components/ValidateEmpty'
import NoPermission, { INewPermissionType, ITryType } from 'Material/components/NoPermission'
import { CollectionsService, IMorningMeetingDetailRes, IMorningMeetingList } from './Collections.service'
import { IMeetingreviewchaptItem } from 'Newest/Newest.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from './css/ResearchSummary.module.scss'

enum IMenuKey {
  ThisWeek = 2,
  LastWeek = 3
}

type IMeetCreamProps = {
  meetID?: number // 会议ID
}

/**晨会精华 */
const MeetCream: React.FC<IMeetCreamProps> = props => {
  const { meetID } = props
  const history = useHistory()
  const login2p = useLogin2p()

  const [meetKey, setMeetKey] = useState<IMenuKey>(IMenuKey.ThisWeek)
  const [dataDetail, setDataDetail] = useState<IMorningMeetingDetailRes>()

  useEffect(() => {
    meetID && setMeetKey(meetID)
    getMeetingList(1, 9999)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [meetID])

  // 拉取列表
  const {
    data,
    loading: listLoading,
    run: getMeetingList
  } = useRequest(CollectionsService.getMorningMeetingList, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setMeetKey(meetID || res?.List[0].Id)
      getMeetingDetail(meetID || res?.List[0].Id)
    }
  })
  // 拉取详情
  const { loading: detailLoading, run: getMeetingDetail } = useRequest(CollectionsService.getMorningMeetingDetail, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setDataDetail(res)
    }
  })

  // 会议选择
  const handleClickArticle = (item: IMorningMeetingList) => {
    history.push(`/meeting/${item.Id}${login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''}`)
  }
  const handleToIndepth = (item: IMeetingreviewchaptItem) => {
    const url = `${window.location.origin}/indepth/info/${item.ChartPermissionId}/${item.IndustryId}`
    window.open(url)
  }
  const handleToLinkPage = (item: IMeetingreviewchaptItem) => {
    item.ReportLink && window.open(item.ReportLink)
  }
  return (
    <div className={styles['researchsummary-page']}>
      <div className="page-max-width">
        <Row wrap={false} className="m-t-md">
          <Col className={styles['researchsummary-left']}>
            <div className={styles['researchsummary-list']}>
              {data?.List?.map((item: IMorningMeetingList, index: number) => (
                <div className={styles['smfllow-wrapper']} key={item.Id}>
                  <div
                    className={`meeting-title-line hover-line ${item.Id === meetKey ? 'active-line' : ''}`}
                    onClick={handleClickArticle.bind(this, item)}
                  >
                    <span className="title">{item.Title}</span>
                    <div className="industry-text">{item.IndustryName}</div>
                  </div>
                </div>
              ))}
            </div>
          </Col>
          <Col flex={1}>
            <div className="researchsummary-content-wrapper">
              <ValidateLogin2p>
                <Spin spinning={detailLoading}>
                  <div className={styles['researchsummary-wrapper']}>
                    <ValidateEmpty loading={listLoading || detailLoading} data={dataDetail}>
                      {(dataDetail?.HasPermission && dataDetail?.HasPermission !== INewPermissionType.OK) ||
                      dataDetail?.HasPermission === 0 ? (
                        <NoPermission
                          title={'您暂无权限查看此文章内容，若想查看可以申请开通哦'}
                          hasPermission={dataDetail?.HasPermission}
                          detailID={dataDetail?.Detail?.Id || data?.List[0].Id || (meetID as number)}
                          tryType={ITryType.Meetingreviewchapt}
                        />
                      ) : (
                        <div className="researchsummary-content">
                          <h1 className="researchsummary-title m-b-md">{dataDetail?.Detail.Title}</h1>
                          <div className="g-flex g-flex-between m-b-md">
                            <span>{dataDetail?.Detail.Department}</span>
                            <span className="gray-text">{dataDetail?.Detail.PublishTime}</span>
                          </div>
                          <div className="dashed-line" />
                          {dataDetail?.Detail?.List?.map(item => (
                            <>
                              <div className="meeting-industry-title">【{item.IndustryName}产业】</div>
                              <div className="blue-link">
                                {item.Title && (
                                  <span className="m-r-sm" onClick={handleToLinkPage.bind(this, item)}>
                                    {item.Title}
                                  </span>
                                )}
                                {item?.ListSubject?.map(itemSubject => (
                                  <span className="m-r-sm not-link" key={itemSubject.IndustrialSubjectId}>
                                    #{itemSubject.SubjectName}
                                  </span>
                                ))}
                              </div>
                              <div
                                className="researchsummary-p"
                                dangerouslySetInnerHTML={{ __html: item.Content || '' }}
                              />
                              <div className="researchsummary-right-content">
                                <span className="blue-link com-cursor-p" onClick={handleToIndepth.bind(this, item)}>
                                  查看资源包
                                </span>
                              </div>
                            </>
                          ))}
                        </div>
                      )}
                    </ValidateEmpty>
                  </div>
                </Spin>
              </ValidateLogin2p>
            </div>
          </Col>
        </Row>
      </div>
    </div>
  )
}

export default MeetCream
