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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { BizDetailLayout } from '@zgfe/business-lib';
import { Button, Spin, Tabs } from 'antd';
import moment from 'moment';
import React, { useEffect, useState } from 'react';
import JobHistory from '../../../components/jobHistory';
import apis from '../../../constants/api';
import request from '../../../utils/ajax';
import VisualOutputTable from './output';
import VisualFlow from '../../../components/flow';
import OverviewData from './panels/overview';
import './styles/index.less';
import TaskContext from '../../createJob/context';
import FlowCheckLog from '../create/configPanel/checkLog';
var CdpVisualDetail = function CdpVisualDetail(props) {
  var _task$jobData, _task$jobData2, _task$jobData3, _task$jobData4, _task$jobData5, _task$jobData6;
  var taskId = props.taskId;
  var classPrefix = 'cdp-visual-detail';
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    loading = _useState2[0],
    setLoading = _useState2[1];
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    task = _useState4[0],
    setTask = _useState4[1];
  useEffect(function () {
    queryInfo();
  }, []);
  function queryInfo() {
    setLoading(true);
    request(apis.queryVisualInfo, {
      method: 'get',
      params: {
        id: taskId
      }
    }).then(function (res) {
      if (!res) return;
      var temp = res.data;
      setTask(temp);
    }).catch(function (err) {
      console.error('获取任务详情失败', err);
    }).finally(function () {
      setLoading(false);
    });
  }
  if (loading) {
    return /*#__PURE__*/React.createElement(BizDetailLayout, {
      extra: /*#__PURE__*/React.createElement(React.Fragment, null, "\u67E5\u770B\u8BE6\u60C5")
    }, /*#__PURE__*/React.createElement(Spin, {
      className: "".concat(classPrefix, "-loading")
    }));
  }
  return /*#__PURE__*/React.createElement(TaskContext.Provider, {
    value: {
      taskId: taskId,
      mode: 'edit'
    }
  }, /*#__PURE__*/React.createElement(BizDetailLayout, {
    extra: /*#__PURE__*/React.createElement(React.Fragment, null, "\u67E5\u770B\u8BE6\u60C5"),
    onBack: props.onBack,
    width: "100%"
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "-head")
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(classPrefix, "-title")
  }, task === null || task === void 0 ? void 0 : (_task$jobData = task.jobData) === null || _task$jobData === void 0 ? void 0 : _task$jobData.name), /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "-desc")
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(classPrefix, "-item")
  }, "\u521B\u5EFA\u4EBA: ", task === null || task === void 0 ? void 0 : (_task$jobData2 = task.jobData) === null || _task$jobData2 === void 0 ? void 0 : _task$jobData2.createUser), /*#__PURE__*/React.createElement("span", {
    className: "".concat(classPrefix, "-item")
  }, "\u521B\u5EFA\u65F6\u95F4: ", moment(task === null || task === void 0 ? void 0 : (_task$jobData3 = task.jobData) === null || _task$jobData3 === void 0 ? void 0 : _task$jobData3.createTime).format('YYYY-MM-DD HH:mm:ss')), /*#__PURE__*/React.createElement("span", {
    className: "".concat(classPrefix, "-item")
  }, "\u66F4\u65B0\u6B21\u6570: ", task === null || task === void 0 ? void 0 : (_task$jobData4 = task.jobData) === null || _task$jobData4 === void 0 ? void 0 : _task$jobData4.updateTimes), /*#__PURE__*/React.createElement("span", {
    className: "".concat(classPrefix, "-item")
  }, "\u6700\u65B0\u66F4\u65B0\u65F6\u95F4:", ' ', (task === null || task === void 0 ? void 0 : (_task$jobData5 = task.jobData) === null || _task$jobData5 === void 0 ? void 0 : _task$jobData5.lastUpdateTime) ? moment(task === null || task === void 0 ? void 0 : (_task$jobData6 = task.jobData) === null || _task$jobData6 === void 0 ? void 0 : _task$jobData6.lastUpdateTime).format('YYYY-MM-DD HH:mm:ss') : '-'))), /*#__PURE__*/React.createElement(Tabs, {
    defaultActiveKey: "flows",
    size: "large",
    destroyInactiveTabPane: true,
    tabBarExtraContent: /*#__PURE__*/React.createElement(Button, {
      type: "primary",
      onClick: function onClick() {
        if (props.onEdit) props.onEdit(props.taskId);
      }
    }, "\u7F16\u8F91\u4EFB\u52A1")
  }, /*#__PURE__*/React.createElement(Tabs.TabPane, {
    tab: "\u5904\u7406\u6D41\u7A0B",
    key: "flows"
  }, /*#__PURE__*/React.createElement(VisualFlow, {
    className: "".concat(classPrefix, "-flow"),
    readonly: true,
    defaultValue: {
      lineList: task.lineList,
      nodeList: task.nodeList
    }
  })), /*#__PURE__*/React.createElement(Tabs.TabPane, {
    tab: "\u6570\u636E\u9884\u89C8",
    key: "overview"
  }, /*#__PURE__*/React.createElement(OverviewData, {
    jobId: task.jobId,
    showPagination: false
  })), /*#__PURE__*/React.createElement(Tabs.TabPane, {
    tab: "\u8FD0\u884C\u8BB0\u5F55",
    key: "history"
  }, /*#__PURE__*/React.createElement(JobHistory, null)), /*#__PURE__*/React.createElement(Tabs.TabPane, {
    tab: "\u65E5\u5FD7",
    key: "log"
  }, /*#__PURE__*/React.createElement(FlowCheckLog, {
    className: "".concat(classPrefix, "-logs"),
    jobId: task === null || task === void 0 ? void 0 : task.jobId
  }))), /*#__PURE__*/React.createElement(VisualOutputTable, {
    taskId: task === null || task === void 0 ? void 0 : task.jobId,
    jobData: task === null || task === void 0 ? void 0 : task.jobData
  })));
};
export default CdpVisualDetail;