import "choerodon-ui/lib/collapse/style";
import _Collapse from "choerodon-ui/lib/collapse";
import React, { Fragment, useEffect } from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { observer } from 'mobx-react-lite';
import map from 'lodash/map';
import { TabCode } from '@choerodon/master';
import { useBatchDetailStore } from "./stores";
import MouserOverWrapper from "../../../../components/MouseOverWrapper";
import "./index.less";
var Panel = _Collapse.Panel;
export default injectIntl(observer(function (props) {
  var _useBatchDetailStore = useBatchDetailStore(),
      batchDetailDs = _useBatchDetailStore.batchDetailDs,
      intlPrefix = _useBatchDetailStore.intlPrefix,
      prefixCls = _useBatchDetailStore.prefixCls,
      formatMessage = _useBatchDetailStore.intl.formatMessage,
      search = _useBatchDetailStore.location.search,
      history = _useBatchDetailStore.history;

  function getPanelHeader(record) {
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-detail-batch-collapse-header")
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-detail-batch-text")
    }, formatMessage({
      id: "".concat(intlPrefix, ".service")
    })), /*#__PURE__*/React.createElement("span", null, record.get('appServiceName')));
  }

  function linkToInstance(record) {
    if (record) {
      var instanceId = record.get('instanceId');
      var appServiceId = record.get('appServiceId');
      var envId = record.get('envId');
      history.push({
        pathname: '/devops/resource',
        search: "".concat(search, "&activeKey=").concat(TabCode.get('/devops/resource').tabCodes[0]),
        state: {
          instanceId: instanceId,
          appServiceId: appServiceId,
          envId: envId
        }
      });
    }

    history.push("/devops/resource".concat(search));
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-detail-batch-content")
  }, /*#__PURE__*/React.createElement(_Collapse, {
    bordered: false
  }, batchDetailDs.map(function (record) {
    return /*#__PURE__*/React.createElement(Panel, {
      key: record.id,
      header: getPanelHeader(record)
    }, /*#__PURE__*/React.createElement("ul", {
      className: "".concat(prefixCls, "-detail-batch")
    }, /*#__PURE__*/React.createElement("li", {
      className: "".concat(prefixCls, "-detail-batch-item ").concat(prefixCls, "-detail-batch-item-flex")
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-detail-batch-text")
    }, formatMessage({
      id: "".concat(intlPrefix, ".version")
    })), /*#__PURE__*/React.createElement(MouserOverWrapper, {
      text: record.get('appServiceVersion'),
      width: "230px"
    }, /*#__PURE__*/React.createElement("span", null, record.get('appServiceVersion')))), /*#__PURE__*/React.createElement("li", {
      className: "".concat(prefixCls, "-detail-batch-item")
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-detail-batch-text")
    }, formatMessage({
      id: "".concat(intlPrefix, ".env")
    })), /*#__PURE__*/React.createElement("span", null, record.get('envName'))), /*#__PURE__*/React.createElement("li", {
      className: "".concat(prefixCls, "-detail-batch-item")
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-detail-batch-text")
    }, formatMessage({
      id: "".concat(intlPrefix, ".instance")
    })), record.get('deleted') ? /*#__PURE__*/React.createElement("span", null, formatMessage({
      id: 'deleted'
    })) : /*#__PURE__*/React.createElement("span", {
      role: "none",
      onClick: function onClick() {
        return linkToInstance(record);
      },
      className: "".concat(prefixCls, "-detail-batch-instance")
    }, record.get('instanceName')))));
  })));
}));