'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _desc, _value, _class; /**
                            * Created by geweimin on 17/6/12.
                            */
/* eslint-disable */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _coreDecorators = require('core-decorators');

var _arrow = require('../../../asset/arrow.svg');

var _arrow2 = _interopRequireDefault(_arrow);

var _user_normal = require('../../../asset/user_normal.png');

var _user_normal2 = _interopRequireDefault(_user_normal);

var _massage = require('../../../asset/massage.svg');

var _massage2 = _interopRequireDefault(_massage);

var _components = require('../../../components');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
  var desc = {};
  Object['ke' + 'ys'](descriptor).forEach(function (key) {
    desc[key] = descriptor[key];
  });
  desc.enumerable = !!desc.enumerable;
  desc.configurable = !!desc.configurable;

  if ('value' in desc || desc.initializer) {
    desc.writable = true;
  }

  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
    return decorator(target, property, desc) || desc;
  }, desc);

  if (context && desc.initializer !== void 0) {
    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
    desc.initializer = undefined;
  }

  if (desc.initializer === void 0) {
    Object['define' + 'Property'](target, property, desc);
    desc = null;
  }

  return desc;
}

var TaskList = (_class = function (_React$Component) {
  _inherits(TaskList, _React$Component);

  function TaskList(props) {
    _classCallCheck(this, TaskList);

    var _this = _possibleConstructorReturn(this, (TaskList.__proto__ || Object.getPrototypeOf(TaskList)).call(this, props));

    _this.state = {};
    return _this;
  }

  _createClass(TaskList, [{
    key: 'componentDidMount',
    value: function 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();
    }
  }, {
    key: 'dealSvgWrapper',
    value: function dealSvgWrapper() {
      var _this2 = this;

      var radius = 5;
      this.props.taskList.forEach(function (item, i) {
        var itemHeight = document.getElementsByClassName("activityInfoItem")[i].clientHeight;
        _this2.timeLine.push({ type: 'circle', y: itemHeight * i + 14 });
        if (item.endTime) {
          _this2.timeLine.push({
            type: 'line',
            startY: _this2.timeLine[_this2.timeLine.length - 1].y + radius,
            endY: _this2.timeLine[_this2.timeLine.length - 1].y + itemHeight - 56 + 14 + 14 - radius
          });
          _this2.timeLine.push({ type: 'circle', y: _this2.timeLine[_this2.timeLine.length - 1].endY + radius });
        } else {
          _this2.timeLine.push({
            type: 'line',
            startY: _this2.timeLine[_this2.timeLine.length - 1].y + radius,
            endY: _this2.timeLine[_this2.timeLine.length - 1].y + itemHeight - 14
          });
        }
      });
      // const timeLineCanvas = this.refs.timeLineCanvas;
      var timeLineCanvas = document.getElementById("timeLineCanvas");
      var canvasBox = document.getElementById("canvasBox");
      var activityInfoContent = document.getElementById("activityInfoContent");
      var ctx = timeLineCanvas.getContext("2d");
      ctx.canvas.width = canvasBox.clientWidth;
      canvasBox.style.height = activityInfoContent.clientHeight + 'px';
      ctx.canvas.height = canvasBox.clientHeight;
      var lineArr = [];
      this.timeLine && this.timeLine.forEach(function (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(function (item) {
        ctx.beginPath();
        ctx.strokeStyle = '#CCCCCC';
        ctx.moveTo(20, item.startY);
        ctx.lineTo(20, item.endY);
        ctx.stroke();
        ctx.closePath();
      });
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.dealSvgWrapper();
    }
  }, {
    key: 'render',
    value: function render() {
      var taskList = this.props.taskList;
      for (var i = 0; i < 6; i++) {
        taskList.push(this.props.taskList[0]);
        taskList[i].afterAssigneeName = '谁打电话设计费含税单价开发环境肯定是飞机客户反馈绝对是';
      }
      this.timeLine = [];
      if (this.props.taskList.length === 0) {
        return _react2.default.createElement(
          'div',
          { className: 'activityInfoEmpty' },
          '\u6682\u65E0\u8FDB\u5EA6\u6D41\u8F6C\uFF01'
        );
      }
      return _react2.default.createElement(
        'div',
        { style: { display: 'flex' } },
        _react2.default.createElement(
          'div',
          { id: 'canvasBox', style: { width: 40 } },
          _react2.default.createElement('canvas', { id: 'timeLineCanvas', ref: 'timeLineCanvas' })
        ),
        _react2.default.createElement(
          'div',
          { style: { width: 'calc(100% - 40px)' } },
          taskList.map(function (item, i) {
            return _react2.default.createElement(
              'div',
              { className: 'activityInfoItem' },
              _react2.default.createElement(
                'span',
                { style: { lineHeight: '28px' } },
                item.startTime,
                '  \u5F00\u59CB\u627F\u529E\u65F6\u95F4'
              ),
              _react2.default.createElement(
                'div',
                { style: { height: 'calc(100% - 56px)' } },
                _react2.default.createElement(
                  'div',
                  { className: 'activityInfoItemCard', style: { height: 58, border: '1px solid #C1C1C1', borderRadius: 4, marginBottom: 4 } },
                  item.frontAssigneeName ? _react2.default.createElement(
                    'div',
                    null,
                    _react2.default.createElement(
                      'div',
                      { style: { lineHeight: '28px', marginLeft: 10 } },
                      '\u524D\u624B\u4FE1\u606F\uFF1A'
                    ),
                    _react2.default.createElement(
                      'div',
                      { style: { height: 'calc(100% - 28px)', display: 'flex', alignItems: 'center', marginLeft: 30, fontSize: 15 } },
                      item.frontAssigneeName,
                      '\uFF0C',
                      item.frontRoleName
                    )
                  ) : _react2.default.createElement(
                    'span',
                    { style: { lineHeight: '60px', marginLeft: 10, fontSize: 15 } },
                    '\u6CA1\u6709\u524D\u624B\u4FE1\u606F\uFF01'
                  )
                ),
                _react2.default.createElement(
                  'div',
                  { style: { height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
                  _react2.default.createElement('img', { src: _arrow2.default })
                ),
                _react2.default.createElement(
                  'div',
                  { className: 'activityInfoItemCard', style: { height: 58, display: 'flex', border: '1px solid #C1C1C1', borderRadius: 4 } },
                  _react2.default.createElement(
                    'div',
                    { style: { width: 64, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
                    _react2.default.createElement('img', { src: _user_normal2.default })
                  ),
                  _react2.default.createElement(
                    'div',
                    { style: { width: 'calc(100% - 64px)' } },
                    _react2.default.createElement(
                      'div',
                      { style: { height: '50%', display: 'flex', alignItems: 'center' } },
                      _react2.default.createElement(
                        'i',
                        null,
                        item.assigneeName
                      )
                    ),
                    _react2.default.createElement(
                      'div',
                      { style: { height: '50%', display: 'flex', alignItems: 'center' } },
                      _react2.default.createElement(
                        'i',
                        null,
                        item.deptName,
                        '\uFF0C',
                        item.roleName
                      )
                    )
                  )
                ),
                _react2.default.createElement(
                  'div',
                  { style: { height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
                  _react2.default.createElement('img', { src: _arrow2.default })
                ),
                _react2.default.createElement(
                  'div',
                  { className: 'activityInfoItemCard', style: { minHeight: 58, border: '1px solid #C1C1C1', borderRadius: 4, marginTop: 4 } },
                  item.endTime ? item.afterAssigneeName ? _react2.default.createElement(
                    'div',
                    null,
                    _react2.default.createElement(
                      'div',
                      { style: { lineHeight: '28px', marginLeft: 10 } },
                      '\u540E\u624B\u4FE1\u606F\uFF1A'
                    ),
                    _react2.default.createElement(
                      'div',
                      { style: { height: 'calc(100% - 28px)', display: 'flex', alignItems: 'center', marginLeft: 30, fontSize: 15 } },
                      item.afterAssigneeName,
                      '\uFF0C',
                      item.afterRoleName
                    )
                  ) : _react2.default.createElement(
                    'span',
                    { style: { lineHeight: '56px', marginLeft: 10, fontSize: 15 } },
                    '\u6CA1\u6709\u540E\u624B\u4FE1\u606F'
                  ) : _react2.default.createElement(
                    'span',
                    { style: { lineHeight: '56px', marginLeft: 10, fontSize: 15 } },
                    '\u5F85\u5BA1\u6838...'
                  )
                )
              ),
              _react2.default.createElement(
                'div',
                { style: { height: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
                item.endTime && _react2.default.createElement(
                  'span',
                  null,
                  item.endTime,
                  '  \u7ED3\u675F\u627F\u529E\u65F6\u95F4'
                ),
                item.endTime && item.frontAssigneeName && _react2.default.createElement(
                  'div',
                  { style: { display: 'flex', alignItems: 'center' } },
                  _react2.default.createElement('img', { style: { width: 18, height: 18 }, src: _massage2.default }),
                  _react2.default.createElement(_components.ExtendButton, _extends({
                    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: '\u67E5\u770B\u610F\u89C1',
                    noneIcon: true,
                    query: { processInstanceId: item.processInstanceId, taskId: item.taskId, other: 'taskHistory' }
                  }))
                )
              )
            );
          })
        )
      );
    }
  }]);

  return TaskList;
}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'dealSvgWrapper', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'dealSvgWrapper'), _class.prototype)), _class);
exports.default = TaskList;