import FlieBox from '@/components/FileBoxAD'
import HocError from '@/Hoc/HocError'
import { Tabs } from 'antd'
import React, { useEffect, useRef } from 'react'
import { useModel } from 'umi'
import style from './index.less'
import SyncModal from '@/components/FileBox/components/syncModal'


const { TabPane } = Tabs;

function Cloud() {
    const { state, set, getList, init, typeEnum } = useModel('useLaunchAdq.useBdMedia')
    let refSync: { current: { show: (id: string, appIds: string[]) => void } } | any = useRef()//syncModal获取实例方法
    const { fileType, belongUser, parentId } = state
    /**加载组件或数据更新执行请求列表 */
    useEffect(() => {
        if (belongUser === '1' || belongUser === '0') {
            getList() 
        }
    }, [fileType, belongUser, parentId])

    return <div className={style.colud}>
        <Tabs
            type="card"
            onChange={(activeKey: any) => {
                init({ fileType: activeKey })//切换类型时先初始化数据,并设置类型
            }}
            className={style.card}
            activeKey={fileType}
        >
            {
                ['image', 'video'].map((key: any) => {
                    return <TabPane tab={typeEnum[key]} key={key} style={{ backgroundColor: '#fff', padding: '0 15px' }} >
                        <Tabs onChange={(activeKey: any) => { set({ belongUser: activeKey }) }} activeKey={belongUser}>
                            <TabPane tab={'个人本地'} key={1} />
                            <TabPane tab={'公共本地'} key={0} />
                        </Tabs>
                        <FlieBox showSync={refSync?.current?.show} />
                    </TabPane>
                })
            }
        </Tabs>
        {/**同步弹窗 */}
        <SyncModal ref={refSync} />
    </div>

}

export default HocError(Cloud)