import React, { useCallback, 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";
import { isTokenFlagAPI } from "@/store/action/login";
import { MessageFu } from "@/utils/message";
import { removeTokenInfo } from "@/utils/storage";
import history from "@/utils/history";
import { baseURL } from "@/utils/http";

const isTokenFlagFu = (val: boolean, url: string) => {
  if (val) {
    // token 有效
    window.open(url);
  } else {
    // token 失效
    MessageFu.warning("登录失效，请重新登录!");
    removeTokenInfo();
    history.push("/login");
  }
};

function Scene() {
  const list1 = useMemo(() => {
    return [
      { id: 1, sceneCode: "1194", name: "鸦片战争博物馆", img: demoImg },
      { id: 2, sceneCode: "1194", name: "海战博物馆A厅", img: demoImg },
      { id: 3, sceneCode: "1194", name: "海战博物馆B厅", img: demoImg },
      {
        id: 4,
        sceneCode: "1194",
        name: "海战博物馆C厅海战博物馆C厅海战博物馆C厅",
        img: demoImg,
      },
      { id: 5, sceneCode: "1194", name: "海战博物馆D厅", img: demoImg },
      { id: 6, sceneCode: "1194", name: "虎门故事展厅", img: demoImg },
    ];
  }, []);


  const lookFu = useCallback(async (code: string) => {
    const res = await isTokenFlagAPI();
    if (res.code === 0) {
      isTokenFlagFu(res.data, baseURL + `/scene/index.html?m=${code}`);
    }
  }, []);

  const editFu = useCallback(async (code: string) => {
    const res = await isTokenFlagAPI();
    if (res.code === 0) {
      isTokenFlagFu(res.data, baseURL + `/scene/edit.html?m=${code}`);
    }
  }, []);

  return (
    <div className={styles.Scene}>
      <div className="pageTitlt">场景管理</div>
      {/* 场景编辑器 */}
      <div className="box1">
        <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" onClick={() => lookFu(v.sceneCode)}>
                  预览
                </Button>
                &emsp;
                <Button onClick={() => editFu(v.sceneCode)}>编辑</Button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const MemoScene = React.memo(Scene);

export default MemoScene;
