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

import { Breadcrumb, Spin } from 'antd'

import { MaterialService } from './Material.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from './css/Quotation.module.scss'

/**产品介绍 */
const ProductIntroduction: React.FC = () => {
  const login2p = useLogin2p()

  // 拉取数据
  const { data, loading } = useRequest(MaterialService.getResearchIntroduce, {
    formatResult: response => response.data.Data
  })

  return (
    <Spin spinning={loading}>
      <div className={styles['quotation-container']}>
        <div className={styles['quotation-breadcrumb']}>
          <Breadcrumb
            style={{ margin: '12px 0' }}
            items={[
              { title: <Link to={`/${login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''}`}>首页</Link> },
              {
                title: '买方研选'
              },
              {
                title: '产品介绍'
              }
            ]}
          />
        </div>
        <div className={styles['quotation-content']}>
          {data?.List?.map((item, index) => (
            <img
              src={item.Img}
              alt="ppt"
              key={index}
              className={styles['quotation-img']}
              style={{ maxHeight: item.Height }}
            />
          ))}
        </div>
      </div>
    </Spin>
  )
}

export default ProductIntroduction
