import React from 'react';
import Footer from '../../Home/footer';

import '../less/homeStyle.less';
// @ts-ignore
import {enquireScreen} from 'enquire-js';
import Nav from "@/pages/homeX/Nav";
import styles from './index.less';
import {getPageQuery} from "@/utils/utils";
import {Breadcrumb} from "antd";
import {useRequest} from "@@/plugin-request/request";
import {consultantDetail, consultantList} from "@/services/cms";


const PartnerDetail: React.FC = () => {
  const partnerId = getPageQuery().id;

  if (!partnerId) {
    return <>访问异常</>
  }

  const {data: info} = useRequest(() => {
    return consultantDetail(parseInt(partnerId as string));
  });

  const {data: list} = useRequest(() => {
    return consultantList(1, 100);
  });

  if (!info) {
    return null;
  }

  return (
    <>
      <div className={styles.container}>
        <Nav title={"顾问介绍"}/>
        <div className={styles.content}>
          <Breadcrumb>
            <Breadcrumb.Item><a href="/home">首页</a></Breadcrumb.Item>
            <Breadcrumb.Item>
              高潜顾问
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <span className={styles.breadcrumbItem}> {info?.cnName}</span>
            </Breadcrumb.Item>
          </Breadcrumb>

          <div className={styles.info}>
            <div className={styles.left}>
              <div className={styles.imgWrapper}>
                <img src={info?.photo} className={styles.partnerPhoto}/>
                <div className={styles.box}></div>
              </div>
            </div>
            <div className={styles.right}>
              <div className={styles.name}>
                <div className={styles.cnName}>{info?.cnName}</div>
                | <div
                className={styles.enName}> {info?.enName}</div></div>
              <div className={styles.title}>{info?.title}</div>
              <div className={styles.desc}
                   dangerouslySetInnerHTML={{__html: info?.desc}}></div>
            </div>
          </div>
          <div className={styles.partnerList}>
            {list?.records?.map((item, index) => {
              if (item.id == partnerId) {
                return null;
              } else {
                return <a href={`/partner?id=${item.id}`}>
                  <div className={styles.item} onClick={() => {
                  }}>
                    <div className={styles.cnName}>{item.cnName}</div>
                    | <div className={styles.enName}>{item.enName}</div>
                  </div>
                </a>
              }
            })}
          </div>
        </div>
        <Footer/>
      </div>
    </>
  );
};
export default PartnerDetail;
