import React from 'react';
import PropTypes from 'prop-types';
import { Col, Tag, Timeline } from 'antd';
import * as bpmService from '../../services/common/bpm';
import { dataUtils } from '../../utils';

const colors = {
  submit: '#108ee9',
  passed: '#00a854',
  reject: '#f04134',
  coutine: '#00ff00',
  current: '#ffa500',
  disable: '#4d4d4d',
  notify: '#b3ee3a',
};

const badgeStyle = {
  marginLeft: '8px',
  width: 20,
  height: 20,
  borderRadius: 100,
  border: '3px solid #00a854',
};

class BpmTrace extends React.Component {
  componentWillMount = () => {
    this.fetchData();
  };
  fetchData = () => {
    this.setState({ fetching: true });
    bpmService.getTrace(this.props.id).then((data) => {
      if (data.success) {
        this.setState({
          events: data.data,
          fetching: false,
        });
      } else {
        throw data;
        ;
      }
    });
  };
  renderColor = (state) => {
    if (state === 'SUBMITTED') {
      return colors.submit;
    } else if (state === 'REJECTED') {
      return colors.reject;
    } else if (state === 'APPROVED') {
      return colors.passed;
    } else if (state === 'CONTINUED') {
      return colors.coutine;
    } else if (state === 'DISABLED') {
      return colors.disable;
    } else if (state === 'NOTIFIED') {
      return colors.notify;
    } else {// 当前节点
      return colors.current;
    }
  };

  resultName = {
    'SUBMITTED': '提交',
    'REJECTED': '拒绝',
    'APPROVED': '通过',
    'CONTINUED': '继续',
    'DISABLED': '作废',
    'NOTIFIED': '知会',
  };

  renderItem = (event) => {
    return (
      <Timeline.Item key={event.id} color={this.renderColor(event.result)}>
        {event.result !== null ? <Tag color={this.renderColor(event.result)}>{this.resultName[event.result]}</Tag> :
          <Tag color={this.renderColor(event.result)}>处理中</Tag>}
        {event.taskName && <Tag>{event.taskName}</Tag>}
        {event.assigneeName && <Tag>{event.assigneeName}</Tag>}
        {event.advice && <Tag>{event.advice}</Tag>}
        {event.endTime !== null ?
          <Tag style={{ position: 'absolute', right: 0 }}>{dataUtils.dtm(event.endTime)}</Tag> :
          <Tag style={{ position: 'absolute', right: 0 }}>当前</Tag>}
      </Timeline.Item>
    );
  };

  constructor(props) {
    super(props);

    this.state = {
      events: [],
      fetching: false,
    };
  }

  render() {
    let { events } = this.state;
    const { id } = this.props;

    if (events.filter(e => e.modifyTime === null).length && events.length) {
      const tail = events.slice(events.length - 1);
      const head = events.slice(0, events.length - 1);
      events = tail.concat(head);
    }

    // events && (events = events.unshift(events.slice(events.length - 1)).slice(1, events.length - 1));

    return (
      <div>
        {id !== null ? [<div key={1} style={{ display: 'flex', marginTop: 30, marginBottom: 30 }}>
            <div>
              <span style={{ fontSize: 14 }}>图例:</span>
            </div>

            <div
              style={{
                ...badgeStyle,
                color: colors.submit,
                borderColor: colors.submit,
              }}
            />

            <div>
              <span style={{ fontSize: 14 }}>提交</span>
            </div>

            <div
              style={{
                ...badgeStyle,
                color: colors.passed,
                borderColor: colors.passed,
              }}/>

            <div>
              <span style={{ fontSize: 14 }}>通过</span>
            </div>

            <div
              style={{
                ...badgeStyle,
                color: colors.coutine,
                borderColor: colors.coutine,
              }}/>

            <div>
              <span style={{ fontSize: 14 }}>继续</span>
            </div>

            <div
              style={{
                ...badgeStyle,
                color: colors.current,
                borderColor: colors.current,
              }}/>

            <Col>
              <span style={{ fontSize: 14 }}>处理中</span>
            </Col>

            <div
              style={{
                ...badgeStyle,
                color: colors.reject,
                borderColor: colors.reject,
              }}
            />

            <div>
              <span style={{ fontSize: 14 }}>拒绝</span>
            </div>

            <div
              style={{
                ...badgeStyle,
                color: colors.disable,
                borderColor: colors.disable,
              }}/>

            <div>
              <span style={{ fontSize: 14 }}>作废</span>
            </div>

            <div
              style={{
                ...badgeStyle,
                color: colors.notify,
                borderColor: colors.notify,
              }}/>

            <div>
              <span style={{ fontSize: 14 }}>知会</span>
            </div>

          </div>,

            <Timeline key="timeline">
              {events.map(event => this.renderItem(event))}
            </Timeline>]
          : '未找到流程信息'
        }
      </div>
    );
  }
}

BpmTrace.propTypes = {
  id: PropTypes.string,
};

export default BpmTrace;
