import "choerodon-ui/pro/lib/progress/style";
import _Progress from "@hzero-front-ui/c7n-ui/lib/ProgressPro";
import "choerodon-ui/pro/lib/icon/style";
import _Icon from "choerodon-ui/pro/lib/icon";

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom';
import { axios } from '@choerodon/boot';
import { observer } from 'mobx-react-lite';
import { injectIntl, FormattedMessage } from 'react-intl';
import { reduce, map } from 'lodash';
import "./index.less";
import "../index.less";
import IssueDescription from "./IssueDescription";
import Loading from "../../../../../components/loading";
import TimePopover from "../../../../../components/timePopover";
import { handlePromptError } from "../../../../../utils";

var QuillDeltaToHtmlConverter = require('quill-delta-to-html');

var STATUS_ICON = {
  done: {
    icon: 'check_circle',
    color: '#1bb06e',
    bgColor: ''
  },
  todo: {
    icon: 'watch_later',
    color: '#ffae02',
    bgColor: ''
  },
  doing: {
    icon: 'timelapse',
    color: '#4a93fc',
    bgColor: ''
  }
};

function IssueDetail(props) {
  var issueId = props.issueId,
      orgId = props.orgId,
      projectId = props.projectId,
      formatMessage = props.intl.formatMessage;
  useEffect(function () {
    getIssueTime();
    getIssueData();
  }, [projectId]);

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      issueTime = _useState2[0],
      setIssueTime = _useState2[1];

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      issue = _useState4[0],
      setIssue = _useState4[1];

  function getIssueData() {
    axios.get("/agile/v1/projects/".concat(projectId, "/issues/").concat(issueId, "?organizationId=").concat(orgId)).then(function (res) {
      if (handlePromptError(res)) {
        setIssue(res);
      }
    });
  }

  function getIssueTime() {
    axios.get("/agile/v1/projects/".concat(projectId, "/work_log/issue/").concat(issueId)).then(function (res) {
      if (handlePromptError(res)) {
        setIssueTime(res);
      }
    });
  }
  /**
   * 获取头像的首字母
   * @param name
   */


  var getName = function getName(name) {
    var p = /[\u4e00-\u9fa5]/;
    var str = p.exec(name);
    var names = '';

    if (str) {
      names = str[0];
    } else {
      names = name.slice(0, 1);
    }

    return names;
  };
  /**
   * 富文本编辑转换
   * @param description
   * @returns {*}
   */


  var text2Delta = function text2Delta(description) {
    if (description && description.indexOf('[') === 0 && description[description.length - 1] === ']') {
      return JSON.parse(description);
    }

    return description || '';
  };
  /**
   * 将quill特有的文本结构转为html
   * @param {*} description
   */


  var delta2Html = function delta2Html(description) {
    var deltas = text2Delta(description);
    var converter = new QuillDeltaToHtmlConverter(deltas, {});
    var text = converter.convert();

    if (text.substring(0, 3) === '<p>') {
      return text.substring(3);
    } else {
      return text;
    }
  };

  var time = reduce(map(issueTime, 'workTime'), function (sum, v) {
    return sum + (v || 0);
  }, 0);
  var delta = issue ? delta2Html(issue.description) : '';
  return /*#__PURE__*/React.createElement("div", null, issue ? /*#__PURE__*/React.createElement("div", {
    className: "c7n-branch-issue"
  }, /*#__PURE__*/React.createElement("section", {
    className: "branch-issue-name"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "issue-num"
  }, issue.issueNum, " "), /*#__PURE__*/React.createElement("p", {
    className: "issue-summary"
  }, issue.summary)), /*#__PURE__*/React.createElement("section", {
    className: "branch-issue-status"
  }, /*#__PURE__*/React.createElement("div", {
    className: "issue-status"
  }, /*#__PURE__*/React.createElement("span", {
    className: "issue-status-icon-large"
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      width: 30,
      height: 30,
      borderRadius: '50%',
      background: STATUS_ICON[issue.statusVO.type] ? "".concat(STATUS_ICON[issue.statusVO.type].color, "33") : '#ffae0233',
      marginRight: 12,
      flexShrink: 0,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(_Icon, {
    type: STATUS_ICON[issue.statusVO.type] ? STATUS_ICON[issue.statusVO.type].icon : 'timelapse',
    style: {
      fontSize: '24px',
      color: STATUS_ICON[issue.statusVO.type] ? STATUS_ICON[issue.statusVO.type].color : '#ffae02'
    }
  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "issue-status-title"
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "network.column.status"
  })), /*#__PURE__*/React.createElement("div", {
    className: "issue-status-text",
    style: {
      color: issue.statusColor
    }
  }, issue.statusVO.name))), /*#__PURE__*/React.createElement("div", {
    className: "issue-status"
  }, /*#__PURE__*/React.createElement("span", {
    className: "issue-status-icon-small",
    style: {
      backgroundColor: 'rgba(77, 144, 254, 0.2)'
    }
  }, /*#__PURE__*/React.createElement("i", {
    className: "icon icon-flag",
    style: {
      color: '#3575DF'
    }
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "issue-status-title"
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "branch.issue.priority"
  })), /*#__PURE__*/React.createElement("div", {
    className: "issue-status-text",
    style: {
      color: issue.priorityVO.colour
    }
  }, issue.priorityVO.name))), /*#__PURE__*/React.createElement("div", {
    className: "issue-status"
  }, /*#__PURE__*/React.createElement("span", {
    className: "issue-status-icon-small",
    style: {
      backgroundColor: 'rgb(216, 216, 216)'
    }
  }, /*#__PURE__*/React.createElement("i", {
    className: "icon icon-directions_run"
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "issue-status-title"
  }, formatMessage({
    id: 'branch.issue.sprint'
  })), /*#__PURE__*/React.createElement("div", {
    className: "issue-status-text"
  }, issue.activeSprint ? issue.activeSprint.sprintName : formatMessage({
    id: 'branch.issue.no'
  })))), issue.storyPoints ? /*#__PURE__*/React.createElement("div", {
    className: "issue-status"
  }, /*#__PURE__*/React.createElement("span", {
    className: "issue-status-icon-small",
    style: {
      backgroundColor: 'rgb(216, 216, 216)'
    }
  }, /*#__PURE__*/React.createElement("i", {
    className: "icon icon-date_range"
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "issue-status-title"
  }, formatMessage({
    id: 'branch.issue.story.point'
  })), /*#__PURE__*/React.createElement("div", {
    className: "issue-status-text"
  }, issue.storyPoints, formatMessage({
    id: 'branch.issue.story.point_p'
  })))) : null, /*#__PURE__*/React.createElement("div", {
    className: "issue-status"
  }, /*#__PURE__*/React.createElement("span", {
    className: "issue-status-icon-small",
    style: {
      backgroundColor: 'rgb(216, 216, 216)'
    }
  }, /*#__PURE__*/React.createElement("i", {
    className: "icon icon-event_note"
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "issue-status-title"
  }, formatMessage({
    id: 'branch.issue.remainTime'
  })), /*#__PURE__*/React.createElement("div", {
    className: "issue-status-text"
  }, issue.remainingTime ? "".concat(issue.remainingTime).concat(formatMessage({
    id: 'branch.issue.hour'
  })) : formatMessage({
    id: 'branch.issue.no'
  }))))), /*#__PURE__*/React.createElement("section", {
    className: "branch-issue-detail"
  }, /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-head-wrapper"
  }, /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-head"
  }, /*#__PURE__*/React.createElement("i", {
    className: "icon icon-error_outline"
  }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "detail"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-head-hr"
  })), /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-tr"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "issue-detail-content-title"
  }, formatMessage({
    id: 'branch.issue.module'
  }), ":"), issue.componentIssueRelVOList.length ? issue.componentIssueRelVOList.map(function (module) {
    return /*#__PURE__*/React.createElement("span", {
      key: module.name,
      className: "issue-detail-module-value"
    }, module.name, "".concat(issue.componentIssueRelVOList.length > 1 ? ',' : ''));
  }) : '无'), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "issue-detail-content-title"
  }, formatMessage({
    id: 'branch.issue.label'
  }), ":"), issue.labelIssueRelVOList.length ? issue.labelIssueRelVOList.map(function (label) {
    return /*#__PURE__*/React.createElement("span", {
      key: label.labelName,
      className: "issue-detail-label-value"
    }, label.labelName);
  }) : formatMessage({
    id: 'branch.issue.no'
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "issue-detail-content-title"
  }, formatMessage({
    id: 'branch.issue.fixVer'
  }), ":"), issue.versionIssueRelVOList.length ? issue.versionIssueRelVOList.map(function (label) {
    return /*#__PURE__*/React.createElement("span", {
      className: "issue-detail-module-value"
    }, label.relationType === 'fix' ? label.name : formatMessage({
      id: 'branch.issue.no'
    }), "".concat(issue.versionIssueRelVOList.length > 1 ? ',' : ''));
  }) : '无'), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "issue-detail-content-title"
  }, formatMessage({
    id: 'branch.issue.epic'
  }), ":"), issue.epicName ? /*#__PURE__*/React.createElement("span", {
    className: "issue-detail-epic-value"
  }, issue.epicName) : formatMessage({
    id: 'branch.issue.no'
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "issue-detail-content-title"
  }, formatMessage({
    id: 'branch.issue.workTime'
  }), ":"), /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-time"
  }, /*#__PURE__*/React.createElement(_Progress, {
    percent: time ? time * 100 / (time + issue.remainingTime && issue.remainingTime) : 0,
    showInfo: false,
    status: "success"
  })), /*#__PURE__*/React.createElement("span", null, "".concat(time, "h/").concat(time + issue.remainingTime && issue.remainingTime, "h")))), /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-tr"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
    className: "issue-detail-title-bold"
  }, formatMessage({
    id: 'branch.issue.person'
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "issue-detail-content-title",
    style: {
      marginLeft: 0
    }
  }, formatMessage({
    id: 'branch.issue.reporter'
  }), "\uFF1A"), /*#__PURE__*/React.createElement("div", {
    className: "issue-user-img",
    style: {
      backgroundImage: "url(".concat(issue.reporterImageUrl, ")")
    }
  }, !issue.reporterImageUrl && issue.reporterName && getName(issue.reporterName)), /*#__PURE__*/React.createElement("span", {
    className: "issue-detail-content-title",
    style: {
      marginLeft: 0
    }
  }, issue.reporterName)), /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-content-title",
    style: {
      marginLeft: 0
    }
  }, formatMessage({
    id: 'branch.issue.assignee'
  }), "\uFF1A"), issue.assigneeImageUrl ? /*#__PURE__*/React.createElement("div", {
    className: "issue-user-img",
    style: {
      backgroundImage: "url(".concat(issue.assigneeImageUrl, ")")
    }
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, issue.assigneeName ? /*#__PURE__*/React.createElement("div", {
    className: "issue-user-img"
  }, getName(issue.assigneeName)) : formatMessage({
    id: 'branch.issue.no'
  })), /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-content-title",
    style: {
      marginLeft: 0,
      display: 'inline-block'
    }
  }, issue.assigneeName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
    className: "issue-detail-title-bold"
  }, formatMessage({
    id: 'branch.issue.date'
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "issue-detail-content-title",
    style: {
      marginLeft: 0
    }
  }, formatMessage({
    id: 'branch.issue.createTime'
  }), "\uFF1A"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'inline-block'
    }
  }, /*#__PURE__*/React.createElement(TimePopover, {
    content: issue.creationDate
  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "issue-detail-content-title",
    style: {
      marginLeft: 0
    }
  }, formatMessage({
    id: 'branch.issue.updateTime'
  }), ":"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'inline-block'
    }
  }, /*#__PURE__*/React.createElement(TimePopover, {
    content: issue.lastUpdateDate
  }))))))), /*#__PURE__*/React.createElement("section", {
    className: "branch-issue-description"
  }, /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-head-wrapper",
    style: {
      marginTop: 22
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-head"
  }, /*#__PURE__*/React.createElement("i", {
    className: "icon icon-subject"
  }), /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "template.des"
  })), /*#__PURE__*/React.createElement("div", {
    className: "issue-detail-head-hr"
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      marginLeft: 30
    }
  }, /*#__PURE__*/React.createElement(IssueDescription, {
    data: delta
  })))) : /*#__PURE__*/React.createElement(Loading, {
    display: true
  }));
}

export default withRouter(injectIntl(observer(IssueDetail)));