import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { Tag, MoreMenus } from 'kts-xui';
import { Menu, Popconfirm } from 'kts-components-antd-x4';
import { taskStatusEnum, findLabel } from '../../CommonComponents/FiledsEnum';
import agent from '../../Server';
import { CloseOutlined } from '@ant-design/icons'
import { useHistory } from 'react-router-dom';
interface IProps {
    data: any;
    connectTask: (value: boolean) => void;
}
/**
 * 关联任务详情的头部信息
 * @param props 任务详情数据
 * @returns 
 */
const Header = (props: IProps) => {
    const data = useMemo(() => props.data, [props.data.taskUuid]);
    const [key, setKey] = useState(0);
    const [list, setList] = useState<any[]>([]);
    const history = useHistory();
    useEffect(() => {
        (async () => {
            if (data.taskUuid) {
                const res: any = await agent.post('/collector/task/getRelationTask', { taskUuid: data.taskUuid }, this);
                if (res.er) {
                    return;
                } else {
                    setList(res.res);
                    if (res.res.length > 0) {
                        const count = res.res.length;
                        let end = 0;
                        res.res.forEach(item => {
                            if (item.status === 3) {
                                end += 1;
                            }
                        })
                        if (count === end) {
                            props.connectTask(false)
                        }

                    }
                }
            }
        })()
    }, [data.taskUuid, key]);
    const openConnectTask = (item) => {
        //只能查看
        history.push(`/task/masterview/${item.taskUuid}`);
        // if(item.status>1){
        //     history.push(`/task/masterview/${item.taskUuid}`);
        // }else{
        //     //编辑
        //     console.log(data);
        //     history.push({pathname:`/task/masteredit/${item.taskUuid}/edit`,state:data});
        // }
    }
    /**
     * 取消关联
     * @param item 
     */
    const onRemoveConnect = useCallback(async (item) => {
        const params = {
            relationTaskUuidList: [item.taskUuid],
            taskUuid: data.taskUuid
        }
        const res: any = await agent.post('/collector/task/unLinkTask', params, this);
        if (res.er) {
            return;
        } else {
            setKey(new Date().getTime())
        }
    }, [data.taskUuid])
    const titleDom = useCallback(() => {
        /**
         * 前两个
         */
        const first2 = list.slice(0, 2);
        /**
         * 剩余数据
         */
        const restlist = list.slice(2);
        const menu = <Menu>
            {restlist.length > 0 && restlist.map((item, index) => {
                return <Menu.Item key={index}>
                    <span >
                        <span style={{ fontSize: 14, marginRight: 10 }} onClick={() => { openConnectTask(item); }}>核验任务:{item.taskNo}</span>
                        <Popconfirm title="确认解除关联吗?" onConfirm={() => { onRemoveConnect(item); }}><CloseOutlined style={{ cursor: 'pointer' }} /></Popconfirm>
                    </span>
                </Menu.Item>
            })}

        </Menu>
        return <span style={{ whiteSpace: 'nowrap' }}>
            <span style={{ fontSize: 14, color: '#0074ff', marginRight: 10 }}>采集任务:{data.taskNo}</span>
            <Tag style={{ marginRight: 10, color: 'rgb(0, 116, 255)', background: 'white', border: '1px solid' }} className="no-edit">{findLabel(data.taskStatus, taskStatusEnum)}</Tag>
            {first2.length > 0 && first2.map((item, index) => {
                return <span key={index}>
                    <span style={{ cursor: 'pointer' }} onClick={() => { openConnectTask(item); }}>
                        <span style={{ fontSize: 14, marginRight: 10 }}>核验任务:{item.taskNo}</span>
                        <Tag className="no-edit">{findLabel(item.status, taskStatusEnum)}</Tag>
                    </span>
                    <Popconfirm title="确认解除关联吗?" onConfirm={() => { onRemoveConnect(item); }}><CloseOutlined style={{ cursor: 'pointer' }} /></Popconfirm>
                </span>
            })}
            {restlist.length > 0 && <MoreMenus dropdownProps={{ overlay: menu }} />}

        </span>
    }, [list, data])
    return (
        <>
            {titleDom()}
        </>
    );
}
export default Header