import React, { useCallback } from 'react'
import { useDispatch } from 'react-redux'
import AppIframe from '@/apps/portal/app-iframe/app'
// import { openIframeTab } from '@/apps/portal/app-iframe/action'
import { openIframeTabAction } from '@/apps/portal/app-root/action'
import { Button } from 'antd'
import "./style.less"

export default React.memo(Page)
function Page(props) {
  
  const dispatch = useDispatch()
  
  const sites = [{  
    name: "新标签-百度",
    url: "https://www.baidu.com"
  }, {
    name: "新标签-新浪",
    url: "https://www.sina.com.cn/"
  }, {
    name: "新标签-腾讯",
    url: "https://www.qq.com/"
  }]
  
  const onSkip = useCallback((idx) => {
    let site = sites[idx]
    dispatch(openIframeTabAction({
      name: site.name,
      iframeUrl: site.url
    }))
  }, [])
  
  return (
    <div style={{padding: "20px", height: "100%"}}>
      <p><Button type="primary" onClick={(e) => onSkip(0)}>打开百度</Button></p>
      <p><Button type="primary" onClick={(e) => onSkip(1)}>打开新浪</Button></p>
      <p><Button type="primary" onClick={(e) => onSkip(2)}>打开腾讯</Button></p>
      <AppIframe className='open-iframe' {...props}/>
    </div>
  )
}


