import React from "react"
import { Image, Badge, Button, Space, Menu, Dropdown, Row, Col, Popconfirm, Tooltip } from "antd"
import './index.less'
import { ClockCircleOutlined, CopyOutlined, DeleteOutlined, DownOutlined, EyeOutlined, FormOutlined, SyncOutlined } from "@ant-design/icons"
let columns = (copy: (value: any) => void, look: (value: any) => void, upload: (value: any) => void, history: (value: any) => void, edit: (value: any) => void, del: (value: string) => void, addAndCreate: any, copys: (value: any) => void, checkLogin: (fn: () => void) => void) => [
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        align: 'center',   
        width:50,
        fixed: 'left'
    },
    {
        title: '推广页名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
        width: 160,
        fixed: 'left',
        render: (a: any, b: any) => {
            return <Tooltip title={a}><div className='oneText'>{a}</div></Tooltip>
        }
    },
    {
        title: '分享标题',
        dataIndex: 'title',
        key: 'title',
        align: 'center',
        width: 120,
        render: (a: any, b: any) => {
            return <Tooltip title={a}><div className='oneText'>{a}</div></Tooltip>
        }
    },
    {
        title: '分享描述',
        dataIndex: 'descContext',
        key: 'descContext',
        align: 'center',
        width: 120,
        render: (a: any, b: any) => {
            return <Tooltip title={a}><div className='oneText'>{a}</div></Tooltip>
        }
    },
    {
        title: '小说',
        dataIndex: 'novelName',
        key: 'novelName',
        align: 'center',
        width: 100,
        render: (a: any, b: any) => {
            return <Tooltip title={a}><div className='oneText'>{a}</div></Tooltip>
        }
    },
    {
        title: '页面背景色',
        dataIndex: 'pageContextList',
        key: 'pageContextList',
        align: 'center',
        width: 95,
        render: (a: any, b: any) => {
            if (a && a?.length > 0) {
                return <span style={{ fontSize: "12px" }}>{a[0]?.backgroundColor}</span>
            } else {
                return null
            }
        }
    },
    {
        title: '顶部素材类型',
        dataIndex: 'topCanvasType',
        key: 'topCanvasType',
        align: 'center',
        width: 95,
        render: (a: any, b: any) => {
            return <span>{a === 41 ? <Badge color={'geekblue'} text='顶部图片' /> : a === 61 || a === 142 ? <Badge color={'red'} text='顶部视频' /> : a === 101 ? <Badge color={'yellow'} text='轮播图' /> : ''}</span>
        }
    },
    {
        title: '顶部素材预览',
        dataIndex: 'thumbUrl',
        key: 'thumbUrl',
        align: 'center',
        width: 95,
        render: (a: any, b: any) => {
            if (a) {
                return <div className="topimgthumbUrl"><Image height={25} src={a} /></div>
            } else {
                return null
            }
        }
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
        width: 150,
        render: (a: any, b: any) => {
            if (a) {
                return <span>{a}</span>
            } else {
                return null
            }
        }
    },
    {
        title: '任务反馈',
        dataIndex: 'syncAccountCount',
        key: 'syncAccountCount',
        render: (a: any, b: any) => {
            return <Row gutter={10}>
                <Col style={{ textAlign: 'left' }}>
                    <div style={{ fontSize: "12px", width: 130 }}><Badge status="processing" />落地页总条数：{b?.syncAccountCount}条</div>
                </Col>
                {b?.syncAccountSuccessCount ? <Col style={{ textAlign: 'left' }}>
                    <div style={{ fontSize: "12px", width: 110 }}><Badge status="success" />执行成功：{b?.syncAccountSuccessCount}条</div>
                </Col> : null}
                {
                    b?.syncAccountCount !== b?.syncAccountSuccessCount ? <Col style={{ textAlign: 'left' }}>
                        <div style={{ fontSize: "12px", width: 130 }}><Badge status="warning" />创建中or失败：{b?.syncAccountCount - b?.syncAccountSuccessCount}条</div>
                    </Col> : null
                }
            </Row>
        }
    },
    {
        title: '操作',
        dataIndex: 'cz',
        key: 'cz',
        width: 180,
        align: 'center',
        fixed: 'right',
        render: (a: string, b: any) => (
            <Space>

                <Button onClick={() => { checkLogin(() => history(b)) }} type='link' style={{ fontSize: "12px", padding: 0 }}><ClockCircleOutlined /> 记录</Button>
                <Button onClick={() => {
                    checkLogin(() => upload(b))
                }} type='link' style={{ fontSize: "12px", padding: 0 }} loading={addAndCreate?.loading}> {!addAndCreate?.loading && <SyncOutlined />} 同步</Button>
                <Dropdown
                    overlay={
                        <Menu>
                            <Menu.Item>
                                <Button onClick={() => look(b)} type='link' style={{ fontSize: "12px", padding: 0 }}><EyeOutlined /> 查看</Button>
                            </Menu.Item>
                            {
                                b?.syncAccountCount === 0 && <Menu.Item>
                                    <Button type='link' onClick={() => {
                                        checkLogin(() => edit(b))
                                    }} style={{ fontSize: "12px", padding: 0 }}><FormOutlined />修改</Button>
                                </Menu.Item>
                            }
                            <Menu.Item>
                                <Button type='link' onClick={() => {
                                    checkLogin(() => copy(b))
                                }} style={{ fontSize: "12px", padding: 0 }}><CopyOutlined /> 复制</Button>
                            </Menu.Item>
                            <Menu.Item>
                                <Button type='link' onClick={() => {
                                    checkLogin(() => copys(b))
                                }} style={{ fontSize: "12px", padding: 0 }}><CopyOutlined /> 批量复制</Button>
                            </Menu.Item>
                            <Menu.Item>
                                <Popconfirm
                                    title={<div style={{ width: 180, color: 'red' }}>
                                        注意：当前删除只会删除创建失败的落地页，是否删除?
                                    </div>}
                                    onConfirm={() => { del(b?.id) }}
                                    okText="Yes"
                                    cancelText="No"
                                >
                                    <Button type='link' danger style={{ fontSize: "12px", padding: 0 }}><DeleteOutlined /> 删除</Button>
                                </Popconfirm>
                            </Menu.Item>
                        </Menu>
                    }
                >
                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()} style={{ fontSize: 12, marginLeft: 10 }}>
                        更多 <DownOutlined />
                    </a>
                </Dropdown>

            </Space>
        )
    }
]

export default columns