import React, { useMemo, useState } from "react";
import styles from "./index.module.scss";
import { envDataSonType, envUrl } from "@/utils/env";
import classNames from "classnames";

type Props = {
  data: envDataSonType[];
};

function Tab1({ data }: Props) {
  // 当前选中状态
  const [isAc, setIsAc] = useState(1);

  const info = useMemo(() => {
    return data.find((v) => v.id === isAc) || ({} as envDataSonType);
  }, [data, isAc]);

  return (
    <div className={styles.Tab1}>
      <div className="Tab1main">
        {/* 左侧视频 */}
        <div className="Tab1main1">
          <div className="t1Tit">{info.name}</div>
          <div className="videoBox">
            <video
              key={isAc}
              controls
              autoPlay
              src={`${envUrl}/swData/1/${info.id}.mp4`}
            ></video>
          </div>

          <div
            className="t1Txt myscroll"
            dangerouslySetInnerHTML={{ __html: info.txt }}
          ></div>
        </div>
        {/* 右侧列表 */}
        <div className="Tab1main2 myscroll">
          {data.map((v) => (
            <div
              onClick={() => setIsAc(v.id)}
              key={v.id}
              title={v.name}
              className={classNames(isAc === v.id ? "rowAc" : "")}
            >
              <img src={`${envUrl}/swData/1/${v.id}.jpg`} alt="" />
              <div className="name">{v.name}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const MemoTab1 = React.memo(Tab1);

export default MemoTab1;
