import { Button, Popover, Space, Table, Tag, Typography } from 'antd';
import React, { useContext, useState } from 'react';
import { EUTTaskStatus, TIME_TYPE_ZJ } from '../../../create/const';
import PreviewTime from '@/pages/weComTask/components/previewTime';
import { QuestionCircleFilled } from '@ant-design/icons';
import style from '../../index.less'
import FilterUserTooltip from '@/pages/weComTask/components/filterUser/filterUserTooltip';
import { DispatchTaskDetails } from '../../log';
import Log from './log';
const { Text } = Typography;


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

/**
 * 继承任务
 * @param param0 
 * @returns 
 */
const ExternalUserTransferTask: React.FC<Props> = ({ externalUserTransferTasksVOList }) => {

    const { bookPlatForm } = useContext(DispatchTaskDetails)!;
    const [logVisible, setLogVisible] = useState<boolean>(false)
    const [logData, setLogData] = useState<{ taskId: number, taskName: string }>()

    const lookLog = (value: any) => {
        setLogData({ taskId: value.id, taskName: value.taskName })
        setLogVisible(true)
    }

    return <>
        <Table
            dataSource={externalUserTransferTasksVOList}
            columns={[
                {
                    title: '任务名称',
                    dataIndex: 'taskName',
                    key: 'taskName',
                    width: 180,
                    ellipsis: true,
                    align: 'center',
                    fixed: 'left'
                },
                {
                    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: 'takeoverUserId',
                    key: 'takeoverUserId',
                    align: 'center',
                    width: 100,
                    ellipsis: true
                },
                {
                    title: '原跟进成员',
                    dataIndex: 'corpUserId',
                    key: 'corpUserId',
                    width: 100,
                    ellipsis: true,
                    align: 'center',
                    render(value) {
                        return value || '--'
                    },
                },
                {
                    title: '任务提交状态',
                    dataIndex: 'taskStatus',
                    key: 'taskStatus',
                    width: 100,
                    ellipsis: true,
                    align: 'center',
                    render(value) {
                        return EUTTaskStatus[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: 'siftPopulationConfigContentDTO',
                    key: 'siftPopulationConfigContentDTO',
                    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: 'bizType',
                //     key: 'bizType',
                //     align: 'center',
                //     width: 150,
                //     ellipsis: true,
                //     render(value, record) {
                //         return ((value ? '业务类型:' + value + '-' : '') + (record?.bookPlatform ? '书城:' + record?.bookPlatform + '-' : '') + (record?.templateProductId ? '适用产品:' + record?.templateProductId : '')) || '--'
                //     },
                // },
                {
                    title: '继承成功发送文案',
                    dataIndex: 'transferSuccessMsg',
                    key: 'transferSuccessMsg',
                    width: 150,
                    ellipsis: true
                },
                {
                    title: '创建人',
                    dataIndex: 'createBy',
                    key: 'createBy',
                    width: 100,
                    ellipsis: true,
                    align: 'center'
                },
                {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                    width: 135,
                    ellipsis: true,
                    align: 'center'
                },
                {
                    title: '操作',
                    dataIndex: 'cz',
                    key: 'cz',
                    width: 70,
                    fixed: 'right',
                    align: 'center',
                    render(_, record) {
                        return <Space>
                            {[1, 2].includes(record?.taskStatus) && <Button type="link" style={{ padding: 0 }} onClick={() => { lookLog(record) }}>日志</Button>}
                        </Space>
                    },
                },
            ]}
            scroll={{ x: 1000, y: 500 }}
            rowKey={'id'}
            size='small'
            bordered
            pagination={{
                total: externalUserTransferTasksVOList?.length || 0,
                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                showSizeChanger: true,
                showLessItems: true,
                defaultPageSize: 20
            }}
        />
        {/* 日志 */}
        {(logVisible && logData) && <Log {...logData} visible={logVisible} onClose={() => { setLogVisible(false); setLogData(undefined) }} />}
    </>
};

export default React.memo(ExternalUserTransferTask);