import { Avatar, Card, Col, Radio, Row, Modal, Button, Space } from 'antd'
import Meta from 'antd/lib/card/Meta'
import React, { useCallback } from 'react'
import { useModel } from 'umi'
import Left from './left'
import style from './index.less'
import NoFoundPage from '@/pages/empty'
/**本地保存并群发选择公众号弹窗*/
type Props = {
    visible: boolean,
    hideWx: (cancel: boolean) => void
}
let ActionModal = (props: Props) => {
    const { visible, hideWx } = props
    const { state, actionWx } = useModel('useOperating.useWxGroupList')
    //关闭弹窗
    let handleCancel = useCallback((cancel: boolean) => {
        if (state.actionWX) {
            hideWx(cancel)
        }
    }, [state])
    //选中事件
    let action = useCallback((wx: any) => {
        actionWx(wx)
    }, [])
    return <>
        {
            state?.actionWX ? <Modal
                title="选择公众号"
                width={740}
                visible={visible}
                keyboard={false}
                maskClosable={false}
                closable={false}
                footer={<>
                    <Space>
                        <Button type='primary' onClick={() => { handleCancel(true) }}>取消</Button>
                        <Button type='primary' onClick={() => { handleCancel(false) }}>确定</Button>
                    </Space>
                </>}
            >
                <Row className={style.colud}>
                    <Col>
                        <Left />
                    </Col>
                    <Col>
                        <Card style={{ height: '100%', overflowY: 'auto' }} title='分组' bodyStyle={{ maxHeight: 473, overflowY: 'auto' }}>
                            <Radio.Group style={{ width: '100%' }} >
                                <Row gutter={[10, 0]}>
                                    {
                                        state?.mpAccounts?.map((item: any) => {
                                            return <Col key={item.id}>
                                                <Radio value={item} className={style.box} disabled={item?.verifyTypeInfo === -1}>
                                                    <Card
                                                        onClick={() => { action(item) }}
                                                        hoverable={item?.verifyTypeInfo !== -1}
                                                        className={`${item.appid === state?.actionWX?.appid ? style.card_action : undefined} ${style.card_box} ${item?.verifyTypeInfo === -1 ? style.disabled : ''}`}
                                                    >
                                                        <Meta
                                                            style={{ display: 'flex', alignItems: 'center' }}
                                                            avatar={
                                                                <Avatar src={item?.headImg || localStorage?.bookImg} />
                                                            }
                                                            title={item.nickName}

                                                        />
                                                    </Card>
                                                </Radio>
                                            </Col>
                                        })
                                    }
                                </Row>
                            </Radio.Group>
                        </Card>
                    </Col>
                </Row>
            </Modal > : <NoFoundPage />
        }
    </>
}

export default ActionModal