import { Card, Popover, Table, Tabs, Tag, Typography } from 'antd';
import React, { useContext, useState } from 'react';
import { STATUS_ZJ, TIME_TYPE_ZJ } from '../../../create/const';
import style from '../../index.less'
import { QuestionCircleFilled } from '@ant-design/icons';
import PreviewTime from '@/pages/weComTask/components/previewTime';
import FilterUserTooltip from '@/pages/weComTask/components/filterUser/filterUserTooltip';
import LookMsg from '@/pages/weComTask/components/previewMsg/lookMsg';
import useNewToken from '@/Hook/useNewToken';
import GroupXfCorpTabls from './groupXfCorpTabls';
import GroupTaskNotes from './groupTaskNotes';
import { getMsgData } from '../../../create/components/massSending/showContent';
import { DispatchTaskDetails } from '../../log';
const { Text } = Typography;



interface Props {
    groupSendTaskVOList: { [x: string]: any }[]
}

/**
 * 群发任务详情
 * @returns 
 */
const GroupTask: React.FC<Props> = ({ groupSendTaskVOList }) => {

    const { bookPlatForm } = useContext(DispatchTaskDetails)!;

    return <Table
        dataSource={groupSendTaskVOList}
        columns={[
            {
                title: '任务名称',
                dataIndex: 'taskName',
                key: 'taskName',
                width: 180,
                ellipsis: true,
                align: 'center'
            },
            {
                title: '任务ID',
                dataIndex: 'id',
                key: 'id',
                width: 70,
                ellipsis: true,
                align: 'center'
            },
            {
                title: '企业ID',
                dataIndex: 'corpId',
                key: 'corpId',
                width: 100,
                ellipsis: true,
                align: 'center'
            },
            {
                title: '客服号',
                dataIndex: 'corpUserMap',
                key: 'corpUserMap',
                width: 100,
                ellipsis: true,
                align: 'center',
                render(value) {
                    return value ? Object.keys(value).map(key => value[key]).join(',') : ''
                },
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
                width: 100,
                ellipsis: true,
                align: 'center',
                render(value) {
                    return STATUS_ZJ[value] || '--'
                },
            },
            {
                title: '执行时间',
                dataIndex: 'timeRepeatType',
                key: 'timeRepeatType',
                width: 100,
                ellipsis: true,
                align: 'center',
                render(value, records: any) {
                    return <>
                        {TIME_TYPE_ZJ[value] || '--'}
                        {value !== 'TIME_TYPE_SINGLE_TIMELY' && <Popover
                            placement="left"
                            content={<div>
                                <PreviewTime
                                    {...records}
                                />
                            </div>}
                            styles={{ body: { width: 300, overflow: 'hidden', overflowY: 'auto', maxHeight: 400 } }}
                        >
                            <a style={{ color: '#000' }}><QuestionCircleFilled /></a>
                        </Popover>}
                    </>
                },
            },
            {
                title: '发送对象',
                dataIndex: 'externalUserFilter',
                key: 'externalUserFilter',
                width: 100,
                align: 'center',
                render(value) {
                    return value ? <div className={style.nameBox}>
                        <div>
                            <Text ellipsis>指定</Text>
                        </div>
                        <Popover
                            placement="right"
                            styles={{ body: { maxWidth: 350, maxHeight: 350, overflow: 'hidden', overflowY: 'auto' } }}
                            mouseEnterDelay={0.5}
                            content={<FilterUserTooltip
                                bookCityList={bookPlatForm?.map(item => ({ label: item.platformName, value: item.platformKey }))}
                                configName={value?.configName}
                                data={value}
                            />}
                        >
                            <a style={{ color: '#000' }}><QuestionCircleFilled /></a>
                        </Popover>
                    </div> : '全部'
                },
            },
            {
                title: '投手',
                dataIndex: 'putUserName',
                key: 'putUserName',
                width: 100,
                ellipsis: true,
                align: 'center'
            },
            {
                title: '创建时间',
                dataIndex: 'createTime',
                key: 'createTime',
                width: 135,
                ellipsis: true,
                align: 'center'
            },
        ]}
        scroll={{ x: 1000, y: 700 }}
        rowKey={'id'}
        size='small'
        bordered
        pagination={{
            total: groupSendTaskVOList?.length || 0,
            showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
            showSizeChanger: true,
            showLessItems: true,
            defaultPageSize: 20
        }}
        expandable={{
            fixed: 'left',
            expandRowByClick: true,
            expandedRowRender: (record) => <ExpandedRow record={record} />
        }}
    />
};

export const ExpandedRow: React.FC<{ record: any }> = ({ record }) => {

    const { contentDTO, id, corpId } = record
    const { token } = useNewToken()
    const [activeKey, setActiveKey] = useState<string>('2')

    return <div style={{ display: 'flex', gap: 10, maxHeight: 450 }}>
        <div style={{ width: 320, maxHeight: 450, overflow: 'hidden', overflowY: 'auto' }}>
            <PreviewTime
                {...record}
            />
            <h2>群发内容</h2>
            {contentDTO?.map((item, index) => <div key={index} style={{ marginTop: 5, backgroundColor: '#d9d9d9', borderRadius: 6, padding: '10px 10px 16px' }}>
                <h3 style={{ marginTop: 0, textAlign: 'center' }}>内容{index + 1}</h3>
                <LookMsg data={getMsgData(item, token)} />
            </div>)}
        </div>
        <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 10, height: '100%' }}>
            <Tabs
                destroyOnHidden={false}
                onChange={(key) => {
                    setActiveKey(key)
                }}
                activeKey={activeKey}
                type="card"
                className="aaa"
                items={[
                    {
                        key: '2',
                        label: '下发企微号',
                        children: <Card styles={{ body: { maxHeight: 400 } }}>
                            {activeKey == '2' && <GroupXfCorpTabls corpId={corpId} taskId={id} />}
                        </Card>
                    },
                    {
                        key: '4',
                        label: '群发记录',
                        children: <Card styles={{ body: { minHeight: 400 } }}>
                            {activeKey == '4' && <GroupTaskNotes corpId={corpId} taskId={id} />}
                        </Card>
                    }
                ]}
            />
        </div>
    </div>
}


export default GroupTask;