/**
 * Created by geweimin on 17/6/12.
 */
/* eslint-disable */
import React from 'react';
import { autobind } from 'core-decorators';
import arrow from '../../../asset/arrow.svg';
import user_normal from '../../../asset/user_normal.png';
import massage from '../../../asset/massage.svg';
import { ExtendButton } from '../../../components';

export default class TaskList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    // const activityInfoItems =  document.getElementsByClassName("activityInfoItem");
    // for(let i = 0; i < activityInfoItems.length; i++) {
    //   const item = activityInfoItems[i];
    //   const activityInfoItemCards = item.getElementsByClassName("activityInfoItemCard");
    //   let maxHeight = 0;
    //   for(let j = 0; j < activityInfoItemCards.length; j++) {
    //     if (parseInt(activityInfoItemCards[j].clientHeight) > maxHeight) {
    //       maxHeight = parseInt(activityInfoItemCards[j].clientHeight);
    //     }
    //   }
    //   for(let j = 0; j < activityInfoItemCards.length; j++) {
    //     activityInfoItemCards[j].style.height = maxHeight + 'px';
    //   }
    // }
    this.dealSvgWrapper();
  }

  @autobind
  dealSvgWrapper() {
    const radius = 5;
    this.props.taskList.forEach((item, i) => {
      const itemHeight =  document.getElementsByClassName("activityInfoItem")[i].clientHeight;
      this.timeLine.push({ type: 'circle', y: (itemHeight * i) + 14 });
      if (item.endTime) {
        this.timeLine.push({
          type: 'line',
          startY: this.timeLine[this.timeLine.length - 1].y + radius,
          endY: this.timeLine[this.timeLine.length - 1].y + itemHeight - 56 + 14 + 14 - radius
        });
        this.timeLine.push({ type: 'circle', y: this.timeLine[this.timeLine.length - 1].endY + radius });
      } else {
        this.timeLine.push({
          type: 'line',
          startY: this.timeLine[this.timeLine.length - 1].y + radius,
          endY: this.timeLine[this.timeLine.length - 1].y + itemHeight - 14
        });
      }
    });
    // const timeLineCanvas = this.refs.timeLineCanvas;
    const timeLineCanvas = document.getElementById("timeLineCanvas");
    const canvasBox = document.getElementById("canvasBox");
    const activityInfoContent = document.getElementById("activityInfoContent");
    const ctx = timeLineCanvas.getContext("2d");
    ctx.canvas.width = canvasBox.clientWidth;
    canvasBox.style.height = activityInfoContent.clientHeight + 'px';
    ctx.canvas.height = canvasBox.clientHeight;
    const lineArr = [];
    this.timeLine && this.timeLine.forEach((item, i) => {
      if (item.type === 'circle') {
        if (i === 0) {
          ctx.beginPath();
          ctx.arc(20, item.y, radius, 0, 2 * Math.PI);
          ctx.fillStyle = '#2B97E0';
          ctx.strokeStyle = '#2B97E0';
          ctx.fill();
          ctx.closePath();
        }
      } else {
        lineArr.push(item);
      }
    });
    lineArr.forEach(item => {
      ctx.beginPath();
      ctx.strokeStyle = '#CCCCCC';
      ctx.moveTo(20, item.startY);
      ctx.lineTo(20, item.endY);
      ctx.stroke();
      ctx.closePath();
    });
  }

  componentDidUpdate() {
    this.dealSvgWrapper();
  }

  render() {
    const taskList = this.props.taskList;
    for(let i = 0; i < 6; i++) {
      taskList.push(this.props.taskList[0]);
      taskList[i].afterAssigneeName = '谁打电话设计费含税单价开发环境肯定是飞机客户反馈绝对是'
    }
    this.timeLine = [];
    if (this.props.taskList.length === 0) {
      return (
        <div className="activityInfoEmpty">暂无进度流转！</div>
      );
    }
    return (
      <div style={{ display: 'flex' }}>
        <div id="canvasBox" style={{ width: 40 }}>
          <canvas id="timeLineCanvas" ref="timeLineCanvas" />
        </div>
        <div style={{ width: 'calc(100% - 40px)' }}>
          {taskList.map((item, i) => {
            return (
              <div className="activityInfoItem">
                <span style={{ lineHeight: '28px' }}>{item.startTime}  开始承办时间</span>
                <div style={{ height: 'calc(100% - 56px)' }}>
                  <div className="activityInfoItemCard" style={{ height: 58, border: '1px solid #C1C1C1', borderRadius: 4, marginBottom: 4 }}>
                    {item.frontAssigneeName ?
                      (
                        <div>
                          <div style={{ lineHeight: '28px', marginLeft: 10 }}>前手信息：</div>
                          <div style={{ height: 'calc(100% - 28px)', display: 'flex', alignItems: 'center', marginLeft: 30, fontSize: 15 }}>{item.frontAssigneeName}，{item.frontRoleName}</div>
                        </div>
                      ) :
                      (
                        <span style={{ lineHeight: '60px', marginLeft: 10, fontSize: 15 }}>没有前手信息！</span>
                      )
                    }
                  </div>
                  <div style={{ height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><img src={arrow} /></div>
                  <div className="activityInfoItemCard" style={{ height: 58, display: 'flex', border: '1px solid #C1C1C1', borderRadius: 4 }}>
                    <div style={{ width: 64, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                      <img src={user_normal} />
                    </div>
                    <div style={{ width: 'calc(100% - 64px)' }}>
                      <div style={{ height: '50%', display: 'flex', alignItems: 'center' }}><i>{item.assigneeName}</i></div>
                      <div style={{ height: '50%', display: 'flex', alignItems: 'center' }}><i>{item.deptName}，{item.roleName}</i></div>
                    </div>
                  </div>
                  <div style={{ height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><img src={arrow} /></div>
                  <div className="activityInfoItemCard" style={{ minHeight: 58, border: '1px solid #C1C1C1', borderRadius: 4, marginTop: 4 }}>
                    {item.endTime ?
                      (item.afterAssigneeName ?
                        (
                          <div>
                            <div style={{ lineHeight: '28px', marginLeft: 10 }}>后手信息：</div>
                            <div style={{ height: 'calc(100% - 28px)', display: 'flex', alignItems: 'center', marginLeft: 30, fontSize: 15 }}>{item.afterAssigneeName}，{item.afterRoleName}</div>
                          </div>
                        ) :
                        (<span style={{ lineHeight: '56px', marginLeft: 10, fontSize: 15 }}>没有后手信息</span>)) :
                      (
                        <span style={{ lineHeight: '56px', marginLeft: 10, fontSize: 15 }}>待审核...</span>
                      )
                    }
                  </div>
                </div>
                <div style={{ height: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  {item.endTime && (<span>{item.endTime}  结束承办时间</span>)}
                  {item.endTime && item.frontAssigneeName && (
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <img style={{ width: 18, height: 18 }} src={massage} />
                      <ExtendButton
                        type="link"
                        inline={false}
                        buttonProps={{ type: 'ghost' }}
                        {...{
                          buttonDescription: "查看意见",
                          hideIfReadonly: false,
                          interactiveType: "MODAL",
                          messagePromptType: "NONE",
                          actionLink: "/Api/BPM/RetrieveSpecificTaskIdFormValue",
                          nextActionLink: null,
                          templateType: "Detail",
                          actionName: null,
                          buttonCode: "creditLineAssessmentApplyInfo_Detail_render_In_creditLineAssessmentApplyInfo_Detail",
                          transmitParameters: [
                            {
                              name: "processInstanceId"
                            },{
                              name: "taskId"
                            },{
                              name: "other"
                            }
                          ],
                          bindParameterType: null,
                          bindParameters: null,
                          actionType: "ROUTER",
                          relatedItems: null,
                          requestSuccessDesc: null,
                          isTransmitAllParameters: false,
                          relatedData: "NONE"
                        }}
                        disabled={false}
                        key='查看意见'
                        noneIcon={true}
                        query={{ processInstanceId: item.processInstanceId, taskId: item.taskId, other: 'taskHistory' }}
                      />
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
