import React, { useEffect } from 'react'
import { PageHeader } from 'antd'
import { useAppData, useData } from '@ttk/app-loader'

export default React.memo(Page)
function Page(props) {
  const currentData = useData([props, 'showState'])
  const appData = useAppData('app-root')
  const appKeyData = useAppData('app-root/dateRange')
  // 这里使用的是useData来获取其它App的state。
  // 如果获取当前app的state建议使用useData([props, '...', '...'])这种方式
  const data = useData('app-root/dateRange')

  useEffect(() => {
    // console.log('appData', appData.toJS())
    // console.log('data: ', data.toJS())
    // console.log('appKeyData: ', appKeyData.toJS())
  })
  return (
    <div>
      <PageHeader title='在当前App获取其它App 数据的示例：'>
        <label>app: app-root/dateRange</label>
        <label>{JSON.stringify(currentData.toJS())}</label>
      </PageHeader>
      <br /><br /> 
      <PageHeader title="在当前App获取其它App 数据的示例：">
      </PageHeader>
      <br />
      <div>
        <label>app: app-root/dateRange</label><br />
        <label>{JSON.stringify(data.toJS())}</label>
      </div>
      <br />
      <div>
        <label>app: app-root/dateRange</label><br />
        <label>{JSON.stringify(appKeyData.toJS())}</label>
      </div>
      <div>
        <label>app: app-root</label><br />
        <label>{JSON.stringify(appData.toJS())}</label>
      </div>
      <br />
    </div>
  )
}


