import { isDev } from '@/utils/tools';
import PageContainer from '@/components/BasePageContainer';
import { Tabs } from 'antd';
import React from 'react';
import styles from './index.less';
import SevenParams from '@/pages/productCenter/mobileConfig/menuconfig/SevenParams';
const { TabPane } = Tabs;
/**
 * 嵌套iframe的组件
 * @param {*} props 可在路由配置里面配置url参数
 */
const FrameContainer = props => {
  const { route } = props;
  const { url = props.url, tabs = props.tabs, tabProps = {} } = route;

  const renderedFrame = tabs ? (
    <Tabs type="card" hideAdd {...tabProps}>
      {tabs.map(({ url: iframeUrl, tabName, type = '' }) => (
        <TabPane tab={tabName} key={tabName}>
          {type && type === 'sevenParams' ? (
            <SevenParams />
          ) : (
            <iframe
              title={tabName}
              src={`${
                isDev ? process.env.PROXY : window.location.origin
              }${iframeUrl}`}
            />
          )}
        </TabPane>
      ))}
    </Tabs>
  ) : (
    <iframe
      title="iframe"
      src={`${isDev ? process.env.PROXY : window.location.origin}${url}`}
    />
  );

  return (
    <PageContainer
      className={styles.container}
      title={false}
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: 'calc(100% + 11px)',
      }}
    >
      {renderedFrame}
    </PageContainer>
  );
};

export default FrameContainer;