import React, { useMemo } from "react";
import styles from "./index.module.scss";
import demoImg from "@/assets/img/demo.jpg";
import { Button } from "antd";
import ImageLazy from "@/components/ImageLazy";
function Scene() {
  const list1 = useMemo(() => {
    return [
      { id: 1, name: "鸦片战争博物馆", img: demoImg },
      { id: 2, name: "海战博物馆A厅", img: demoImg },
      { id: 3, name: "海战博物馆B厅", img: demoImg },
      { id: 4, name: "海战博物馆C厅海战博物馆C厅海战博物馆C厅", img: demoImg },
      { id: 5, name: "海战博物馆D厅", img: demoImg },
      { id: 6, name: "虎门故事展厅", img: demoImg },
    ];
  }, []);

  const list2 = useMemo(() => {
    return [
      { id: 1, name: "威远＋靖远炮台", img: demoImg },
      { id: 2, name: "靖远炮台1", img: demoImg },
      { id: 3, name: "靖远炮台2", img: demoImg },
      { id: 4, name: "靖远炮台3", img: demoImg },
      { id: 5, name: "靖远炮台2靖远炮台2靖远炮台2靖远炮台2靖远炮台2靖远炮台2靖远炮台2", img: demoImg },
      { id: 6, name: "靖远炮台A", img: demoImg },
    ];
  }, []);

  return (
    <div className={styles.Scene}>
      <div className="pageTitlt">场景管理</div>
      {/* 场景编辑器 */}
      <div className="box1">
        <div className="titleTxt">场景编辑器</div>
        <div className="box1RowBox">
          {list1.map((v) => (
            <div className="box1Row" key={v.id}>
              <ImageLazy src={v.img} width="100%" height={180} offline={true} />
              <div className="txt">{v.name}</div>
              <div className="button">
                <Button type="primary">预览</Button>&emsp;
                <Button>编辑</Button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 数字场景档案 */}
      <div className="box1">
        <div className="titleTxt">数字场景档案</div>
        <div className="box1RowBox">
          {list2.map((v) => (
            <div className="box1Row" key={v.id}>
              <ImageLazy src={v.img} width="100%" height={180} offline={true} />
              <div className="txt">{v.name}</div>
              <div className="button">
                <Button type="primary">预览</Button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const MemoScene = React.memo(Scene);

export default MemoScene;
