import React, { useState, useEffect,useRef } from 'react';
import OpenSDK from '@/components/fileWps/open-jssdk-v0.1.1.es.js';
interface IProps {
  link:string;
}

const FileWps: React.FC<IProps> = ({ link }) => {
  const [outJssdk, setOutJssdk] = useState<any>(null);
  const previewContentRef = useRef(null);
  const handler = (e:any) => {
    console.log(`handler`, e);
  };
  const init= async()=> {
    // 获取 token 函数
    const refreshToken = () => {
        // 自身业务处理...

        // 可以返回 Promise 或者 return { token, timeout }&_w_tokentype=1
        return Promise.resolve({
            token: "Token"+'&_w_tokentype=1', // 必需：你需要设置的 token
            timeout: 10 * 60 * 1000, //  必需：token 超时时间，单位为毫秒，示例为 10 分钟
        });
    };

    const url = link;

    // 获取 JSSDK 实例对象
    const jssdk = OpenSDK.config({
        url,
        mount: previewContentRef.current??document.querySelector("#preview-content"), // 挂载 
        refreshToken: refreshToken, // 配置超时获取 token 函数
    });
    console.log("instance:", jssdk);
    // 设置 token
    jssdk.setToken({
        token: "Token"+'&_w_tokentype=1', // 根据自身的业务需求，通过异步请求或者模板输出的方式，取得 token
        timeout: 10 * 60 * 1000, // token 超时时间，可配合 refreshToken 配置函数使用，在超时前刷新 token
    });
    jssdk.ApiEvent.AddApiEventListener("fileOpen", handler);
    await jssdk.ready();
    jssdk.ApiEvent.AddApiEventListener("fileStatus", handler);
    setOutJssdk(jssdk);
  }
  useEffect(() => {
    init();
  }, []);
  return (
    <>
      <div style={{ border: '1px solid #ccc', zIndex: 100, marginTop: '15px' }}>
        <div id="preview-content" style={{ height: '100%', width: '100%'}} ref={previewContentRef}>
        </div>
      </div>
    </>
  );
};

export default FileWps;