import React from 'react';
import './index.scss';
import noData from './H5.svg';

export const H5Frame = (props: H5FrameProps) => {
  const { options,  isPreviewShow = false } = props;


  const {
    iframeUrl,
    scrollStatus,
    iframeOpacity,
  } = options;
 // 查看是否同域，不同域需要在路径前添加 "http://" 或者 "https://" 前缀
  let url =
    iframeUrl.indexOf('http://') > -1 || iframeUrl.indexOf('https://') > -1 ? iframeUrl : `http://${iframeUrl}`;
  let scrollingAttr = scrollStatus ? 'yes' : 'no';

  return !iframeUrl ? (
    <img src={noData} alt="H5内嵌框架" width="100%" height="100%"  />
  ) : (
    <div className='iframeWarpper'>
      <div
        className='iframeContent'
        style={{
          pointerEvents:isPreviewShow ? 'auto': 'none',
          opacity: iframeOpacity / 100
        }}
        >
        <iframe
          width="100%"
          height="100%"
          src={url}
          scrolling={scrollingAttr}
          frameBorder="0"
        />
      </div>
    </div>
  );
};

export default H5Frame;

export interface H5FrameProps {
  options: Ioptions;
  isPreviewShow?: boolean;
}

export interface Ioptions {
  iframeUrl?: string;
  scrollStatus?: boolean;
  iframeOpacity?: number;
}