import { RightOutlined } from "@ant-design/icons";
import { Col, Row, Space, Image } from "antd";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import errImg from "~/assets/errImg";
import Layout from "~/components/layout";
import newsApi, { Item } from "../components/news/api";
import api, { DetailsResp } from "./api";
import styles from "./index.module.scss";
import Moment from 'moment';

export default function CaseArticle() {
  const router = useRouter();
  const [data, setData] = useState<DetailsResp | null>(null);
  const [newsList, setNewList] = useState<Item[]>([]);

  //获取案例详情
  useEffect(() => {
    const id = Number(router.query.id);
    if (id) {
      api
        .details({
          id,
        })
        .then((res) => {
          setData(res.result || null);
        });
    }
  }, [router]);

  //获取新闻列表
  useEffect(() => {
    newsApi
      .listNewsPage({
        pageNo: 1,
        pageSize: 10,
      })
      .then((res) => {
        setNewList(res.result?.list || []);
      });
  }, []);

  const fontColor = (i: number) => {
    switch (i) {
      case 0:
        return {
          color: "#ff2c46",
        };
      case 1:
        return {
          color: "#FF6602",
        };

      case 2:
        return {
          color: "#FAA910",
        };

      default:
        return {
          color: "#9295A3",
        };
    }
  };

  return (
    <Layout layoutStyle={{ backgroundColor: "#fff" }}>
      <div style={{ paddingTop: 29 }}>
        <Row justify="space-between" wrap={false}>
          <Col flex="auto">
            <div className={styles.font1}>{data?.caseTitle}</div>
            <div
              className={styles.font2}
              style={{ marginTop: 18, marginBottom: 41 }}
            >
              {data?.createTime && Moment(data?.createTime).format('YYYY-MM-DD')} · {data?.caseAuthor}
            </div>
            <div
              style={{ lineHeight: 1.5 }}
              dangerouslySetInnerHTML={{ __html: data?.caseContents || "" }}
            ></div>
          </Col>
          <Col>
            <div className={styles.newsBox}>
              <Row
                className={styles.font4}
                align="middle"
                style={{ paddingTop: 16, paddingLeft: 20 }}
              >
                行业新闻
                <RightOutlined style={{ fontSize: 16, marginLeft: 9 }} />
              </Row>
              <Row gutter={10} style={{ marginTop: 8 }}>
                <Col span={24}>
                  {newsList.map((item, i) => {
                    return (
                      <Row
                        key={item.id}
                        justify="space-between"
                        align="middle"
                        style={{ cursor: "pointer" }}
                        onClick={() => {
                          router.push("/projectInfo/newsArticle/" + item.id);
                        }}
                      >
                        <Col
                          className={`${styles.font3}`}
                          style={{ margin: "6px 23px 6px 19px", width: "100%" }}
                        >
                          <Row wrap={false}>
                            <Col
                              span={2}
                              style={{ textAlign: "center", ...fontColor(i) }}
                            >
                              {i + 1}
                            </Col>
                            <Col span={22} className={styles.ellipse1}>
                              {item.newsTitle}
                            </Col>
                          </Row>
                        </Col>
                      </Row>
                    );
                  })}
                </Col>
              </Row>
            </div>
          </Col>
        </Row>
      </div>
    </Layout>
  );
}
