import React, { useImperativeHandle, useState } from 'react'
import { Col, Drawer, Row } from 'antd'
import style from './index.less'
import Left from './left'
import Right from './right'
import Editor from '@/components/Editor/Box'
import { useModel } from 'umi'
//isWx是否是微信用来判断调用不同的接口逻辑默认不是
const DrawerPage = React.forwardRef((props: any, ref) => {
    const { styleRight = '', isAll = true, callback = null } = props
    const [visible, setVisible] = useState<boolean>(false)//抽屉
    const [isEdit, setIsEdit] = useState<boolean>(false)//是否编辑
    const [editId, setEditId] = useState<string>('')//编辑的ID
    const { drawerDispatch, actionData } = useModel('useOperating.useMaterialDrawer', model => ({ drawerDispatch: model.dispatch, actionData: model.state.actionData }))
    //映射ref方法
    useImperativeHandle(ref, () => ({
        showDrawer,
    }))
    //抽屉显示
    let showDrawer = (props?: any) => {
        setEditId(props?.editId || '')
        setIsEdit(props?.isEdit || false)//设置是否编辑
        setVisible(true)//开启弹窗
        localStorage.setItem('collapsed', '1')
    };
    //抽屉关闭
    let onClose = () => {
        // isEdit ? drawerDispatch({ type: 'initData' }) : drawerDispatch({ type: 'action', params: { actionId: 1 } })//编辑取消后清空数据
        drawerDispatch({ type: 'initData' })
        setVisible(false)//关闭抽屉
        setIsEdit(false)//设回flase以免新建关闭后销毁数据
        localStorage.setItem('collapsed', '0')
    };
    return <Drawer
        placement="right"
        closable={false}
        onClose={onClose}
        visible={visible}
        getContainer={false}
        width='90%'
        destroyOnClose
        style={styleRight ? { right: styleRight } : {}}
    >
        <Row className={style.box}>
            <Col flex='1'><Left isWx={props?.isWx} /></Col>
            <Col flex='3'>{visible && <Editor onClose={onClose} editId={editId} editData={actionData?.dataArr} syncNews={props?.syncNews} isWx={props?.isWx} isShowWx={props?.isShowWx} isAll={isAll} callback={callback}/>}</Col>
            <Col flex='1'><Right isShowWx={props?.isShowWx} /></Col>
        </Row>
    </Drawer>
})

export default DrawerPage


