import FlieBox from '@/components/FileBoxAD'
import HocError from '@/Hoc/HocError'
import { QuestionCircleFilled } from '@ant-design/icons'
import { Button, Space, Tabs, Tooltip } from 'antd'
import React, { useEffect, useState } from 'react'
import { useModel } from 'umi'
import AddLandingPage from '../../components/addLandingPage'
import BathLauCopy from '../../components/bathLauCopy'
import LookLanding from '../../components/lookLanding'
import style from './index.less'


const { TabPane } = Tabs;

function Cloud() {

    /**********************/
    const { state, set, getList, init, typeEnum, list } = useModel('useLaunchAdq.useBdMedia')
    const { mediaType, belongUser, parentId } = state
    const [visible, setVisible] = useState<boolean>(false)
    const [lookVisible, setLookVisible] = useState<boolean>(false)
    const [copyVisible, setCopyVisible] = useState<boolean>(false)
    const [id, setId] = useState<number>(0)
    /**********************/

    /**加载组件或数据更新执行请求列表 */
    useEffect(() => {
        if (belongUser === '1' || belongUser === '0') {
            getList()
        }
    }, [mediaType, belongUser, parentId])

    return <div className={style.colud}>
        <Tabs
            type="card"
            onChange={(activeKey: any) => {
                init({ mediaType: activeKey })//切换类型时先初始化数据,并设置类型
            }}
            className={style.card}
            activeKey={mediaType}
        >

            {
                ['IMG', 'VIDEO', 'PAGE'].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} tabBarExtraContent={<Space>
                            {
                                mediaType === 'PAGE' ? <Button type="primary" size='small' onClick={() => { setVisible(true) }}>新建素材</Button> : <Button size='small' type="primary" onClick={() => { set({ imgVisrible: true }) }}>新建素材</Button>
                            }
                            <Tooltip title="功能都在下方内容区右键" placement="left">
                                <QuestionCircleFilled />
                            </Tooltip>
                        </Space>}>
                            <TabPane tab={'个人本地'} key={1} />
                            <TabPane tab={'公共本地'} key={0} />
                        </Tabs>
                        <FlieBox setPage={(type, data) => {
                            setId(data || 0)
                            if (type === 0 || type === 2) {
                                setVisible(true)
                            } else if (type === 1) {
                                setLookVisible(true)
                            } else if (type) {
                                setCopyVisible(true)
                            }
                        }} />
                    </TabPane>
                })
            }
        </Tabs>
        {/* 落地页新增 复制 */}
        {visible && <AddLandingPage visible={visible} hideModal={() => setVisible(false)} ajax={list} id={id} />}
        {/* 查看落地页 */}
        {lookVisible && <LookLanding visible={lookVisible} onClose={() => setLookVisible(false)} id={id} />}
        {/* 批量复制 */}
        {copyVisible && <BathLauCopy visible={copyVisible} onClose={() => setCopyVisible(false)} id={id} ajaxHome={list} />}
    </div>

}

export default HocError(Cloud)