import * as React from 'react';
import { WeaPopoverHrm } from 'ecCom';
import { Tooltip, Button, Icon } from 'antd';
import QueueAnim from 'rc-queue-anim';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

export default class Item extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
    }
    handleMouseDown = (ev) => {
        const { canEditBoard } = this.props;
        this.offset = {
            left: this.container.offsetLeft,
            top: this.container.offsetTop - jQuery(this.container).closest('.kanban-group-body')[0].scrollTop,
            height: this.container.clientHeight,
            width: this.container.clientWidth,
            startX: ev.clientX,
            startY: ev.clientY
        };
        this.startScrollX = jQuery(this.container).closest('.kanban-group-body')[0].scrollLeft;
        this.startScrollY = {};
        jQuery(this.container).closest('.kanban-container').find('kanban-group').each((index, ele) => {
            const dataValue = jQuery(ele).attr('data-value');
            this.startScrollY[dataValue] = jQuery(ele).find('.kanban-group-body').scrollTop();
        });
        canEditBoard && document.addEventListener('mousemove', this.handleMouseMove);
        canEditBoard && document.addEventListener('mouseup', this.handleMouseUp);
    }
    handleMouseMove = (ev) => {
        const diffX = ev.clientX - this.offset.startX;
        const diffY = ev.clientY - this.offset.startY;
        const fy = jQuery(this.container).closest('.kanban-group-body')[0].scrollHeight / jQuery(this.container).closest('.kanban-group-body')[0].clientHeight;
        if (Math.abs(diffX) > 5 || Math.abs(diffY) > 5) {
            this.moving = true;
            this.props.root.moving = true;
            this.container.style.position = 'absolute';
            this.container.style.width = this.offset.width + 'px';
            this.container.style.height = this.offset.height + 'px';
            this.container.style.left = (this.offset.left - 10 + diffX) + 'px';
            this.container.style.top = (this.offset.top - 10 + diffY) + 'px';
            this.container.style.zIndex = 1000;
            this.container.style.transform = "rotate(5deg)";
            jQuery(this.container).addClass('moving');
            this.props.root.showItemPlace(this.offset, this.container);
            let isFound = false;
            let currentGroup = null;
            if (diffX < 0) {
                const thisGroup = jQuery(this.container).closest('.kanban-group');
                const prevAll = thisGroup.prevAll('.kanban-group');
                prevAll.each((index, ele) => {
                    const offset = jQuery(ele).offset();
                    const width = jQuery(ele).width();
                    const offset1 = jQuery(this.container).offset();
                    const width1 = jQuery(this.container).width();
                    const middle = offset.left + width / 2 - offset1.left;
                    if (middle > 0 && (middle < width1 || index === 0)) {
                        isFound = true;
                        currentGroup = jQuery(ele);
                    }
                });
            } else {
                const nextAll = jQuery(this.container).closest('.kanban-group').nextAll('.kanban-group');
                nextAll.each((index, ele) => {
                    const offset = jQuery(ele).offset();
                    const width = jQuery(ele).width();
                    const offset1 = jQuery(this.container).offset();
                    const width1 = jQuery(this.container).width();
                    const middle = offset1.left + width1/2 - offset.left - width/2;
                    if (middle > 0 && (middle < width / 2 || index === nextAll.length - 1)) {
                        isFound = true;
                        currentGroup = jQuery(ele);
                    }
                })
            }
            if (!isFound || !currentGroup) {
                currentGroup = jQuery(this.container).closest('.kanban-group');
                isFound = true;
            }
            if (isFound && currentGroup) {
                const items = currentGroup.find('.kanban-item');
                if (items.length === 0) {
                    //this.props.root.showItemPlace(this.offset, currentGroup);
                    currentGroup.find('.kanban-group-body').append(this.props.root.itemPlace);
                }
                items.each((i, item) => {
                    const itemOffset = jQuery(item).offset();
                    const itemHeight = jQuery(item).height();
                    const itemOffset1 = jQuery(this.container).offset();
                    const top = itemOffset.top - itemOffset1.top;
                    if (top > 0 && (top < itemHeight || i === 0)) {
                        this.props.root.showItemPlace(this.offset, item);
                    } else {
                        if (top < 0 && i < items.length) {
                            this.props.root.showItemPlace(this.offset, item, true);
                        }
                    }
                })
                const dataValue = currentGroup.attr('data-value');
                currentGroup.find('.kanban-group-body')[0].scrollTop = (this.startScrollY[dataValue] || 0) + diffY * fy;
            }
        }
    }
    handleMouseUp = () => {
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
        if (this.moving) {
            this.container.style.removeProperty('position');
            this.container.style.removeProperty('width');
            this.container.style.removeProperty('height');
            this.container.style.removeProperty('left');
            this.container.style.removeProperty('top');
            this.container.style.removeProperty('z-index');
            this.container.style.removeProperty("transform");

            this.props.root.moving = false;
            this.moving = false;
            jQuery(this.container).removeClass('moving');
            jQuery(this.props.root.itemPlace).before(this.container);
            this.props.root.hidePlace();
            this.props.root.onChange();
        }
    }
    setLandMark = (id, value, e) => {
        this.props.setLandMark(id, value);
        e.stopPropagation();
    }
    onTaskClick = (value, e) => {
        this.props.onTaskClick(value);
        e.stopPropagation();
    }

    render() {
        const { value, prefix, avatar, title, description, islandmark, action, finish, colors, managerid, managericon, managername, allnum, finishnum, status } = this.props;
        return (
            <div ref={ref => this.container = ref} key={value} className="kanban-item" data-value={value} onClick={(e) => this.onTaskClick(value, e)} onMouseDown={this.handleMouseDown}>
                <div className="kanban-item-finish">
                    <div className="kanban-item-finish-status" style={{ backgroundColor: colors, height: finish + "%" }}>

                    </div>
                </div>
                <div className="kanban-item-extra-wrapper">

                    <div className="kanban-item-main" style={{ width: `calc(100%  )` }}>
                        <div className="kanban-item-main-meta">
                            <div style={{ display: avatar ? 'inline-block' : 'none' }} className="kanban-item-main-meta-avatar">
                                {avatar}
                            </div>
                            <div className="kanban-item-main-meta-content">
                                <div className="kanban-item-main-meta-title">
                                    <div class="title-content" id={"titleContent"}>
                                        <div style={{ color: "red", display: this.state.show ? "none" : "inline-block" }} >  {prefix} </div>{!this.state.show && title}
                                    </div>


                                    {
                                        <div className="kanban-item-manager-list">
                                            <QueueAnim ecId={`${this && this.props && this.props.ecId || ''}_QueueAnim@jj7mh4`} delay={10} className="queue-simple" type={["right", "right"]}>
                                                {this.getManagers()}
                                            </QueueAnim>
                                        </div>
                                    }


                                </div>
                                <div className="kanban-item-main-meta-description">

                                </div>
                                <div className="kanban-item-main-meta-description">
                                    {description}
                                </div>
                                <div className="kanban-item-main-meta-description">
                                    {allnum > 0 && getLabel('2098',"子任务")+" " + finishnum + "/" + allnum}
                                </div>
                            </div>
                            {action && action.length > 0 && <ul className="kanban-item-action">
                                {
                                    action.map((ac, i) => (
                                        <li>
                                            {ac}
                                            {i < action.length - 1 && <em className="kanban-item-action-split" />}
                                        </li>
                                    ))
                                }
                            </ul>}
                        </div>
                    </div>
                    {/* {extra && <div className="kanban-item-extra">
                        {extra}
                    </div>} */}

                </div>
                <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@v57y3l`} />
            </div>
        )
    }


    getManagers = () => {
        const { managerid, managername, managericon, islandmark, value, canAddTask, status } = this.props;
        let managers = [];
        if (managerid && managerid.length > 1) {
            if (this.state.show) {
                managers.push(
                    <div className="kanban-item-icon" key={"other"}>
                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@l76xfn`} type="circle-o-right" onClick={(e) => { this.setState({ show: !this.state.show }), e.stopPropagation(); }} />
                    </div>
                )
            } else {
                managers.push(
                    <div className="kanban-item-icon" key={"other"}>
                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@htucum`} type="circle-o-left" onClick={(e) => { this.setState({ show: !this.state.show }), e.stopPropagation(); }} />
                    </div>
                )
            }
        }
        if (canAddTask && status==0) {
            managers.push(<div className="kanban-item-landmark" >
                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@1g44cl`} placement="bottom" title={islandmark == "1" ? getLabel('387701',"取消里程碑任务") : getLabel('387702',"设为里程碑任务")}>
                    <span className="icon-coms-Flag" style={{ color: islandmark == "1" ? "#2db7f5" : "" }} onClick={(e) => { this.setLandMark(value, islandmark == "1" ? "0" : "1", e); }} />
                </Tooltip>
            </div>)
        }else{
            managers.push(<div className="kanban-item-landmark" >
                <span className="icon-coms-Flag" style={{ color: islandmark == "1" ? "#2db7f5" : "" }}  />
        </div>)
        }


        this.state.show && managerid && managerid.length > 0 && managerid.map((m, i) => {
            managers.push(<div className="kanban-item-manager" key={i}>
                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@9q28mz@${i}`} placement="bottom" title={managername[i]}>
                    <a href={'javaScript:openhrm(' + m + ');'} onClick={e => window.pointerXY(e)} >
                        <img src={managericon[i]} className="kanban-item-manager-img" />
                    </a>
                </Tooltip>
            </div>)
        })
        !this.state.show && managerid && managerid.length > 0 &&
            managers.push(<div className="kanban-item-manager" key={0}>
                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@17g0gh`} placement="bottom" title={managername[0]}>
                    <a href={'javaScript:openhrm(' + managerid[0] + ');'} onClick={e => window.pointerXY(e)} >
                        <img src={managericon[0]} className="kanban-item-manager-img" />
                    </a>
                </Tooltip>
            </div>)




        return managers;
    }
}