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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { VtxImage } from '@vtx/components';
import '@vtx/components/lib/vtx-image/style/index';
import { request } from '@vtx/utils';
import { useEffect, useState } from 'react';
import { VmEmpty, VmTabs } from "../../../_components";
import Right from "../Right";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var listTaskInfo = function listTaskInfo(params) {
  return request.get('/cloud/zhzf/api/v101/case/listTaskInfo', {
    data: params
  });
};
export default (function (props) {
  var id = props.id,
    detail = props.detail;
  var _useState = useState('1'),
    _useState2 = _slicedToArray(_useState, 2),
    activeKey = _useState2[0],
    setActiveKey = _useState2[1];
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    list = _useState4[0],
    setList = _useState4[1];
  useEffect(function () {
    id && listTaskInfo({
      caseId: id
    }).then(function (res) {
      if ((res === null || res === void 0 ? void 0 : res.result) === 0) {
        setList(res.data || []);
      }
    });
  }, [id]);
  var legendList = [{
    name: '普通',
    color: '#009DFF'
  }, {
    name: '撤件',
    color: '#FF5861'
  }, {
    name: '退件',
    color: '#934BED'
  }, {
    name: '超时',
    color: '#F89A37'
  }];
  var stepColumn = [{
    name: '来件时间',
    key: 'startTime'
  }, {
    name: '办理人',
    key: 'assignUserName'
  }, {
    name: '办理时间',
    key: 'endTime'
  }, {
    name: '节点用时',
    key: 'taskTimeCost'
  }, {
    name: '节点时限',
    key: 'taskTimeLimitStr'
  }, {
    name: '累计用时',
    key: 'caseTimeCost'
  }, {
    name: '办理意见',
    key: 'comment',
    weights: 2
  }];
  var getColor = function getColor(item) {
    if (item.statusStr === 'scrap') {
      return '#ff1818';
    }
    if (item.statusStr === 'back') {
      return '#8b2dff';
    }
    if (item.overDue) {
      return '#ff9018';
    }
    return '#009DFF';
  };
  return /*#__PURE__*/_jsxs("div", {
    className: "zf-process-content",
    children: [/*#__PURE__*/_jsxs("div", {
      className: "zf-process-left",
      children: [/*#__PURE__*/_jsx("div", {
        style: {
          paddingLeft: '16px'
        },
        children: /*#__PURE__*/_jsx(VmTabs, {
          activeKey: activeKey,
          items: [{
            label: '流程节点',
            key: '1'
          }, {
            label: '流程图',
            key: '2'
          }],
          onChange: function onChange(key) {
            setActiveKey(key);
          }
        })
      }), activeKey === '1' && /*#__PURE__*/_jsx("div", {
        className: "zf-process-list",
        children: list.length ? list.map(function (item, index) {
          return /*#__PURE__*/_jsxs("div", {
            className: "zf-process-item",
            children: [/*#__PURE__*/_jsxs("div", {
              className: "zf-item-title",
              children: [/*#__PURE__*/_jsxs("div", {
                className: "zf-item-name",
                children: [/*#__PURE__*/_jsx("div", {
                  className: "zf-item-circle",
                  style: {
                    background: getColor(item)
                  }
                }), /*#__PURE__*/_jsxs("div", {
                  style: {
                    display: 'flex',
                    alignItems: 'center',
                    gap: '12px',
                    color: getColor(item)
                  },
                  children: [item.name || '--', item.overDue && /*#__PURE__*/_jsx("div", {
                    className: "vm-modal-header-wrap-left-tag",
                    style: {
                      background: 'rgba(248,154,55,0.15)'
                    },
                    children: "\u8D85\u65F6"
                  })]
                })]
              }), index === 0 && /*#__PURE__*/_jsxs("div", {
                className: "zf-process-legend",
                children: [/*#__PURE__*/_jsx("div", {
                  className: "zf-legend-title",
                  children: "\u989C\u8272\u6807\u8BC6\uFF1A"
                }), legendList.map(function (item) {
                  return /*#__PURE__*/_jsxs("div", {
                    className: "zf-legend-item",
                    children: [/*#__PURE__*/_jsx("div", {
                      className: "zf-legend-square",
                      style: {
                        background: item.color
                      }
                    }), /*#__PURE__*/_jsx("div", {
                      children: item.name
                    })]
                  }, item.name);
                })]
              })]
            }), /*#__PURE__*/_jsx("div", {
              className: "zf-item-content",
              style: {
                borderLeft: index === list.length - 1 ? 'none' : '2px solid #009dff'
              },
              children: /*#__PURE__*/_jsx("div", {
                className: "zf-item-text",
                children: stepColumn.map(function (each) {
                  return /*#__PURE__*/_jsxs("div", {
                    className: "zf-item-inner",
                    style: {
                      width: each.weights === 2 ? '100%' : '45%'
                    },
                    children: [/*#__PURE__*/_jsxs("span", {
                      className: "zf-process-label",
                      children: [each.name, "\uFF1A"]
                    }), /*#__PURE__*/_jsx("span", {
                      children: item[each.key] || '--'
                    })]
                  }, each.name);
                })
              })
            })]
          }, item.detail);
        }) : /*#__PURE__*/_jsx(VmEmpty, {})
      }), activeKey === '2' && /*#__PURE__*/_jsx("div", {
        className: "zf-process-list",
        children: /*#__PURE__*/_jsx("div", {
          className: "zf-process-img",
          children: /*#__PURE__*/_jsx(VtxImage, {
            aspectFit: true,
            alt: "\u6D41\u7A0B\u56FE",
            src: "/cloud/flowable/processInstance/generateDiagram?id=".concat(detail.processInstanceId)
          })
        })
      })]
    }), /*#__PURE__*/_jsx(Right, {
      detail: detail
    })]
  });
});