import React from 'react';
import { Row, Tooltip, Icon } from 'antd';
import { WeaLocaleProvider } from 'ecCom';
import QueueAnim from 'rc-queue-anim';
const getLabel = WeaLocaleProvider.getLabel;
//import $ from "jquery";

export default class Item extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
    }

    componentDidMount() {
        //新增Column元素，当前元素渲染到页面上后将元素添加到muuri
        const { data, columnGrid } = this.props;
        if (data.iscreate && data.iscreate == '1') {
            const element = document.getElementById('item_' + data.id);
            let item = columnGrid.add([element], { index: 0 });
            let scrollElement = item[0].getGrid()._element.parentNode;
            if (scrollElement.scrollTop != 0) {
                scrollElement.scrollTop = 0;
            }
        }
    }
    onTaskClick = (value, e) => {
        this.props.onTaskClick(value);
        e.stopPropagation();
    }

    render() {
        const { data, description, prefix, finish, colors, allnum, finishnum } = this.props;
        return <div id={"item_" + data.id} finish={finish} className="board-item muuri-item muuri-item-shown">
            <div className="board-item-finish">
                <div className="status" style={{ backgroundColor: colors, height: finish + "%" }}> </div>
            </div>
            <div className="board-item-content" style={{ cursor: 'move' }}>
                <div className="header">
                    <div className="title" title={data.title}  onClick={(e) => { this.onTaskClick(data.id, e); }}>
                        {!this.state.show && data.title}
                    </div>
                    <div className="manager-list">
                        <QueueAnim ecId={`${this && this.props && this.props.ecId || ''}_QueueAnim@31paih`} delay={10} className="queue-simple" type={["right", "right"]}>
                            {this.getManagers()}
                        </QueueAnim>
                    </div>
                </div>
                <div className="content" style={{ display: this.state.show ? "none" : "" }}>
                    {
                        prefix !== "" &&
                        <span className="description1" style={{ color: "#df5263" }}>
                            {prefix}
                        </span>}
                </div>
                <div className="content" style={{ display: this.state.show ? "none" : "" }}>
                    {
                        description !== "" &&
                        <span className="description1" style={{ color: "#6D6AEC" }}>
                            {description}
                        </span>}
                    {
                        allnum > 0 &&
                        <span >
                            {getLabel('2098', "子任务")}&nbsp;{<span style={{ color: "#22d7bb" }}>{finishnum}</span>}{"/" + allnum}
                        </span>
                    }

                </div>
            </div>
        </div>
    }

    getManagers = () => {
        const { managerid, managername, managericon, islandmark, searchType, canAddTask, status, data, showLandMark } = this.props;
        let managers = [];
        //任务负责人展开图标
        if (managerid && managerid.length > 1) {
            if (this.state.show) {
                managers.push(
                    <div className="item-icon" key={"other"}>
                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@tdpqey@`} type="circle-o-right" onClick={(e) => { this.setState({ show: !this.state.show }), e.stopPropagation(); }} />
                    </div>
                )
            } else {
                managers.push(
                    <div className="item-icon" key={"other"}>
                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@frm9xp`} type="circle-o-left" onClick={(e) => { this.setState({ show: !this.state.show }), e.stopPropagation(); }} />
                    </div>
                )
            }
        }
        //明细查看
        // managers.push(<div className="detail" >
        // <Tooltip placement="bottom" title={getLabel('382624', '查看明细')}>
        //     <span className="icon-coms-Detailed" onClick={(e) => { this.onTaskClick(data.id, e); }} />
        // </Tooltip>
        // </div>)
        //里程碑设置
        if(showLandMark){
            if (canAddTask && status == 0) {
                managers.push(<div className="landmark" >
                    <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@0k3lhz`} placement="bottom" title={islandmark == "1" ? getLabel('387701', "取消里程碑任务") : getLabel('387702', "设为里程碑任务")}>
                        <span className="icon-coms-Flag" style={{ color: islandmark == "1" ? "#2db7f5" : "" }} onClick={(e) => { this.setLandMark(data.id, islandmark == "1" ? "0" : "1", e); }} />
                    </Tooltip>
                </div>)
            } else {
                managers.push(<div className="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="manager" key={i}>
                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@d3py5n@${i}`} placement="bottom" title={managername[i]}>
                    <a href={'javaScript:openhrm(' + m + ');'} onClick={e => window.pointerXY(e)} >
                        <img src={managericon[i]} className="manager-img" />
                    </a>
                </Tooltip>
            </div>)
        })
        !this.state.show && managerid && managerid.length > 0 &&
            managers.push(<div className="manager" key={0}>
                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@gbo78w`} placement="bottom" title={managername[0]}>
                    <a href={'javaScript:openhrm(' + managerid[0] + ');'} onClick={e => window.pointerXY(e)} >
                        <img src={managericon[0]} className="manager-img" />
                    </a>
                </Tooltip>
            </div>)




        return managers;
    }

    setLandMark = (id, value, e) => {
        this.props.setLandMark(id, value);
        e.stopPropagation();
    }
}