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

import { Breadcrumb, Spin } from 'antd'

import ValidateLogin2p from 'components/ValidateLogin2p'
import ValidateEmpty from 'components/ValidateEmpty'
import NoPermission, { INewPermissionType, ITryType } from 'Material/components/NoPermission'
import { WebEditError } from 'components/Empty'
import { PersonalService } from './Personal.service'
import { setWxShare } from 'utils/wxConfig'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from './css/ProductInterior.module.scss'

type IProductInteriorProps = {
  ProductInteriorId: number // 产品内测ID
}

/**
 * 产品内测
 */
const ProductInterior: React.FC<IProductInteriorProps> = props => {
  const { ProductInteriorId } = props
  const login2p = useLogin2p()

  useEffect(() => {
    ProductInteriorId && getDetail(ProductInteriorId)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ProductInteriorId])

  // 拉取本周详情
  const {
    data,
    loading,
    run: getDetail
  } = useRequest(PersonalService.getProductInteriorDetail, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      res?.Detail && setWxShare(res?.Detail.Title, res.Detail.Abstract, res?.Detail.ShareImg)
    }
  })
  const renderBody = (body: string) => {
    // 类型：1普通文本，2：文章、3：活动、4：产业
    // if (item.Type !== 1)
    //   return (
    //     <a href={item.Body} target="_blank" rel="noreferrer">
    //       {item.Body}
    //     </a>
    //   )
    // return <div className="productinterior-p" dangerouslySetInnerHTML={{ __html: item.Body || '' }} />
    const targetReg = /<a\b/g
    return body.replace(targetReg, `<a target="_blank"`)
  }

  return (
    <div className="page-max-width">
      <ValidateLogin2p>
        <Spin spinning={loading}>
          <ValidateEmpty loading={loading} data={data}>
            {data?.HasPermission && data?.HasPermission !== INewPermissionType.OK ? (
              <NoPermission
                title={'您暂无权限查看此文章内容，若想查看可以申请开通哦'}
                hasPermission={data?.HasPermission}
                detailID={data?.Detail?.ProductInteriorId || (ProductInteriorId as number)}
                tryType={ITryType.ProductInterior}
              />
            ) : (
              <>
                {data?.HasPermission && data?.HasPermission === INewPermissionType.OK && !data?.IsShow ? (
                  <WebEditError />
                ) : (
                  <div className={styles['productinterior-page']}>
                    <Breadcrumb>
                      <Breadcrumb.Item>
                        <Link
                          to={`/${login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''}`}
                          className="com-fz16"
                        >
                          首页
                        </Link>
                      </Breadcrumb.Item>
                      <Breadcrumb.Item className="com-fz16">{data?.Detail?.ColumnName}</Breadcrumb.Item>
                    </Breadcrumb>
                    <h1 className="productinterior-title">{data?.Detail?.Title}</h1>
                    <div className="g-flex g-flex-between m-b-md com-fz16">
                      <span>{data?.Detail.Department}</span>
                      <span className="gray-text">{data?.Detail.PublishTime}</span>
                    </div>

                    {data?.Detail?.Abstract && <div className="left-block">摘要：{data?.Detail?.Abstract}</div>}
                    <div
                      className="productinterior-p"
                      dangerouslySetInnerHTML={{ __html: renderBody(data?.Detail?.Body || '') }}
                    />
                    {/* {data?.Detail?.BodySlice?.map((item, index) => (
                      <React.Fragment key={index}>{renderBody(item)}</React.Fragment>
                    ))} */}
                  </div>
                )}
                <div className={`${styles['statement-wrapper']}`}>
                  <strong>免责声明：</strong>
                  <p>
                    本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会因接收人/接收机构收到本报告而将其视为客户。本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。在任何情况下，本公司不对客户/接收人/接收机构因使用报告中内容所引致的一切损失负责任，客户/接收人/接收机构需自行承担全部风险。
                  </p>
                </div>
              </>
            )}
          </ValidateEmpty>
        </Spin>
      </ValidateLogin2p>
    </div>
  )
}

export default ProductInterior
