import React from 'react';
import { IGetInitialProps } from 'umi';
// import Footer from '../../Home/footer';

import '../less/homeStyle.less';
// import Nav from '@/pages/homeX/Nav';
// import styles from './index.less';
import { Breadcrumb } from 'antd';
import { articleDetail } from '@/services/cms';

const CaseDetail: React.FC = (props) => {
  const { data: info } = props;

  const getTitle = () => {
    if (info?.type == 1) {
      return '经典案例';
    } else if (info?.type == 2) {
      return '行业咨询';
    } else if (info?.type == 3) {
      return '服务产品';
    } else {
      return '文章列表';
    }
  };

  return (
    <>
      <style>{`
     .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: white;

        .content {
          margin-top: 30px;
          width: 1160px;
          text-align: left;
          font-weight: 600;

          .breadcrumbItem {
            color: #1773c8;
          }

          .title {
            font-size: 20px;
            color: #333;
            margin-top: 30px;
          }

          .author {
            font-size: 14px;
            color: #999;
            margin-top: 12px;
          }

          .line {
            height: 1px;
            width: 100%;
            background-color: #EEE;
            margin-top: 12px;
            margin-bottom: 24px;
          }

          .digest {
            background: #F0F0F0;
            padding: 16px;
            border-radius: 8px;
            margin-top: 12px;
            color: #888;
            line-height: 24px;
          }

          .articleContent {
            color: #666;

            img {
              display: block;
              max-width: 60%;
              margin: 0 auto;
            }
          }
        }
      }

      @media screen and (max-width: 767px) {
        .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: white;

          .content {
            margin-top: 100px;
            width: 90%;

            .articleContent {
              img {
                width: 100%;
                max-width: 100%;
              }
            }
          }
        }
      } `}</style>
      <div className="container">
        {/* <Nav title={getTitle()} /> */}
        <div className="content">
          {/* <Breadcrumb>
            <Breadcrumb.Item>
              <a href="/home">首页</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="/caseList">{getTitle()}</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <span className="breadcrumbItem">{info?.title}</span>
            </Breadcrumb.Item>
          </Breadcrumb> */}
          <div className="title">{info?.title}</div>
          <div className="author">
            {info?.author} {info?.createTime}
          </div>
          <div className="line"></div>
          <div
            className="articleContent"
            dangerouslySetInnerHTML={{ __html: info?.content }}
          ></div>
        </div>
        {/* <Footer /> */}
      </div>
    </>
  );
};

CaseDetail.getInitialProps = (async (ctx) => {
  const { id } = ctx.match.params;
  const articleId = parseInt(id.replace('.html', ''), 10);
  if (isNaN(articleId)) {
    return { data: null }; // 或者返回一个错误页面
  }
  try {
    const data = await articleDetail(articleId);
    return data;
  } catch (error) {
    console.error('Failed to fetch article detail:', error);
    return {};
  }
}) as IGetInitialProps;

export default CaseDetail;
