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

import { Result, message } from 'antd'
import PowerImg from 'assets/power.png'
// import Introduce from 'assets/introduce.svg'
// import Quotation from 'assets/quotation.svg'

import { useMedia } from 'Context/Media/MediaContext'
import ApplyPermission from './ApplyPermission'
import NButton from 'components/NButton/NButton'
import { MaterialService } from 'Material/Material.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from '../css/NoPermission.module.scss'

export enum INewPermissionType {
  OK = 1, // 1:有权限
  HasApplyQY = 2, // 2：有权益销售有申请过
  NoApplyQY = 3, // 3:有权益销售无申请过
  HasApplyFICC = 4, // 4：有FICC销售有申请过
  NoApplyFICC = 5, // 5：有权益销售无申请过
  HasApplyPotential = 6, // 6：潜在客户,已提交过申请
  NoApplyPotential = 7 // 7：潜在客户,未提交过申请，需上传名片
}

export enum ISpecialType {
  NormalArticle = 'NormalArticle', // 普通报告
  SpecialArticle = 'SpecialArticle', // 专项调研报告
  ResearchArticle = 'ResearchArticle', // 买方研选报告
  Activity = 'Activity', // 活动
  SpecialActivity = 'SpecialActivity', // 专项调研活动
  ResearchActivity = 'ResearchActivity', // 买方研选活动
  ResearchSpecial = 'ResearchSpecial', // 特殊的研选
  YanxuanSpecial = 'YanxuanSpecial' // 研选专栏报告
}

export enum ITryType {
  Article = 'Article', // 报告
  Activity = 'Activity', // 活动
  ActivityVideo = 'ActivityVideo', // 活动视频
  MicroAudio = 'MicroAudio', // 微路演音频
  MicroVideo = 'MicroVideo', // 微路演视频
  Researchsummary = 'Researchsummary', // 本周研究汇总
  Minutessummary = 'Minutessummary', // 上周纪要汇总
  ReportSelection = 'ReportSelection', // 报告精选
  ProductInterior = 'ProductInterior', // 产品内测
  Meetingreviewchapt = 'Meetingreviewchapt', // 晨会精华
  YanxuanSpecial = 'YanxuanSpecial' // 研选专栏报告
}
interface INoPermissionProps {
  hasPermission: number | undefined
  detailID: number
  tryType: ITryType
  seller?: { SellerMobile: string; SellerName: string }
  title?: React.ReactNode
  subTitle?: React.ReactNode
  specialType?: ISpecialType
  border?: boolean
}
/**权限显示 */
const NoPermission: React.FC<INoPermissionProps> = props => {
  const {
    hasPermission,
    detailID,
    tryType,
    seller,
    title,
    subTitle,
    specialType = ISpecialType.NormalArticle,
    border = false
  } = props
  const [visibleApply, setVisibleApply] = useState(false)
  const history = useHistory()
  const media = useMedia()
  const login2p = useLogin2p()
  const [isHideBack, setIsHideBack] = useState<boolean>(false) // 识别报告详情页+活动详情页，隐藏返回按钮

  useEffect(() => {
    handleChangeMenuKey(history.location)
    history.listen(location => {
      window.scrollTo(0, 0)
      handleChangeMenuKey(location)
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const handleChangeMenuKey = (location: any) => {
    // 识别报告详情页+活动详情页，适配移动菜单
    if (media.isSmallMax) {
      const routhStr = ['/material/info', '/activity/info', '/activity/detail', '/internal/article', '/column/detail']
      let flag = false
      routhStr.forEach(item => {
        if (location.pathname.includes(item)) {
          setIsHideBack(true)
          flag = true
        }
      })
      if (!flag) {
        setIsHideBack(false)
      }
    } else {
      setIsHideBack(false)
    }
  }

  const formatSubTitle = () => {
    if (specialType === ISpecialType.ResearchSpecial) return ''
    if (
      specialType === ISpecialType.ResearchArticle ||
      specialType === ISpecialType.ResearchActivity ||
      specialType === ISpecialType.YanxuanSpecial
    ) {
      return hasPermission === INewPermissionType.NoApplyPotential ||
        hasPermission === INewPermissionType.HasApplyPotential
        ? '您可申请开通试用'
        : '点击提交申请，提醒对口销售为你开通试用'
    }
    if (
      hasPermission === INewPermissionType.HasApplyPotential ||
      hasPermission === INewPermissionType.NoApplyPotential ||
      hasPermission === INewPermissionType.HasApplyFICC ||
      hasPermission === INewPermissionType.NoApplyFICC ||
      specialType === ISpecialType.SpecialArticle ||
      specialType === ISpecialType.SpecialActivity
    )
      return ''
    return tryType === 'Article' ? (
      <div>
        <p>若想查看可以联系对口销售</p>
        {seller?.SellerName && (
          <p>
            {seller?.SellerName}:{seller?.SellerMobile}
          </p>
        )}
        <p>申请开通对应的试用权限</p>
      </div>
    ) : (
      <div>
        <p>若想参加可以联系对口销售，申请开通对应的试用权限</p>
      </div>
    )
  }
  const resetTitle = () => {
    if (specialType === ISpecialType.ResearchSpecial) return '签约研选扣点包才可参与此活动，请联系对口销售'
    if (
      specialType === ISpecialType.ResearchArticle ||
      specialType === ISpecialType.ResearchActivity ||
      specialType === ISpecialType.YanxuanSpecial
    ) {
      return <span>暂无权限</span>
    }
    if (specialType === ISpecialType.SpecialArticle) return '需要升级行业套餐权限才可查看此报告，请联系对口销售'
    if (specialType === ISpecialType.SpecialActivity) return '需要升级行业套餐权限才可参与此活动，请联系对口销售'

    if (
      hasPermission === INewPermissionType.HasApplyPotential ||
      hasPermission === INewPermissionType.NoApplyPotential ||
      hasPermission === INewPermissionType.HasApplyFICC ||
      hasPermission === INewPermissionType.NoApplyFICC
    ) {
      return tryType === 'Activity'
        ? '您暂无权限参加此活动，若想参加可以申请开通对应的试用权限'
        : '您暂无权限查看此报告内容，若想查看可以申请开通对应的试用权限'
    }
    return tryType === 'Activity' ? '您暂无权限参加此活动~' : '您暂无权限查看此报告内容~'
  }
  const { run: postApplyTry } = useRequest(MaterialService.postApplyTry, {
    manual: true,
    onSuccess: res => {
      res.data.Ret === 200 ? message.success('提交成功，请等待销售人员与您联系') : message.info(res.data.Msg)
    }
  })
  // 提交申请权限
  const handleToApply = () => {
    // HasPermission=2,4,6，已提交过申请的，提示：您已提交过申请，请等待销售与您联系。
    if (
      hasPermission === INewPermissionType.HasApplyQY ||
      hasPermission === INewPermissionType.HasApplyFICC ||
      hasPermission === INewPermissionType.HasApplyPotential
    ) {
      message.info('您已提交过申请，请等待销售与您联系。')
      return
    }
    // HasPermission=3，5，不弹表单，直接提交申请
    if (hasPermission === INewPermissionType.NoApplyQY || hasPermission === INewPermissionType.NoApplyFICC) {
      postApplyTry({ ApplyMethod: 1, DetailId: detailID, TryType: tryType })
      return
    }
    // HasPermission=7，弹表单填写，提交申请
    setVisibleApply(true)
  }
  const handleOKApply = () => {
    setVisibleApply(false)
  }
  const handleToBack = () => {
    // if (tryType === 'Article') {
    //   history.push(`/${login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''}`)
    //   return
    // }
    // // 新打开的页面的返回
    // if (history.action === 'POP') {
    //   history.push(`/activity${login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''}`)
    //   return
    // }
    history.push(`/${login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''}`)
    // history.goBack()
  }

  return (
    <>
      <div className={`${border ? styles['gray-boder-box'] : ''} ${styles['nopower-wrapper']}`}>
        <Result
          icon={<img src={PowerImg} alt="无权限" style={{ maxWidth: '353px' }} />}
          title={title ? title : resetTitle()}
          subTitle={subTitle ? subTitle : formatSubTitle()}
          extra={
            <div className="g-flex g-flex-v g-flex-v-center">
              {specialType !== ISpecialType.SpecialArticle &&
              specialType !== ISpecialType.SpecialActivity &&
              specialType !== ISpecialType.ResearchSpecial ? (
                <NButton type="primary" onClick={handleToApply} size="big-large" className="m-b-lg">
                  {hasPermission === INewPermissionType.NoApplyPotential ? '立即申请' : '提交申请'}
                </NButton>
              ) : null}
              {isHideBack ? null : (
                <NButton size="big-large" type="white" onClick={handleToBack}>
                  返回
                </NButton>
              )}
            </div>
          }
          style={{ margin: '0 auto', padding: 0 }}
        />
      </div>
      {(specialType === ISpecialType.ResearchArticle ||
        specialType === ISpecialType.ResearchActivity ||
        specialType === ISpecialType.ResearchSpecial ||
        specialType === ISpecialType.YanxuanSpecial) && (
        <div className={`${border ? styles['gray-boder-box'] : ''} ${styles['nopower-product-wrapper']}`}>
          <div className="product-top-wrapper">
            <div className="product-top-title">产品介绍</div>
            <div className="gray-en-text">Product Introduction</div>
            <div className="gold-block" />
          </div>
          <div className="product-content-wrapper">
            <div className="content-title">独家亮点</div>
            <div className="content-p">
              <p>
                <span className="gold-text">市场低价访谈优质专家</span>
              </p>
              <p>
                重点公司小范围交流<span className="gold-text">破圈</span>参加
              </p>
              <p>
                <span className="gold-text">海量</span>调研过程及纪要共享
              </p>
            </div>
            <div className="content-title">优质资源</div>
            <div className="content-p">
              <p>
                <span className="gold-text">500+篇/年</span>调研纪要更新，
              </p>
              <p>
                <span className="gold-text">300+场/年</span>海内外重点公司小范围交流，
              </p>
              <p>
                <span className="gold-text">1000+名</span>优秀买方汇集，
              </p>
              <p>
                <span className="gold-text">30000+名</span>优质行业专家长期合作
              </p>
            </div>
            <div className="content-title">服务报价</div>
            <div className="content-p">
              <p className="content-big-p gold-text">订阅包：3万/年</p>
              <p>无限量调研纪要及常规研选专栏查阅，公开活动参与</p>
              <div className="m-t-sm" />
              <p className="content-big-p gold-text">扣点包：5万/年</p>
              <p>低至2000元/场专家、同业访谈</p>
              <p>1000元/场重点公司小范围交流</p>
            </div>
            <div className="content-p">欢迎联系买方研选，了解更多服务详情，获取试用体验。</div>
          </div>
        </div>
      )}
      <ApplyPermission visible={visibleApply} detailID={detailID} tryType={tryType} onCloseModel={handleOKApply} />
    </>
  )
}

export default NoPermission
