import { useAjax } from '@/Hook/useAjax';
import { getProjectLogListApi } from '@/pages/weComTask/API/businessPlan/create';
import { Card, Drawer, Popover, Spin, Table, Tabs, Tag, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import { STATUS_ZJ, TIME_TYPE_ZJ } from '../../businessPlan/create/const';
import PreviewTime from '@/pages/weComTask/components/previewTime';
import FilterUserTooltip from '@/pages/weComTask/components/filterUser/filterUserTooltip';
import { QuestionCircleFilled } from '@ant-design/icons';
import style from '../../businessPlan/taskList/index.less'
import useNewToken from '@/Hook/useNewToken';
import LookMsg from '@/pages/weComTask/components/previewMsg/lookMsg';
import { getMsgData } from '../../businessPlan/create/components/massSending/showContent';
import MomentsXfCorpTabls from './momentsXfCorpTabls';
import MomentsTaskNotes from './momentsTaskNotes';
const { Text } = Typography;

interface Props {
    data: any,
    bookPlatForm: TASK_CREATE.BookPlatFormProps[]
    bookList: TASK_CREATE.BookListProps[]
    visible?: boolean,
    onClose?: () => void,
}

/**
 * 任务日志
 * @param param0 
 * @returns 
 */
const Log: React.FC<Props> = ({ data, bookPlatForm, bookList, visible, onClose }) => {

    /******************************************************/
    const [previewData, setPreviewData] = useState<{ momentsTaskVOList?: any[] }>({})
    const getProjectLogList = useAjax((params) => getProjectLogListApi(params))
    /******************************************************/

    useEffect(() => {
        console.log(data.id)
        getProjectLogList.run(data.id).then(res => {
            if (res?.data) {
                setPreviewData(res.data)
            }
        })
    }, [])

    return <Drawer
        title={<strong>{data.projectName} 任务详情</strong>}
        onClose={onClose}
        open={visible}
        width={1400}
        styles={{ body: { paddingTop: 5 } }}
    >
        <Table
            dataSource={previewData?.momentsTaskVOList || []}
            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: '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: '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
            loading={getProjectLogList.loading}
            pagination={{
                total: previewData?.momentsTaskVOList?.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} />
            }}
        />
    </Drawer>
};


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: 320, maxHeight: 450, overflow: 'hidden', overflowY: 'auto' }}>
            <PreviewTime
                {...record}
            />
            <h2>群发内容</h2>
            {corpMomentContentList?.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
                destroyInactiveTabPane={false}
                onChange={(key) => {
                    setActiveKey(key)
                }}
                activeKey={activeKey}
                type="card"
                className="aaa"
                items={[
                    {
                        key: '2',
                        label: '下发企微号',
                        children: <Card styles={{ body: { maxHeight: 400 } }}>
                            {activeKey == '2' && <MomentsXfCorpTabls data={record} />}
                        </Card>
                    },
                    {
                        key: '4',
                        label: '群发记录',
                        children: <Card styles={{ body: { minHeight: 400 } }}>
                            {activeKey == '4' && <MomentsTaskNotes data={record} />}
                        </Card>
                    }
                ]}
            />
        </div>
    </div>
}


export default Log;