import { Card, Popover, Table, Tabs, Tag, Typography } from 'antd';
import React, { useState } from 'react';
import { momentAttachmentList, STATUS_ZJ, TIME_TYPE_ZJ } from '../../../create/const';
import PreviewTime from '@/pages/weComTask/components/previewTime';
import { QuestionCircleFilled } from '@ant-design/icons';
import useNewToken from '@/Hook/useNewToken';
import LookPyq from '@/pages/weComTask/components/previewMsg/lookPyq';
import MomentXfCorpTabls from './momentXfCorpTabls';
import MomentSendLog from './momentSendLog';
const { Text } = Typography;

interface Props {
    momentTaskVOList: { [x: string]: any }[]
}
const MomentTask: React.FC<Props> = ({ momentTaskVOList }) => {


    return <Table
        dataSource={momentTaskVOList}
        columns={[
            {
                title: '任务名称',
                dataIndex: 'momentJobTitle',
                key: 'momentJobTitle',
                width: 100,
                ellipsis: true,
                align: 'center'
            },
            {
                title: '企业ID',
                dataIndex: 'corpId',
                key: 'corpId',
                width: 100,
                ellipsis: true,
                align: 'center'
            },
            {
                title: '客服号',
                dataIndex: 'corpMomentVisibleCorpUserVOList',
                key: 'corpMomentVisibleCorpUserVOList',
                width: 100,
                ellipsis: true,
                align: 'center',
                render(value) {
                    return value?.map(item => item.relationName)?.join('、')
                },
            },
            {
                title: '状态',
                dataIndex: 'jobStatus',
                key: 'jobStatus',
                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: 'momentTagVOList',
                key: 'momentTagVOList',
                width: 100,
                align: 'center',
                render(value) {
                    return value?.length > 0 ? <Text ellipsis>{value.reduce((pre, cur) => pre ? pre + '、' + cur?.tagList?.map(item => item.tagName).join('、') : cur?.tagList?.map(item => item.tagName).join('、'), '')}</Text> : '全部'
                },
            },
            {
                title: '创建人',
                dataIndex: 'createUserName',
                key: 'createUserName',
                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: momentTaskVOList?.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 default React.memo(MomentTask);


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

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

    return <div style={{ display: 'flex', gap: 10, maxHeight: 450 }}>
        <div style={{ width: 350, maxHeight: 450, overflow: 'hidden', overflowY: 'auto' }}>
            <PreviewTime
                {...record}
            />
            <h2>朋友圈内容</h2>
            {corpMomentContentList?.map((item, index) => {
                return <div key={index} style={{ marginTop: 5, backgroundColor: '#f1f1f1', borderRadius: 6, padding: '5px 10px 16px' }}>
                    <h3 style={{ textAlign: 'center' }}>内容{index + 1}</h3>
                    <LookPyq
                        content={{ text: item?.text?.content, data: item?.attachmentList?.length > 0 ? momentAttachmentList(item.attachmentList) as any : undefined }}
                    />
                </div>
            })}
        </div>
        <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 10, height: '100%' }}>
            <Tabs
                destroyInactiveTabPane={false}
                onChange={(key) => {
                    setActiveKey(key)
                }}
                activeKey={activeKey}
                type="card"
                className="aaa"
                items={[
                    {
                        key: '2',
                        label: '下发企微号',
                        children: <Card styles={{ body: { maxHeight: 400 } }}>
                            {activeKey == '2' && <MomentXfCorpTabls corpId={corpId} taskId={id} />}
                        </Card>
                    },
                    {
                        key: '4',
                        label: '发送记录',
                        children: <Card styles={{ body: { minHeight: 185 } }}>
                            {activeKey == '4' && <MomentSendLog corpMomentId={id} />}
                        </Card>
                    }
                ]}
            />
        </div>
    </div>
}