import "choerodon-ui/pro/lib/text-field/style";
import _TextField from "choerodon-ui/pro/lib/text-field";
import "choerodon-ui/pro/lib/pagination/style";
import _Pagination from "choerodon-ui/pro/lib/pagination";
import "choerodon-ui/lib/spin/style";
import _Spin from "@hzero-front-ui/c7n-ui/lib/Spin";
import "choerodon-ui/lib/icon/style";
import _Icon from "choerodon-ui/lib/icon";
import "choerodon-ui/lib/tooltip/style";
import _Tooltip from "choerodon-ui/lib/tooltip";
import "choerodon-ui/pro/lib/modal/style";
import _Modal from "choerodon-ui/pro/lib/modal";
import "choerodon-ui/pro/lib/table/style";
import _Table from "@hzero-front-ui/c7n-ui/lib/TablePro";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

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; }

/* eslint-disable */
import React, { useEffect, useState, Fragment, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { FormattedMessage } from 'react-intl';
import { withRouter } from 'react-router-dom';
import { Page, Content, Header, Action, Breadcrumb, Choerodon, HeaderButtons } from '@choerodon/boot';
import { SagaDetails } from '@choerodon/master';
import pick from 'lodash/pick';
import ServiceDetail from "../service-detail";
import TimePopover from "../../../components/timePopover";
import { useAppTopStore } from "../stores";
import { useAppServiceStore } from "./stores";
import CreateForm from "../modals/creat-form";
import EditForm from "../modals/edit-form";
import ImportForm from "./modal/import-form";
import { StatusTag } from '@choerodon/components';
import { handlePromptError } from "../../../utils";
import "./index.less";
import "./theme4.less";
import ClickText from "../../../components/click-text";
var Column = _Table.Column;

var modalKey1 = _Modal.key();

var modalKey2 = _Modal.key();

var modalKey3 = _Modal.key();

var createModalKey = _Modal.key();

var editModalKey = _Modal.key();

var modalStyle1 = {
  width: 380
};
var modalStyle2 = {
  width: 'calc(100vw - 3.52rem)'
};
var ListView = withRouter(observer(function (props) {
  var _useAppTopStore = useAppTopStore(),
      intlPrefix = _useAppTopStore.intlPrefix,
      prefixCls = _useAppTopStore.prefixCls,
      listPermissions = _useAppTopStore.listPermissions,
      appServiceStore = _useAppTopStore.appServiceStore;

  var ref = useRef();

  var _useAppServiceStore = useAppServiceStore(),
      formatMessage = _useAppServiceStore.intl.formatMessage,
      AppState = _useAppServiceStore.AppState,
      projectId = _useAppServiceStore.AppState.currentMenuType.projectId,
      listDs = _useAppServiceStore.listDs,
      appListStore = _useAppServiceStore.appListStore;

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      isInit = _useState2[0],
      setIsInit = _useState2[1];

  var _useState3 = useState(undefined),
      _useState4 = _slicedToArray(_useState3, 2),
      selectedAppService = _useState4[0],
      setSelectedAppService = _useState4[1];

  useEffect(function () {
    // 确定dataset加载完毕后才打开创建框
    // 否则会造成dataset实例丢失
    if (isInit && listDs.status === 'ready') {
      var state = props.location.state;

      if (state && state.openCreate) {
        openCreate();
      }

      setIsInit(false);

      if (listDs.records && listDs.records.length > 0) {
        setSelectedAppService(listDs.records[0].toData());
      }
    }
  }, [listDs.status]);

  function refresh() {
    listDs.query();
    appListStore.checkCreate(projectId);
  }

  var openSagaDetails = function openSagaDetails(id) {
    _Modal.open({
      title: formatMessage({
        id: 'global.saga-instance.detail'
      }),
      key: _Modal.key(),
      children: /*#__PURE__*/React.createElement(SagaDetails, {
        sagaInstanceId: id,
        instance: true
      }),
      drawer: true,
      okCancel: false,
      okText: formatMessage({
        id: 'close'
      }),
      style: {
        width: 'calc(100% - 3.5rem)'
      }
    });
  };

  var handleLinkDetail = function handleLinkDetail(record) {
    var _props$location = props.location,
        search = _props$location.search,
        pathname = _props$location.pathname,
        history = props.history;
    history.push({
      pathname: "".concat(pathname, "/detail/").concat(record.get('id')),
      search: search
    });
  };

  var getItemsButton = function getItemsButton() {
    var disabled = !appListStore.getCanCreate;
    var disabledMessage = disabled ? formatMessage({
      id: "".concat(intlPrefix, ".create.disabled")
    }) : '';
    var openImport = props.openImport;
    return [{
      name: formatMessage({
        id: "".concat(intlPrefix, ".create")
      }),
      icon: 'playlist_add',
      permissions: ['choerodon.code.project.develop.app-service.ps.create'],
      display: true,
      handler: openCreate,
      disabled: disabled,
      disabledMessage: disabledMessage
    }, {
      name: formatMessage({
        id: "".concat(intlPrefix, ".import")
      }),
      icon: 'archive-o',
      permissions: ['choerodon.code.project.develop.app-service.ps.import'],
      display: true,
      handler: openImport,
      disabled: disabled,
      disabledMessage: disabledMessage
    }, {
      name: '权限管理',
      icon: 'settings-o',
      display: true,
      permissions: ['choerodon.code.project.develop.app-service.ps.permission.update'],
      handler: function handler() {
        var history = props.history,
            location = props.location;
        history.push("/rducm/code-lib-management/assign".concat(location.search));
      }
    }, {
      icon: 'refresh',
      display: true,
      handler: refresh
    }];
  };

  function renderName(_ref) {
    var value = _ref.value,
        record = _ref.record;
    var _props$location2 = props.location,
        search = _props$location2.search,
        pathname = _props$location2.pathname;
    var canLink = !record.get('fail') && record.get('synchro');
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement(_Tooltip, {
      title: value,
      placement: "top"
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-table-name")
    }, /*#__PURE__*/React.createElement(ClickText, {
      value: value,
      clickAble: canLink,
      onClick: handleLinkDetail,
      record: record
    }))), record.get('sagaInstanceId') ? /*#__PURE__*/React.createElement(_Icon, {
      className: "".concat(prefixCls, "-table-dashBoard"),
      type: "developer_board",
      onClick: function onClick() {
        return openSagaDetails(record.get('sagaInstanceId'));
      }
    }) : '');
  }

  function renderType(_ref2) {
    var value = _ref2.value;
    return value && /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "".concat(intlPrefix, ".type.").concat(value)
    });
  }

  function renderDate(_ref3) {
    var value = _ref3.value;
    return /*#__PURE__*/React.createElement(TimePopover, {
      content: value
    });
  }

  function renderUrl(_ref4) {
    var value = _ref4.value;
    return /*#__PURE__*/React.createElement("a", {
      href: value,
      rel: "nofollow me noopener noreferrer",
      target: "_blank"
    }, value ? "../".concat(value.split('/')[value.split('/').length - 1]) : '');
  }

  function renderStatus(_ref5) {
    var active = _ref5.value,
        record = _ref5.record;
    var isSynchro = record.get('synchro');
    var isFailed = record.get('fail');
    var colorCode;

    if (isSynchro) {
      if (isFailed) {
        colorCode = 'failed';
      } else if (active) {
        colorCode = 'active';
      } else {
        colorCode = 'unready';
      }
    } else {
      colorCode = 'operating';
    }

    return /*#__PURE__*/React.createElement(_Tooltip, {
      title: formatMessage({
        id: colorCode
      })
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'inline-block'
      }
    }, /*#__PURE__*/React.createElement(StatusTag, {
      colorCode: colorCode,
      style: {
        marginRight: '7px'
      },
      name: colorCode === 'unready' ? '停用' : formatMessage({
        id: colorCode
      })
    })));
  }

  function renderActions(_ref6) {
    var record = _ref6.record;
    var actionData = {
      detail: {
        service: ['choerodon.code.project.develop.app-service.ps.default'],
        text: formatMessage({
          id: "".concat(intlPrefix, ".detail")
        }),
        action: function action() {
          var _ref$current;

          ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.openDetail();
        }
      },
      edit: {
        service: ['choerodon.code.project.develop.app-service.ps.update'],
        text: formatMessage({
          id: 'edit'
        }),
        action: function action() {
          setSelectedAppService(record.toData());
          openEdit();
        }
      },
      stop: {
        service: ['choerodon.code.project.develop.app-service.ps.disable'],
        text: formatMessage({
          id: 'stop'
        }),
        action: function action() {
          setSelectedAppService(record.toData());
          openStop(record);
        }
      },
      run: {
        service: ['choerodon.code.project.develop.app-service.ps.enable'],
        text: formatMessage({
          id: 'active'
        }),
        action: function action() {
          setSelectedAppService(record.toData());
          changeActive(true, record);
        }
      },
      "delete": {
        service: ['choerodon.code.project.develop.app-service.ps.delete'],
        text: formatMessage({
          id: 'delete'
        }),
        action: function action() {
          setSelectedAppService(record.toData());
          handleDelete(record);
        }
      }
    };
    var actionItems;

    if (record.get('fail')) {
      actionItems = pick(actionData, ['delete', 'detail']);
    } else if (record.get('synchro') && record.get('active')) {
      actionItems = pick(actionData, ['edit', 'stop', 'detail']);
    } else if (record.get('sagaInstanceId')) {
      actionItems = pick(actionData, ['delete', 'detail']);
    } else if (record.get('active')) {
      return;
    } else {
      actionItems = pick(actionData, ['run', 'delete', 'detail']);
    }

    if (AppState.getCurrentTheme !== 'theme4') {
      delete actionItems.detail;
    }

    return /*#__PURE__*/React.createElement(Action, {
      data: Object.values(actionItems)
    });
  }

  function openCreate() {
    _Modal.open({
      key: createModalKey,
      drawer: true,
      style: modalStyle1,
      title: formatMessage({
        id: "".concat(intlPrefix, ".create")
      }),
      children: /*#__PURE__*/React.createElement(CreateForm, {
        refresh: refresh,
        intlPrefix: intlPrefix,
        prefixCls: prefixCls
      }),
      okText: formatMessage({
        id: 'create'
      })
    });
  }

  function openEdit() {
    var appServiceId = selectedAppService.id;

    _Modal.open({
      key: editModalKey,
      drawer: true,
      style: modalStyle1,
      title: formatMessage({
        id: "".concat(intlPrefix, ".edit")
      }),
      children: /*#__PURE__*/React.createElement(EditForm, {
        refresh: refresh,
        intlPrefix: intlPrefix,
        prefixCls: prefixCls,
        appServiceId: appServiceId
      }),
      okText: formatMessage({
        id: 'save'
      })
    });
  } // 因为在应用服务那边做了最近访问前端缓存，如果要删除，也必须要删除这个缓存


  function checkLocalstorage(appId) {
    var recentApp = JSON.parse(localStorage.getItem('recent-app'));

    if (recentApp && recentApp[projectId]) {
      var currentProjectApp = recentApp[projectId];
      var hasData = currentProjectApp.filter(function (item) {
        return item.id !== appId;
      });

      if (hasData.length < currentProjectApp.length) {
        recentApp[projectId] = hasData;
        localStorage.setItem('recent-app', JSON.stringify(recentApp));
      }
    }
  }

  function handleDelete(_x) {
    return _handleDelete.apply(this, arguments);
  }

  function _handleDelete() {
    _handleDelete = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(record) {
      var appId, modalProps, res;
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              appId = record.get('id');
              modalProps = {
                title: formatMessage({
                  id: "".concat(intlPrefix, ".delete.title")
                }, {
                  name: record.get('name')
                }),
                children: formatMessage({
                  id: "".concat(intlPrefix, ".delete.des")
                }),
                okText: formatMessage({
                  id: 'delete'
                }),
                okProps: {
                  color: 'red'
                },
                cancelProps: {
                  color: 'dark'
                }
              };
              _context.next = 4;
              return listDs["delete"](record, modalProps);

            case 4:
              res = _context.sent;

              if (res && res.success) {
                refresh();
                checkLocalstorage(appId);
              }

            case 6:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));
    return _handleDelete.apply(this, arguments);
  }

  function changeActive(_x2, _x3) {
    return _changeActive.apply(this, arguments);
  }

  function _changeActive() {
    _changeActive = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(active, record) {
      return regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              if (!active) {
                _Modal.open({
                  key: modalKey3,
                  title: formatMessage({
                    id: "".concat(intlPrefix, ".stop")
                  }, {
                    name: listDs.current.get('name')
                  }),
                  children: /*#__PURE__*/React.createElement(FormattedMessage, {
                    id: "".concat(intlPrefix, ".stop.tips")
                  }),
                  onOk: function onOk() {
                    return handleChangeActive(active, record);
                  },
                  okText: formatMessage({
                    id: 'stop'
                  })
                });
              } else {
                handleChangeActive(active, record);
              }

            case 1:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));
    return _changeActive.apply(this, arguments);
  }

  function handleChangeActive(_x4, _x5) {
    return _handleChangeActive.apply(this, arguments);
  }

  function _handleChangeActive() {
    _handleChangeActive = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(active, record) {
      return regeneratorRuntime.wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              _context3.prev = 0;
              _context3.next = 3;
              return appServiceStore.changeActive(projectId, record.get('id'), active);

            case 3:
              if (!_context3.sent) {
                _context3.next = 8;
                break;
              }

              checkLocalstorage(record.get('id'));
              refresh();
              _context3.next = 9;
              break;

            case 8:
              return _context3.abrupt("return", false);

            case 9:
              _context3.next = 15;
              break;

            case 11:
              _context3.prev = 11;
              _context3.t0 = _context3["catch"](0);
              Choerodon.handleResponseError(_context3.t0);
              return _context3.abrupt("return", false);

            case 15:
            case "end":
              return _context3.stop();
          }
        }
      }, _callee3, null, [[0, 11]]);
    }));
    return _handleChangeActive.apply(this, arguments);
  }

  function openStop(record) {
    var id = record.get('id');

    var stopModal = _Modal.open({
      key: modalKey3,
      title: formatMessage({
        id: "".concat(intlPrefix, ".check")
      }),
      children: /*#__PURE__*/React.createElement(_Spin, null),
      footer: null
    });

    appServiceStore.checkAppService(projectId, id).then(function (res) {
      if (handlePromptError(res)) {
        var checkResources = res.checkResources,
            checkRule = res.checkRule,
            checkCi = res.checkCi;
        var status = checkResources || checkRule || checkCi;
        var childrenContent;

        if (!status) {
          childrenContent = /*#__PURE__*/React.createElement(FormattedMessage, {
            id: "".concat(intlPrefix, ".stop.tips")
          });
        } else if (checkCi) {
          childrenContent = '该应用服务下存在流水线资源，无法停用。';
        } else if (checkResources && !checkRule) {
          childrenContent = formatMessage({
            id: "".concat(intlPrefix, ".has.resource")
          });
        } else if (!checkResources && checkRule) {
          childrenContent = formatMessage({
            id: "".concat(intlPrefix, ".has.rules")
          });
        } else {
          childrenContent = formatMessage({
            id: "".concat(intlPrefix, ".has.both")
          });
        }

        var statusObj = {
          title: status ? formatMessage({
            id: "".concat(intlPrefix, ".cannot.stop")
          }, {
            name: record.get('name')
          }) : formatMessage({
            id: "".concat(intlPrefix, ".stop")
          }, {
            name: record.get('name')
          }),
          // eslint-disable-next-line no-nested-ternary
          children: childrenContent,
          okCancel: !status,
          onOk: function onOk() {
            return status ? stopModal.close() : handleChangeActive(false, record);
          },
          okText: status ? formatMessage({
            id: 'iknow'
          }) : formatMessage({
            id: 'stop'
          }),
          footer: function footer(okBtn, cancelBtn) {
            return /*#__PURE__*/React.createElement(React.Fragment, null, okBtn, !status && cancelBtn);
          }
        };
        stopModal.update(statusObj);
      } else {
        stopModal.close();
      }
    })["catch"](function (err) {
      stopModal.close();
      Choerodon.handleResponseError(err);
    });
  }

  function getHeader() {
    return /*#__PURE__*/React.createElement(Header, {
      title: /*#__PURE__*/React.createElement(FormattedMessage, {
        id: "app.head"
      })
    }, /*#__PURE__*/React.createElement(HeaderButtons, {
      items: getItemsButton(),
      showClassName: false
    }));
  }

  var handleChangeListPage = function handleChangeListPage(page, pageSize) {
    listDs.pageSize = pageSize;
    listDs.query(page);
  };

  var renderTheme4Dom = function renderTheme4Dom() {
    return /*#__PURE__*/React.createElement("div", {
      className: "c7ncd-theme4-appService"
    }, /*#__PURE__*/React.createElement("div", {
      className: "c7ncd-theme4-appService-left"
    }, /*#__PURE__*/React.createElement(_Spin, {
      spinning: listDs.status !== 'ready'
    }, listDs.records.map(function (record) {
      var _record$get, _record$get$substring, _record$get2, _record$get2$substrin;

      return /*#__PURE__*/React.createElement("div", {
        className: "c7ncd-appService-item",
        style: {
          background: record.get('id') === (selectedAppService === null || selectedAppService === void 0 ? void 0 : selectedAppService.id) ? 'rgba(104, 135, 232, 0.08)' : 'unset'
        },
        onClick: function onClick() {
          return setSelectedAppService(record.toData());
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "c7ncd-appService-item-center"
      }, /*#__PURE__*/React.createElement("div", {
        className: "c7ncd-appService-item-center-line",
        style: {
          justifyContent: 'space-between'
        }
      }, /*#__PURE__*/React.createElement("div", {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      }, /*#__PURE__*/React.createElement(_Tooltip, {
        title: record.get('name')
      }, /*#__PURE__*/React.createElement("span", {
        className: "c7ncd-appService-item-center-line-name"
      }, record.get('name'))), renderStatus({
        value: record.get('active'),
        record: record
      }), record.get('errorMessage') && record.get('fail') && /*#__PURE__*/React.createElement(_Tooltip, {
        overlayStyle: {
          maxHeight: 500,
          overflow: 'auto'
        },
        title: record.get('errorMessage')
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "info",
        style: {
          color: '#f76776',
          marginRight: '5px'
        }
      })), /*#__PURE__*/React.createElement("span", {
        className: "c7ncd-appService-item-center-line-type"
      }, /*#__PURE__*/React.createElement(FormattedMessage, {
        id: "".concat(intlPrefix, ".type.").concat(record.get('type'))
      }))), renderActions({
        record: record
      })), /*#__PURE__*/React.createElement("div", {
        className: "c7ncd-appService-item-center-line",
        style: {
          justifyContent: 'flex-start'
        }
      }, /*#__PURE__*/React.createElement("p", {
        className: "c7ncd-appService-item-center-line-code"
      }, record.get('code')))), /*#__PURE__*/React.createElement("div", {
        className: "c7ncd-appService-item-center",
        style: {
          position: 'absolute',
          right: '16px',
          width: 'unset'
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "c7ncd-appService-item-center-line",
        style: {
          justifyContent: 'flex-end'
        }
      }, /*#__PURE__*/React.createElement("p", {
        className: "c7ncd-appService-item-center-line-url"
      }, record.get('repoUrl') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Icon, {
        className: "c7ncd-appService-item-center-line-url-git",
        type: "git"
      }), renderUrl({
        value: record.get('repoUrl')
      })))), /*#__PURE__*/React.createElement("div", {
        className: "c7ncd-appService-item-center-line"
      }, /*#__PURE__*/React.createElement("span", {
        className: "c7ncd-appService-item-center-line-updateUserName",
        style: {
          backgroundImage: "url(".concat(record.get('updateUserImage'), ")")
        }
      }, !record.get('updateUserImage') && ((_record$get = record.get('updateUserName')) === null || _record$get === void 0 ? void 0 : (_record$get$substring = _record$get.substring(0, 1)) === null || _record$get$substring === void 0 ? void 0 : _record$get$substring.toUpperCase())), /*#__PURE__*/React.createElement("span", {
        className: "c7ncd-appService-item-center-line-gxy"
      }, "\u66F4\u65B0\u4E8E"), record.get('lastUpdateDate') && /*#__PURE__*/React.createElement(TimePopover, {
        content: record.get('lastUpdateDate')
      }), /*#__PURE__*/React.createElement("span", {
        style: {
          marginLeft: 31,
          backgroundImage: "url(".concat(record.get('createUserImage'), ")")
        },
        className: "c7ncd-appService-item-center-line-updateUserName"
      }, !record.get('createUserImage') && ((_record$get2 = record.get('createUserName')) === null || _record$get2 === void 0 ? void 0 : (_record$get2$substrin = _record$get2.substring(0, 1)) === null || _record$get2$substrin === void 0 ? void 0 : _record$get2$substrin.toUpperCase())), /*#__PURE__*/React.createElement("span", {
        className: "c7ncd-appService-item-center-line-gxy"
      }, "\u521B\u5EFA\u4E8E"), record.get('creationDate') && /*#__PURE__*/React.createElement(TimePopover, {
        content: record.get('creationDate')
      }))));
    })), /*#__PURE__*/React.createElement(_Pagination, {
      total: listDs.totalCount,
      pageSize: listDs.pageSize,
      page: listDs.currentPage,
      onChange: handleChangeListPage,
      style: {
        marginTop: '17px',
        "float": 'right'
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: "c7ncd-theme4-appService-divided"
    }), /*#__PURE__*/React.createElement("div", {
      className: "c7ncd-theme4-appService-right"
    }, /*#__PURE__*/React.createElement(ServiceDetail, {
      cRef: ref,
      match: {
        params: {
          id: selectedAppService === null || selectedAppService === void 0 ? void 0 : selectedAppService.id,
          projectId: AppState.currentMenuType.projectId
        }
      }
    })));
  };

  function handleChangeSearch(value) {
    listDs.setQueryParameter('params', value);
    listDs.query();
  }

  return /*#__PURE__*/React.createElement(Page, {
    service: listPermissions
  }, getHeader(), /*#__PURE__*/React.createElement(Breadcrumb, AppState.getCurrentTheme === 'theme4' ? {
    extraNode: /*#__PURE__*/React.createElement(_TextField, {
      className: "theme4-c7n-member-search",
      placeholder: "\u641C\u7D22\u5E94\u7528\u670D\u52A1",
      style: {
        marginLeft: 32
      },
      suffix: /*#__PURE__*/React.createElement(_Icon, {
        type: "search"
      }),
      onEnterDown: function onEnterDown(e) {
        return handleChangeSearch(e.target.value);
      },
      onChange: handleChangeSearch
    })
  } : {}), /*#__PURE__*/React.createElement(Content, {
    className: "".concat(prefixCls, "-content")
  }, AppState.getCurrentTheme === 'theme4' ? renderTheme4Dom() : /*#__PURE__*/React.createElement(_Table, {
    dataSet: listDs,
    border: false,
    queryBar: "bar",
    pristine: true,
    className: "".concat(prefixCls, ".table"),
    rowClassName: "c7ncd-table-row-font-color"
  }, /*#__PURE__*/React.createElement(Column, {
    name: "name",
    renderer: renderName,
    sortable: true
  }), /*#__PURE__*/React.createElement(Column, {
    renderer: renderActions,
    width: "0.7rem"
  }), /*#__PURE__*/React.createElement(Column, {
    name: "code",
    sortable: true
  }), /*#__PURE__*/React.createElement(Column, {
    name: "type",
    renderer: renderType
  }), /*#__PURE__*/React.createElement(Column, {
    name: "repoUrl",
    renderer: renderUrl
  }), /*#__PURE__*/React.createElement(Column, {
    name: "creationDate",
    renderer: renderDate,
    sortable: true
  }), /*#__PURE__*/React.createElement(Column, {
    name: "active",
    renderer: renderStatus,
    width: "0.7rem",
    align: "left"
  }))));
}));
export default ListView;