<template>
  <div class="app-container">
    <div class="createPost-container">
      <el-form :inline="true" :model="postForm" class="form-container">
        <el-form-item :label="$t('tenant.label')" class="postInfo-container-item">
          <el-select v-model="postForm.tenant" :placeholder="$t('tenant.name')" @change="getNamespacesList(postForm.tenant)">
            <el-option v-for="(item,index) in tenantsListOptions" :key="item+index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('namespace.label')" class="postInfo-container-item">
          <el-select v-model="postForm.namespace" :placeholder="$t('namespace.name')" @change="getNamespaceInfo(postForm.tenant, postForm.namespace)">
            <el-option v-for="(item,index) in namespacesListOptions" :key="item+index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('tabs.overview')" name="overview">
        <el-table
          :data="namespaceStats"
          border
          style="width: 100%">
          <el-table-column :label="$t('common.inMsg')" prop="inMsg"/>
          <el-table-column :label="$t('common.outMsg')" prop="outMsg"/>
          <el-table-column :label="$t('common.inBytes')" prop="inBytes"/>
          <el-table-column :label="$t('common.outBytes')" prop="outBytes"/>
        </el-table>
        <h4>
          Bundles
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">
              {{ $t('namespace.bundle.bundleInfoContent') }}
              <br>
              <br>
              <el-link
                type="primary"
                href="https://pulsar.apache.org/docs/en/next/administration-load-balance/#pulsar-load-manager-architecture"
                target="_blank">
                {{ $t('namespace.bundle.bundleInfoLink') }}
              </el-link>
            </div>
            <i class="el-icon-info"/>
          </el-tooltip>
        </h4>
        <hr class="split-line">
        <el-tabs v-model="activeBundleCluster" type="border-card" @tab-click="handleBundleTabClick">
          <el-tab-pane v-for="(item,index) in replicationClustersValue" :key="item+index" :label="item" :name="item">
            <div class="filter-container">
              <el-button class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-download" @click="handleUnloadAll">Unload All</el-button>
              <el-button class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-close" @click="hanldeClearAllBacklog">Clear All Backlog</el-button>
            </div>
            <el-table
              :key="tableKey"
              :data="localList"
              border
              fit
              highlight-current-row
              style="width: 100%;">
              <el-table-column :label="$t('namespace.bundle.label')" align="center" min-width="100px">
                <template slot-scope="scope">
                  <span>{{ scope.row.bundle }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('namespace.bundle.operation')" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="medium" style="margin-left: 10px;" type="danger" icon="el-icon-share" @click="handleSplitBundle(scope.row)">{{ $t('namespace.bundle.split') }}</el-button>
                  <el-button size="medium" style="margin-left: 10px;" type="danger" icon="el-icon-download" @click="handleUnloadBundle(scope.row)">{{ $t('namespace.bundle.unload') }}</el-button>
                  <el-button size="medium" style="margin-left: 10px;" type="danger" icon="el-icon-close" @click="handleClearBundleBacklog(scope.row)">{{ $t('namespace.clearBacklog') }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

        <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"/> -->
      </el-tab-pane>
      <el-tab-pane :label="$t('tabs.topic')" name="topics">
        <el-input v-model="searchTopic" :placeholder="$t('namespace.searchTopics')" style="width: 200px;" @keyup.enter.native="handleFilterTopic"/>
        <el-button type="primary" icon="el-icon-search" @click="handleFilterTopic"/>
        <el-button type="primary" icon="el-icon-plus" @click="handleCreateTopic">{{ $t('namespace.newTopic') }}</el-button>
        <el-row :gutter="24">
          <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}" style="margin-top:15px">
            <el-table
              v-loading="topicsListLoading"
              :key="topicsTableKey"
              :data="topicsList"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              fit
              highlight-current-row
              row-key="id">
              <el-table-column :label="$t('topic.label')" min-width="50px" align="left">
                <template slot-scope="scope">
                  <router-link :to="scope.row.topicLink" class="link-type">
                    <span>{{ scope.row.topic }}</span>
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column :label="$t('topic.partitionNumber')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.partitions }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('topic.topicDomain')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.persistent }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('topic.producer.producerNumber')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.producers }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('topic.subscription.subscriptionNumber')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.subscriptions }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common.inMsg')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <i class="el-icon-download" style="margin-right: 2px"/><span>{{ scope.row.inMsg }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common.outMsg')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <i class="el-icon-upload2" style="margin-right: 2px"/><span>{{ scope.row.outMsg }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common.inBytes')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <i class="el-icon-download" style="margin-right: 2px"/><span>{{ scope.row.inBytes }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common.outBytes')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <i class="el-icon-upload2" style="margin-right: 2px"/><span>{{ scope.row.outBytes }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common.storageSize')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.storageSize }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane :label="$t('tabs.policies')" name="policies">
        <h4>{{ $t('namespace.policy.cluster') }}</h4>
        <hr class="split-line">
        <div class="component-item">
          <div class="section-title">
            <span>{{ $t('namespace.policy.replicatedCluster') }}</span>
            <el-tooltip :content="$t('namespace.policy.replicatedClustersContent')" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
          </div>
          <el-select
            v-model="replicationClustersValue"
            :placeholder="$t('cluster.selectClusterMessage')"
            style="width:500px;margin-top:20px"
            multiple
            @change="handleReplicationsClusters()">
            <el-option v-for="item in replicationClustersOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <h4>{{ $t('namespace.policy.authorization') }}
          <el-tooltip :content="authorizationContent" class="item" effect="dark" placement="top">
            <i class="el-icon-info"/>
          </el-tooltip>
        </h4>
        <hr class="split-line">
        <el-form>
          <el-tag
            v-for="tag in dynamicTags"
            :label="tag"
            :key="tag"
            :disable-transitions="false"
            style="margin-top:20px"
            class="role-el-tag">
            <div>
              <span> {{ tag }} </span>
            </div>
            <el-select
              v-model="roleMap[tag]"
              :placeholder="$t('namespace.policy.selectRole')"
              multiple
              style="width:300px;"
              @change="handleChangeOptions()">
              <el-option
                v-for="item in roleMapOptions[tag]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="width:300px"/>
            </el-select>
            <el-button @click.prevent="handleClose(tag)">{{ $t('namespace.policy.deleteRole') }}</el-button>
          </el-tag>
          <el-form-item style="margin-top:30px">
            <el-input
              v-if="inputVisible"
              ref="saveTagInput"
              v-model="inputValue"
              style="margin-right:10px;width:200px;vertical-align:top"
              size="small"
              class="input-new-tag"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <el-button @click="showInput()">{{ $t('namespace.policy.addRole') }}</el-button>
            <!-- <el-button @click="revokeAllRole()">Revoke All</el-button> -->
          </el-form-item>
        </el-form>
        <h4>{{ $t('namespace.policy.subscriptionAuthentication') }}</h4>
        <hr class="split-line">
        <div class="section-title">
          <span>{{ $t('namespace.policy.subscriptionAuthenticationMode') }}</span>
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">
              {{ $t('namespace.policy.subscriptionAuthenticationModeContent') }}
              <br>
              <br>
              {{ $t('namespace.policy.subscriptionAuthenticationModeOptions') }}
              <ul>
                <li>{{ $t('namespace.policy.subscriptionAuthenticationModeNone') }}</li>
                <li>
                  {{ $t('namespace.policy.subscriptionAuthenticaitonModePrefix') }}
                  <br>
                  {{ $t('namespace.policy.subscriptionAuthenticaitonModePrefixExample') }}
                </li>
              </ul>
            </div>
            <i class="el-icon-info"/>
          </el-tooltip>
        </div>
        <el-select
          v-model="subscriptionAuthenticationMode"
          placeholder="Please select Authentication"
          style="margin-top:20px;width:300px"
          @change="handleSubscriptionAuthMode()">
          <el-option
            v-for="item in subscriptionAuthenticationModeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <h4>{{ $t('namespace.policy.storage') }}</h4>
        <hr class="split-line">
        <div class="section-title">
          <span>{{ $t('namespace.policy.replicationFactor') }}</span>
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">
              {{ $t('namespace.policy.replicationFactorContent') }}
              <ul>
                <li>{{ $t('namespace.policy.ensembleSize') }}{{ $t('namespace.policy.ensembleSizeDescription') }}</li>
                <li>{{ $t('namespace.policy.writeQuorumSize') }}{{ $t('namespace.policy.writeQuorumSizeDescription') }}</li>
                <li>{{ $t('namespace.policy.readQuorumSize') }}{{ $t('namespace.policy.ackQuorumSizeDescription') }}</li>
              </ul>
            </div>
            <i class="el-icon-info"/>
          </el-tooltip>
        </div>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="ensembleSize">
            <span>{{ $t('namespace.policy.ensembleSize') }}</span>
            <md-input
              v-model="form.ensembleSize"
              :placeholder="$t('namespace.policy.inputEnsemble')"
              class="md-input-style"
              name="ensembleSize"
              @keyup.enter.native="handlePersistence"/>
          </el-form-item>
          <el-form-item prop="writeQuorumSize">
            <span>{{ $t('namespace.policy.writeQuorumSize') }}</span>
            <md-input
              v-model="form.writeQuorumSize"
              :placeholder="$t('namespace.policy.inputWriteQuorumSize')"
              class="md-input-style"
              name="writeQuorumSize"
              @keyup.enter.native="handlePersistence"/>
          </el-form-item>
          <el-form-item prop="readQuorumSize">
            <span>{{ $t('namespace.policy.readQuorumSize') }}</span>
            <md-input
              v-model="form.readQuorumSize"
              :placeholder="$t('namespace.policy.inputReadQuorumSize')"
              class="md-input-style"
              name="readQuorumSize"
              @keyup.enter.native="handlePersistence"/>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="markDeleteMaxRate">
            <span>{{ $t('namespace.policy.markDeleteRate') }}</span>
            <el-tooltip :content="markDeleteRateContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.markDeleteMaxRate"
              :placeholder="$t('namespace.policy.inputDeleteMaxRate')"
              class="md-input-style"
              name="markDeleteMaxRate"
              @keyup.enter.native="handlePersistence"/>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="encryptionRequire">
            <span>{{ $t('namespace.policy.encryptionRequire') }}</span>
            <el-tooltip :content="encryptionRequireContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <br>
            <el-radio-group
              v-model="form.encryptionRequireRadio"
              size="medium"
              style="margin-top:8px;width:300px"
              @change="handleEncryption()">
              <el-radio :label="$t('common.enabled')"/>
              <el-radio :label="$t('common.disabled')"/>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="deduplication">
            <span>{{ $t('namespace.policy.deduplication') }}</span>
            <el-tooltip :content="deduplicationContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <br>
            <el-radio-group
              v-model="form.deduplicationRadio"
              size="medium"
              style="margin-top:8px;width:300px"
              @change="handleDeduplication()">
              <el-radio :label="$t('common.enabled')"/>
              <el-radio :label="$t('common.disabled')"/>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <h4>{{ $t('namespace.policy.backlog') }}</h4>
        <hr class="split-line">
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="backlogQuotasLimit">
            <span>{{ $t('namespace.policy.backlogQuotasLimit') }}</span>
            <el-tooltip :content="backlogQuotasLimitContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.backlogQuotasLimit"
              :placeholder="$t('namespace.policy.inputBacklogQuotasLimit')"
              class="md-input-style"
              name="backlogQuotasLimit"
              @keyup.enter.native="handleBacklogQuota"/>
          </el-form-item>
          <el-form-item style="width:300px">
            <span>{{ $t('namespace.policy.backlogRententionPolicy') }}</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">
                {{ $t('namespace.policy.backlogRententionPolicyContent') }}
                <br>
                <br>
                {{ $t('namespace.policy.backlogRententionPolicyOptions') }}
                <ul>
                  <li>{{ $t('namespace.policy.producerRequestHoldDesc') }}</li>
                  <li>{{ $t('namespace.policy.producerExceptionDesc') }}</li>
                  <li>{{ $t('namespace.policy.consumerEvictionDesc') }}</li>
                </ul>
              </div>
              <i class="el-icon-info"/>
            </el-tooltip>
            <br>
            <el-select
              v-model="form.backlogRententionPolicy"
              :placeholder="$t('namespace.policy.inputBacklogRententionPolicyContent')"
              style="margin-top:8px;width:400px"
              @change="handleBacklogQuota()">
              <el-option
                v-for="item in backlogRententionPolicyOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-form>
        <h4>{{ $t('namespace.policy.schema') }}</h4>
        <hr class="split-line">
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="autoUpdateStrategy">
            <span>{{ $t('namespace.policy.autoUpdateStrategy') }}</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">
                {{ $t('namespace.policy.autoUpdateStrategyContent') }}
                <br>
                <br>
                <el-link
                  type="primary"
                  href="http://pulsar.apache.org/docs/en/next/schema-evolution-compatibility/#schema-compatibility-check-strategy"
                  target="_blank">
                  {{ $t('namespace.policy.schemaCompatibilityCheckStrategyLink') }}
                </el-link>
              </div>
              <i class="el-icon-info"/>
            </el-tooltip>
            <br>
            <el-select
              v-model="form.autoUpdateStrategy"
              :placeholder="$t('namespace.policy.inputAutoUpdateStrategy')"
              style="margin-top:8px;width:300px"
              @change="handleSchemaAutoUpdateStrategy()">
              <el-option
                v-for="item in autoUpdateStrategyOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item prop="schemaValidationEnforced">
            <span>{{ $t('namespace.policy.schemaValidationEnforced') }}</span>
            <el-tooltip :content="schemaValidationEnforcedContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <br>
            <el-radio-group
              v-model="form.schemaValidationEnforcedRadio"
              size="medium"
              style="margin-top:8px;width:300px"
              @change="handleSchemaValidationEnforced()">
              <el-radio :label="$t('common.enabled')"/>
              <el-radio :label="$t('common.disabled')"/>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <h4>{{ $t('namespace.policy.cleanupPolicy') }}</h4>
        <hr class="split-line">
        <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
          <el-form-item prop="messageTTL">
            <span>{{ $t('namespace.policy.messageTTL') }}</span>
            <el-tooltip :content="messageTTLContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.messageTTL"
              :placeholder="$t('namespace.policy.inputMessageTTL')"
              class="md-input-style"
              name="messageTTL"
              @keyup.enter.native="handleMessageTTL"/>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="retentionSize">
            <span>{{ $t('namespace.policy.retentionSize') }}</span>
            <el-tooltip :content="retentionSizeContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.retentionSize"
              :placeholder="$t('namespace.policy.inputRententionSize')"
              class="md-input-style"
              name="retentionSize"
              @keyup.enter.native="handleRetention"/>
          </el-form-item>
          <el-form-item prop="retentionTime">
            <span>{{ $t('namespace.policy.retentionTime') }}</span>
            <el-tooltip :content="retentionTimeContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.retentionTime"
              :placeholder="$t('namespace.policy.inputRetentionTime')"
              class="md-input-style"
              name="retentionTime"
              @keyup.enter.native="handleRetention"/>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="compactionThreshold">
            <span>{{ $t('namespace.policy.compactionThreshold') }}</span>
            <el-tooltip :content="compactionThresholdContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.compactionThreshold"
              :placeholder="$t('namespace.policy.inputCompactionThreshold')"
              class="md-input-style"
              name="compactionThreshold"
              @keyup.enter.native="handleCompactionThreshold"/>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="offloadThreshold">
            <span>{{ $t('namespace.policy.offloadThreshold') }}</span>
            <el-tooltip :content="offloadThresholdContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.offloadThreshold"
              :placeholder="$t('namespace.policy.inputOffloadThreshold')"
              class="md-input-style"
              name="offloadThreshold"
              @keyup.enter.native="handleOffloadThreshold"/>
          </el-form-item>
          <el-form-item prop="offloadDeletionLag">
            <span>{{ $t('namespace.policy.offloadDeletionLag') }}</span>
            <el-tooltip :content="offloadDeletionLagContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.offloadDeletionLag"
              :placeholder="$t('namespace.policy.inputOffloadDeleteLag')"
              class="md-input-style"
              name="offloadDeletionLag"
              @keyup.enter.native="handleOffloadDeletionLag"/>
          </el-form-item>
        </el-form>
        <h4>{{ $t('namespace.policy.throttling') }}</h4>
        <hr class="split-line">
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="maxProducersPerTopic">
            <span>{{ $t('namespace.policy.maxProducersPerTopic') }}</span>
            <el-tooltip :content="maxProducersPerTopicContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.maxProducersPerTopic"
              :placeholder="$t('namespace.policy.inputMaxProducersPerTopic')"
              class="md-input-style"
              name="maxProducersPerTopic"
              @keyup.enter.native="handleMaxProducersPerTopic"/>
          </el-form-item>
          <el-form-item prop="maxConsumersPerTopic">
            <span>{{ $t('namespace.policy.maxConsumersPerTopic') }}</span>
            <el-tooltip :content="maxConsumersPerTopicContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.maxConsumersPerTopic"
              :placeholder="$t('namespace.policy.inputMaxConsumersForTopic')"
              class="md-input-style"
              name="maxConsumersPerTopic"
              @keyup.enter.native="handleMaxConsumersPerTopic"/>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
          <el-form-item prop="maxConsumerPerSub">
            <span>{{ $t('namespace.policy.maxConsumerPerSubscription') }}</span>
            <el-tooltip :content="maxConsumerPerSubContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.maxConsumerPerSub"
              :placeholder="$t('namespace.policy.inputMaxConsumersForSub')"
              class="md-input-style"
              name="maxConsumerPerSub"
              @keyup.enter.native="handleMaxConsuemrsPerSubscription"/>
          </el-form-item>
        </el-form>
        <h4>{{ $t('namespace.policy.dispatchRate') }}</h4>
        <hr class="split-line">
        <span>{{ $t('namespace.policy.dispatchRatePerTopic') }}</span>
        <el-tooltip :content="dispatchRatePerTopicContent" class="item" effect="dark" placement="top">
          <i class="el-icon-info"/>
        </el-tooltip>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="dispatchRatePerTopicBytes">
            <span>{{ $t('namespace.policy.dispatchRatePerTopicBytes') }}</span>
            <md-input
              v-model="form.dispatchRatePerTopicBytes"
              :placeholder="$t('namespace.policy.inputDispatchRateBytes')"
              class="md-input-style"
              name="dispatchRatePerTopicBytes"
              @keyup.enter.native="handleDispatchRatePerTopic"/>
          </el-form-item>
          <el-form-item prop="dispatchRatePerTopicMessage">
            <span>{{ $t('namespace.policy.dispatchRatePerTopicMessage') }}</span>
            <md-input
              v-model="form.dispatchRatePerTopicMessage"
              :placeholder="$t('namespace.policy.inputDispatchRatePerTopicMessage')"
              class="md-input-style"
              name="dispatchRatePerTopicMessage"
              @keyup.enter.native="handleDispatchRatePerTopic"/>
          </el-form-item>
          <el-form-item prop="dispatchRatePerTopicPeriod">
            <span>{{ $t('namespace.policy.dispatchRatePerTopicPeriod') }}</span>
            <md-input
              v-model="form.dispatchRatePerTopicPeriod"
              :placeholder="$t('namespace.policy.inputDispatchPerTopicPerPeriod')"
              class="md-input-style"
              name="dispatchRatePerTopicPeriod"
              @keyup.enter.native="handleDispatchRatePerTopic"/>
          </el-form-item>
        </el-form>
        <span>{{ $t('namespace.policy.dispatchRateForSub') }}</span>
        <el-tooltip :content="dispatchRatePerSubContent" class="item" effect="dark" placement="top">
          <i class="el-icon-info"/>
        </el-tooltip>
        <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
          <el-form-item prop="dispatchRatePerSubBytes">
            <span>{{ $t('namespace.policy.dispatchRatePerSubBytes') }}</span>
            <md-input
              v-model="form.dispatchRatePerSubBytes"
              :placeholder="$t('namespace.policy.inputDispatchRatePerSubBytes')"
              class="md-input-style"
              name="dispatchRatePerSubBytes"
              @keyup.enter.native="handleDispatchRatePerSub"/>
          </el-form-item>
          <el-form-item prop="dispatchRatePerSubMessage">
            <span>{{ $t('namespace.policy.dispatchRatePerSubMessage') }}</span>
            <md-input
              v-model="form.dispatchRatePerSubMessage"
              :placeholder="$t('namespace.policy.inputDispatchRatePerSubMessage')"
              class="md-input-style"
              name="dispatchRatePerSubMessage"
              @keyup.enter.native="handleDispatchRatePerSub"/>
          </el-form-item>
          <el-form-item prop="dispatchRatePerSubPeriod">
            <span>{{ $t('namespace.policy.dispatchRatePerSubPeriod') }}</span>
            <md-input
              v-model="form.dispatchRatePerSubPeriod"
              :placeholder="$t('namespace.policy.inputDispatchRatePerSubPeriod')"
              class="md-input-style"
              name="dispatchRatePerSubPeriod"
              @keyup.enter.native="handleDispatchRatePerSub"/>
          </el-form-item>
        </el-form>
        <span>{{ $t('namespace.policy.subscribeRatePerConsumer') }}</span>
        <el-tooltip :content="subscribeRatePerConsumerContent" class="item" effect="dark" placement="top">
          <i class="el-icon-info"/>
        </el-tooltip>
        <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
          <el-form-item prop="subscribeRatePerConsumerSub">
            <span>{{ $t('namespace.policy.subscribeRatePerConsumerSub') }}</span>
            <md-input
              v-model="form.subscribeRatePerConsumerSub"
              :placeholder="$t('namespace.policy.inputSubscribeRate')"
              class="md-input-style"
              name="subscribeRatePerConsumerSub"
              @keyup.enter.native="handleSubscribeRate"/>
          </el-form-item>
          <el-form-item prop="subscribeRatePerConsumerPeriod">
            <span>{{ $t('namespace.policy.subscribeRatePerConsumerPeriod') }}</span>
            <md-input
              v-model="form.subscribeRatePerConsumerPeriod"
              :placeholder="$t('namespace.policy.inputSubscribeRate')"
              class="md-input-style"
              name="subscribeRatePerConsumerPeriod"
              @keyup.enter.native="handleSubscribeRate"/>
          </el-form-item>
        </el-form>
        <h4>{{ $t('namespace.policy.antiAffinity') }}</h4>
        <hr class="split-line">
        <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
          <el-form-item prop="antiAffinityGroup">
            <span>{{ $t('namespace.policy.antiAffinityGroup') }}</span>
            <el-tooltip :content="antiAffinityGroupContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.antiAffinityGroup"
              :placeholder="$t('namespace.policy.inputAntiAffinityGroup')"
              class="md-input-style"
              name="antiAffinityGroup"
              @keyup.enter.native="handleAntiAffinityGroup"/>
          </el-form-item>
        </el-form>
        <h4 style="color:#E57470">{{ $t('common.dangerZone') }}</h4>
        <hr class="danger-line">
        <el-button type="danger" class="button" @click="handleDeleteNamespace">{{ $t('namespace.deleteNamespace') }}</el-button>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="form" :rules="rules" :model="form" label-position="top">
        <div v-if="dialogStatus==='create'">
          <el-form-item :label="$t('topic.topicDomain')">
            <el-radio-group
              v-model="form.isPersistent"
              size="medium">
              <el-radio :label="$t('topic.persistent')"/>
              <el-radio :label="$t('topic.nonPersistent')"/>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('topic.topicName')" prop="topic">
            <el-input v-model="form.topic"/>
          </el-form-item>
          <el-form-item :label="$t('topic.partitions')" prop="partition">
            <el-input v-model="form.partitions"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="createTopic()">{{ $t('table.confirm') }}</el-button>
            <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
          </el-form-item>
        </div>
        <el-form-item v-if="dialogStatus==='delete'">
          <h4>{{ $t('namespace.deleteNamespaceMessage') }}</h4>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='delete'">
          <el-button type="primary" @click="deleteNamespace()">{{ $t('table.confirm') }}</el-button>
          <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { fetchTenants, fetchTenantsInfo } from '@/api/tenants'
import {
  fetchNamespaces,
  fetchNamespacePolicies,
  getPermissions,
  getPersistence,
  getRetention,
  setClusters,
  grantPermissions,
  revokePermissions,
  setSubscriptionAuthMode,
  setPersistence,
  setBacklogQuota,
  setEncryptionRequired,
  setDeduplication,
  setSchemaAutoupdateStrategy,
  setSchemaValidationEnforced,
  setMessageTtl,
  setRetention,
  setCompactionThreshold,
  setOffloadThreshold,
  setOffloadDeletionLag,
  setMaxProducersPerTopic,
  setMaxConsumersPerTopic,
  setMaxConsumersPerSubscription,
  setDispatchRate,
  setSubscriptionDispatchRate,
  setSubscribeRate,
  setAntiAffinityGroup,
  splitBundleOnCluster,
  unloadBundleOnCluster,
  unloadOnCluster,
  clearBacklogOnCluster,
  deleteNamespace,
  clearBundleBacklogOnCluster,
  fetchNamespaceStats
} from '@/api/namespaces'
import { putTopic, fetchTopicsStatsByPulsarManager } from '@/api/topics'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import MdInput from '@/components/MDinput'
import { validateEmpty } from '@/utils/validate'
import { formatBytes } from '@/utils/index'
import { numberFormatter } from '@/filters/index'

const defaultForm = {
  tenant: '',
  namespace: ''
}
export default {
  name: 'NamespaceInfo',
  components: {
    MdInput,
    Pagination
  },
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      tenantNamespace: '',
      tenantsListOptions: [],
      namespacesListOptions: [],
      activeName: 'overview',
      activeBundleCluster: '',
      namespaceStats: [{
        inMsg: 0,
        outMsg: 0,
        inBytes: 0,
        outBytes: 0
      }],
      replicatedClustersContent: this.$i18n.t('namespace.policy.replicatedClustersContent'),
      replicationClustersValue: [],
      replicationClustersOptions: [],
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
        email: ''
      },
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      roleValue: [],
      roleMap: {},
      roleMapOptions: {},
      roleOptions: [{
        value: 'consume',
        label: this.$i18n.t('role_actions.consume')
      }, {
        value: 'produce',
        label: this.$i18n.t('role_actions.produce')
      }, {
        value: 'functions',
        label: this.$i18n.t('role_actions.functions')
      }],
      authorizationContent: this.$i18n.t('namespace.policy.authorizationContent'),
      subscriptionAuthenticationMode: '',
      subscriptionAuthenticationModeContent: this.$i18n.t('namespace.policy.subscriptionAuthenticationModeContent'),
      subscriptionAuthenticationModeOptions: [{
        value: 'None',
        label: this.$i18n.t('subscription_auth_mode.none')
      }, {
        value: 'Prefix',
        label: this.$i18n.t('subscription_auth_mode.prefix')
      }],
      replicationFactorContent: this.$i18n.t('namespace.policy.replicationFactorContent'),
      form: {
        ensembleSize: '',
        writeQuorumSize: '',
        readQuorumSize: '',
        markDeleteMaxRate: '',
        backlogQuotasLimit: '',
        backlogRententionPolicy: '',
        encryptionRequire: '',
        deduplication: '',
        autoUpdateStrategy: '',
        messageTTL: '',
        retentionTime: '',
        encryptionRequireRadio: this.$i18n.t('common.disabled'),
        deduplicationRadio: this.$i18n.t('common.disabled'),
        schemaValidationEnforcedRadio: this.$i18n.t('common.disabled'),
        dispatchRatePerTopicBytes: '',
        dispatchRatePerTopicMessage: '',
        dispatchRatePerTopicPeriod: '',
        dispatchRatePerSubBytes: '',
        antiAffinityGroup: '',
        dispatchRatePerSubMessage: '',
        dispatchRatePerSubPeriod: '',
        subscribeRatePerConsumerSub: '',
        subscribeRatePerConsumerPeriod: '',
        maxConsumerPerSub: '',
        topic: '',
        isPersistent: 'Persistent',
        partitions: 0
      },
      rules: {
        topic: [{ required: true, message: 'topic is required', trigger: 'blur' }]
      },
      markDeleteRateContent: this.$i18n.t('namespace.policy.markDeleteRateContent'),
      backlogQuotasLimitContent: this.$i18n.t('namespace.policy.backlogQuotasLimitContent'),
      backlogRententionPolicyContent: this.$i18n.t('namespace.policy.backlogRententionPolicyContent'),
      backlogRententionPolicyRadio: 'consumer_backlog_eviction',
      backlogRententionPolicyOption: [{
        value: 'consumer_backlog_eviction',
        label: this.$i18n.t('backlog_policy.consumer_backlog_eviction')
      }, {
        value: 'producer_exception',
        label: this.$i18n.t('backlog_policy.producer_exception')
      }, {
        value: 'producer_request_hold',
        label: this.$i18n.t('backlog_policy.producer_request_hold')
      }],
      encryptionRequireContent: this.$i18n.t('namespace.policy.encryptionRequireContent'),
      encryptionRequireOption: [{
        value: 'Enabled',
        label: this.$i18n.t('common.enabled')
      }, {
        value: 'Disabled',
        label: this.$i18n.t('common.disabled')
      }],
      deduplicationContent: this.$i18n.t('namespace.policy.deduplicationContent'),
      deduplication: '',
      deduplicationOption: [{
        value: 'Enabled',
        label: this.$i18n.t('common.enabled')
      }, {
        value: 'Disabled',
        label: this.$i18n.t('common.disabled')
      }],
      autoUpdateStrategyContent: this.$i18n.t('namespace.policy.autoUpdateStrategyContent'),
      autoUpdateStrategyOption: [{
        value: 'Full',
        label: this.$i18n.t('schema_bc.full')
      }, {
        value: 'FullTransitive',
        label: this.$i18n.t('schema_bc.full_transitive')
      }, {
        value: 'Forward',
        label: this.$i18n.t('schema_bc.forward')
      }, {
        value: 'ForwardTransitive',
        label: this.$i18n.t('schema_bc.forward_transitive')
      }, {
        value: 'Backward',
        label: this.$i18n.t('schema_bc.backward')
      }, {
        value: 'BackwardTransitive',
        label: this.$i18n.t('schema_bc.backward_transitive')
      }, {
        value: 'AlwaysCompatible',
        label: this.$i18n.t('schema_bc.always')
      }, {
        value: 'AutoUpdateDisabled',
        label: this.$i18n.t('schema_bc.auto_update_disabled')
      }],
      schemaValidationEnforcedContent: this.$i18n.t('namespace.policy.schemaValidationEnforcedContent'),
      schemaValidationEnforced: '',
      messageTTLContent: this.$i18n.t('namespace.policy.messageTTLContent'),
      retentionSizeContent: this.$i18n.t('namespace.policy.retentionSizeContent'),
      retentionTimeContent: this.$i18n.t('namespace.policy.retentionTimeContent'),
      compactionThresholdContent: this.$i18n.t('namespace.policy.compactionThresholdContent'),
      offloadThresholdContent: this.$i18n.t('namespace.policy.offloadThresholdContent'),
      offloadDeletionLagContent: this.$i18n.t('namespace.policy.offloadDeletionLagContent'),
      maxProducersPerTopicContent: this.$i18n.t('namespace.policy.maxProducersPerTopicContent'),
      maxConsumersPerTopicContent: this.$i18n.t('namespace.policy.maxConsumersPerTopicContent'),
      maxConsumerPerSubContent: this.$i18n.t('namespace.policy.maxConsumerPerSubContent'),
      dispatchRatePerTopicContent: this.$i18n.t('namespace.policy.dispatchRatePerTopicContent'),
      dispatchRatePerSubContent: this.$i18n.t('namespace.policy.dispatchRatePerSubContent'),
      subscribeRatePerConsumerContent: this.$i18n.t('namespace.policy.subscribeRatePerConsumerContent'),
      antiAffinityGroupContent: this.$i18n.t('namespace.policy.antiAffinityGroupContent'),
      tableKey: 0,
      topicsListLoading: false,
      topicsTableKey: 0,
      brokerStats: null,
      topics: {},
      localList: [],
      tempTopicsList: [],
      topicsList: [],
      topicsTotal: 0,
      // total: 0,
      topicsListQuery: {
        page: 1,
        limit: 10
      },
      firstInit: false,
      searchTopic: '',
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        create: this.$i18n.t('topic.newTopic'),
        delete: this.$i18n.t('namespace.deleteNamespace')
      },
      currentTabName: '',
      bundleInfoContent: this.$i18n.t('namespace.bundle.bundleInfoContent')
    }
  },
  created() {
    this.postForm.tenant = this.$route.params && this.$route.params.tenant
    this.postForm.namespace = this.$route.params && this.$route.params.namespace
    this.tenantNamespace = this.postForm.tenant + '/' + this.postForm.namespace
    this.firstInit = true
    if (this.$route.query && this.$route.query.tab) {
      this.activeName = this.$route.query.tab
      this.currentTabName = this.$route.query.tab
    }
    this.getRemoteTenantsList()
    this.getNamespacesList(this.postForm.tenant)
    this.getTenantsInfo(this.postForm.tenant)
    this.getPolicies(this.tenantNamespace)
    this.initPermissions(this.tenantNamespace)
    this.initPersistence(this.tenantNamespace)
    this.initRetention(this.tenantNamespace)
    this.getStats()
    this.getTopicsStats()
    this.activeBundleCluster = this.replicationClustersValue.length > 0 ? this.replicationClustersValue[0] : ''
  },
  methods: {
    getNamespaceStats() {
      fetchNamespaceStats(this.postForm.tenant, this.postForm.namespace).then(response => {
        if (!response.data) return
        this.namespaceStats = []
        if (response.data.hasOwnProperty('inMsg')) {
          this.namespaceStats.push({
            inMsg: numberFormatter(response.data.inMsg, 2),
            outMsg: numberFormatter(response.data.outMsg, 2),
            inBytes: formatBytes(response.data.msgThroughputIn),
            outBytes: formatBytes(response.data.msgThroughputOut)
          })
        }
      })
    },
    getStats() {
      this.getNamespaceStats()
      this.getTopics()
    },
    getTopicsStats() {
      fetchTopicsStatsByPulsarManager(this.postForm.tenant, this.postForm.namespace).then(response => {
        if (!response.data) return
      })
    },
    getTopics() {
      fetchTopicsStatsByPulsarManager(this.postForm.tenant, this.postForm.namespace).then(response => {
        if (!response.data) return
        for (var i in response.data.topics) {
          var topicLink = ''
          if (response.data.topics[i]['partitions'] === 0) {
            topicLink = '/management/topics/' + response.data.topics[i]['persistent'] + '/' + this.tenantNamespace + '/' + response.data.topics[i]['topic'] + '/topic'
          } else {
            topicLink = '/management/topics/' + response.data.topics[i]['persistent'] + '/' + this.tenantNamespace + '/' + response.data.topics[i]['topic'] + '/partitionedTopic'
          }
          var children = []
          var clusters = response.data.topics[i]['clusters']
          for (var j in clusters) {
            var clusterTopicInfo = {
              'id': 1000000 * (i + 1) + j,
              'topic': clusters[j]['topic'],
              'partitions': clusters[j]['partitions'],
              'persistent': clusters[j]['persistent'],
              'producers': clusters[j]['producerCount'],
              'subscriptions': clusters[j]['subscriptionCount'],
              'inMsg': numberFormatter(clusters[j]['msgRateIn'], 2),
              'outMsg': numberFormatter(clusters[j]['msgRateOut'], 2),
              'inBytes': formatBytes(clusters[j]['msgThroughputIn']),
              'outBytes': formatBytes(clusters[j]['msgThroughputOut']),
              'storageSize': formatBytes(clusters[j]['storageSize'], 0),
              'tenantNamespace': this.tenantNamespace,
              'topicLink': topicLink + '?cluster=' + clusters[j]['topic'] + '&tab='
            }
            children.push(clusterTopicInfo)
          }

          if (clusters.length <= 0) {
            var tempCluster = {
              'id': 1000000 * (i + 1),
              'topic': '-',
              'partitions': this.form.partitions,
              'persistent': this.form.isPersistent,
              'producers': 0,
              'subscriptions': 0,
              'inMsg': 0,
              'outMsg': 0,
              'inBytes': 0,
              'outBytes': 0,
              'storageSize': 0,
              'tenantNamespace': this.tenantNamespace,
              'topicLink': topicLink
            }
            if (this.replicationClustersValue.length <= 0) {
              children.push(tempCluster)
            }
            for (var c in this.replicationClustersValue) {
              tempCluster.topic = this.replicationClustersValue[c]
              children.push(tempCluster)
            }
          }

          var topicInfo = {
            'id': i,
            'topic': response.data.topics[i]['topic'],
            'partitions': response.data.topics[i]['partitions'],
            'persistent': response.data.topics[i]['persistent'],
            'producers': response.data.topics[i]['producers'],
            'subscriptions': response.data.topics[i]['subscriptions'],
            'inMsg': numberFormatter(response.data.topics[i]['inMsg'], 2),
            'outMsg': numberFormatter(response.data.topics[i]['outMsg'], 2),
            'inBytes': formatBytes(response.data.topics[i]['inBytes']),
            'outBytes': formatBytes(response.data.topics[i]['outBytes']),
            'storageSize': formatBytes(response.data.topics[i]['storageSize'], 0),
            'children': children,
            'tenantNamespace': this.tenantNamespace,
            'topicLink': topicLink + '?tab='
          }
          this.topicsListLoading = false
          this.topicsList.push(topicInfo)
        }
      })
    },
    handleFilterTopic() {
      if (this.tempTopicsList.length <= 0) {
        for (var t = 0; t < this.topicsList.length; t++) {
          this.tempTopicsList.push(this.topicsList[t])
        }
      }
      if (!validateEmpty(this.searchTopic)) {
        this.searchList = []
        for (var i = 0; i < this.topicsList.length; i++) {
          if (this.topicsList[i]['topic'].indexOf(this.searchTopic) !== -1) {
            this.searchList.push(this.topicsList[i])
          }
        }
        this.topicsList = this.searchList
      } else {
        this.topicsList = this.tempTopicsList
      }
    },
    getPolicies(tenantNamespace) {
      fetchNamespacePolicies(tenantNamespace).then(response => {
        if (!response.data) return
        this.initPoliciesOptions(response.data)
      })
    },
    initPersistence(tenantNamespace) {
      getPersistence(tenantNamespace).then(response => {
        if (!response.data) return
        this.form.ensembleSize = String(response.data.bookkeeperEnsemble)
        this.form.writeQuorumSize = String(response.data.bookkeeperWriteQuorum)
        this.form.readQuorumSize = String(response.data.bookkeeperAckQuorum)
        this.form.markDeleteMaxRate = String(response.data.managedLedgerMaxMarkDeleteRate)
      })
    },
    initPermissions(tenantNamespace) {
      getPermissions(tenantNamespace).then(response => {
        if (!response.data) return
        for (var key in response.data) {
          this.roleMap[key] = response.data.key
          this.roleMapOptions[key] = this.roleOptions
        }
      })
    },
    initRetention(tenantNamespace) {
      getRetention(tenantNamespace).then(response => {
        if (!response.data) return
        this.form.retentionSize = String(response.data.retentionSizeInMB)
        this.form.retentionTime = String(response.data.retentionTimeInMinutes)
      })
    },
    getTenantsInfo(tenant) {
      fetchTenantsInfo(tenant).then(response => {
        this.replicationClustersOptions = []
        for (let i = 0; i < response.data.allowedClusters.length; i++) {
          this.replicationClustersOptions.push({
            value: response.data.allowedClusters[i],
            label: response.data.allowedClusters[i]
          })
        }
      })
    },
    initPoliciesOptions(policies) {
      this.replicationClustersValue = policies.replication_clusters
      this.activeBundleCluster = this.activeBundleCluster || this.replicationClustersValue.length > 0 ? this.replicationClustersValue[0] : ''
      this.subscriptionAuthenticationMode = policies.subscription_auth_mode
      this.form.backlogQuotasLimit = String(policies.backlog_quota_map.destination_storage.limit)
      this.form.backlogRententionPolicy = String(policies.backlog_quota_map.destination_storage.policy)
      if (policies.encryption_required) {
        this.form.encryptionRequireRadio = 'Enabled'
      }
      if (policies.hasOwnProperty('deduplicationRadio')) {
        this.form.deduplicationRadio = policies.deduplicationRadio
      }
      this.form.autoUpdateStrategy = policies.schema_auto_update_compatibility_strategy
      if (policies.schema_validation_enforced) {
        this.form.schemaValidationEnforcedRadio = 'Enabled'
      }
      this.form.messageTTL = String(policies.message_ttl_in_seconds)
      this.form.compactionThreshold = String(policies.compaction_threshold)
      this.form.offloadThreshold = String(policies.offload_threshold)
      if (policies.hasOwnProperty('offload_deletion_lag_ms')) {
        this.form.offloadDeletionLag = String(policies.offload_deletion_lag_ms)
      }
      this.form.maxProducersPerTopic = String(policies.max_producers_per_topic)
      this.form.maxConsumersPerTopic = String(policies.max_consumers_per_topic)
      this.form.maxConsumerPerSub = String(policies.max_consumers_per_subscription)
      for (var t in policies.topicDispatchRate) {
        this.form.dispatchRatePerTopicMessage = String(policies.topicDispatchRate[t].dispatchThrottlingRateInMsg)
        this.form.dispatchRatePerTopicBytes = String(policies.topicDispatchRate[t].dispatchThrottlingRateInByte)
        this.form.dispatchRatePerTopicPeriod = String(policies.topicDispatchRate[t].ratePeriodInSecond)
      }
      for (var s in policies.subscriptionDispatchRate) {
        this.form.dispatchRatePerSubBytes = String(policies.subscriptionDispatchRate[s].dispatchThrottlingRateInByte)
        this.form.dispatchRatePerSubMessage = String(policies.subscriptionDispatchRate[s].dispatchThrottlingRateInMsg)
        this.form.dispatchRatePerSubPeriod = String(policies.subscriptionDispatchRate[s].ratePeriodInSecond)
      }
      for (var c in policies.clusterSubscribeRate) {
        this.form.subscribeRatePerConsumerSub = String(policies.clusterSubscribeRate[c].subscribeThrottlingRatePerConsumer)
        this.form.subscribeRatePerConsumerPeriod = String(policies.clusterSubscribeRate[c].ratePeriodInSecond)
      }
      if (policies.hasOwnProperty('antiAffinityGroup')) {
        this.form.antiAffinityGroup = policies.antiAffinityGroup
      }
      // this.listQuery.limit = policies.bundles.numBundles
      // this.listQuery.page = 1
      // this.total = policies.bundles.numBundles
      for (var n = 0; n < policies.bundles.numBundles; n++) {
        this.localList.push({ 'bundle': policies.bundles.boundaries[n] + '_' + policies.bundles.boundaries[n + 1] })
      }
    },
    handleClick(tab, event) {
      this.currentTabName = tab.name
      this.$router.push({ query: { 'tab': tab.name }})
    },
    handleBundleTabClick(tab, event) {
      this.activeBundleCluster = tab.name
    },
    getRemoteTenantsList() {
      fetchTenants().then(response => {
        if (!response.data) return
        for (var i = 0; i < response.data.total; i++) {
          this.tenantsListOptions.push(response.data.data[i].tenant)
        }
      })
    },
    getNamespacesList(tenant) {
      fetchNamespaces(tenant, this.query).then(response => {
        let namespace = []
        this.namespacesListOptions = []
        if (this.firstInit) {
          this.firstInit = false
        } else {
          this.postForm.namespace = ''
        }
        for (var i = 0; i < response.data.data.length; i++) {
          namespace = response.data.data[i].namespace
          this.namespacesListOptions.push(namespace)
        }
      })
    },
    getNamespaceInfo(tenant, namespace) {
      this.$router.push({ path: '/management/namespaces/' + tenant + '/' + namespace + '/namespace?tab=' + this.currentTabName })
    },
    handleFilterBundle() {
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      revokePermissions(this.tenantNamespace, tag).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.removeRoleSuccess'),
          type: 'success',
          duration: 3000
        })
        delete this.roleMap[tag]
        delete this.roleMapOptions[tag]
      })
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        if (this.roleMap.hasOwnProperty(inputValue)) {
          this.$message({
            message: this.$i18n.t('namespace.policy.roleAlreadyExists'),
            type: 'error'
          })
          this.inputVisible = false
          this.inputValue = ''
          return
        }
        grantPermissions(this.tenantNamespace, inputValue, this.roleMap[inputValue]).then(response => {
          this.$notify({
            title: 'success',
            message: this.$i18n.t('namespace.notification.addRoleSuccess'),
            type: 'success',
            duration: 3000
          })
          this.dynamicTags.push(inputValue)
          this.roleMap[inputValue] = []
          this.roleMapOptions[inputValue] = this.roleOptions
        })
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleChangeOptions() {
      this.$forceUpdate()
    },
    revokeAllRole() {
    },
    handlePersistence() {
      const data = {
        'bookkeeperAckQuorum': parseInt(this.form.readQuorumSize),
        'bookkeeperEnsemble': parseInt(this.form.ensembleSize),
        'bookkeeperWriteQuorum': parseInt(this.form.writeQuorumSize),
        'managedLedgerMaxMarkDeleteRate': parseInt(this.form.markDeleteMaxRate)
      }
      setPersistence(this.tenantNamespace, data).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.updatePersistenceSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleBacklogQuota() {
      const data = {
        'limit': this.form.backlogQuotasLimit,
        'policy': this.form.backlogRententionPolicy
      }
      setBacklogQuota(this.tenantNamespace, data).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.updateBacklogQuotaSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleSplitBundle(row) {
      splitBundleOnCluster(this.activeBundleCluster, this.tenantNamespace, row.bundle, false).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.splitBundleSuccess'),
          type: 'success',
          duration: 3000
        })
        this.localList = []
        this.getPolicies(this.tenantNamespace)
      })
    },
    handleUnloadAll() {
      unloadOnCluster(this.activeBundleCluster, this.tenantNamespace).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.unloadAllBundlesSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleUnloadBundle(row) {
      unloadBundleOnCluster(this.activeBundleCluster, this.tenantNamespace, row.bundle).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.unloadBundleSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    hanldeClearAllBacklog() {
      clearBacklogOnCluster(this.activeBundleCluster, this.tenantNamespace).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.clearBacklogSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleClearBundleBacklog(row) {
      clearBundleBacklogOnCluster(this.activeBundleCluster, this.tenantNamespace, row.bundle).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.clearBundleBacklogSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleReplicationsClusters() {
      setClusters(this.tenantNamespace, this.replicationClustersValue).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.updateReplicatedClustersSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleSubscriptionAuthMode() {
      var subAuthMode = 0
      if (this.subscriptionAuthenticationMode === 'Prefix') {
        subAuthMode = 1
      }
      setSubscriptionAuthMode(this.tenantNamespace, subAuthMode).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.updateSubscriptionAuthModeSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleEncryption() {
      let encryptionRequire = false
      let successMessage = this.$i18n.t('namespace.notification.disableEncryptionSuccess')
      if (this.form.encryptionRequireRadio === 'Enabled') {
        encryptionRequire = true
        successMessage = this.$i18n.t('namespace.notification.enableEncryptionSuccess')
      }
      setEncryptionRequired(this.tenantNamespace, encryptionRequire).then(response => {
        this.$notify({
          title: 'success',
          message: successMessage,
          type: 'success',
          duration: 3000
        })
      })
    },
    handleDeduplication() {
      let deduplication = false
      let successMessage = this.$i18n.t('namespace.notification.disableDeduplicationSuccess')
      if (this.form.deduplicationRadio === 'Enabled') {
        deduplication = true
        successMessage = this.$i18n.t('namespace.notification.enableDeduplicationSuccess')
      }
      setDeduplication(this.tenantNamespace, deduplication).then(response => {
        this.$notify({
          title: 'success',
          message: successMessage,
          type: 'success',
          duration: 3000
        })
      })
    },
    handleSchemaAutoUpdateStrategy() {
      var strategy = 3
      if (this.form.autoUpdateStrategy === 'AutoUpdateDisabled') {
        strategy = 0
      } else if (this.form.autoUpdateStrategy === 'Backward') {
        strategy = 1
      } else if (this.form.autoUpdateStrategy === 'Forward') {
        strategy = 2
      } else if (this.form.autoUpdateStrategy === 'Full') {
        strategy = 3
      } else if (this.form.autoUpdateStrategy === 'AlwaysCompatible') {
        strategy = 4
      } else if (this.form.autoUpdateStrategy === 'BackwardTransitive') {
        strategy = 5
      } else if (this.form.autoUpdateStrategy === 'ForwardTransitive') {
        strategy = 6
      } else if (this.form.autoUpdateStrategy === 'FullTransitive') {
        strategy = 7
      }
      setSchemaAutoupdateStrategy(this.tenantNamespace, strategy).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.updateSchemaAutoUpdateStrategySuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleSchemaValidationEnforced() {
      var schemaValidation = false
      var successMessage = this.$i18n.t('namespace.notification.disableSchemaValidationEnforcedSuccess')
      if (this.form.schemaValidationEnforcedRadio === 'Enabled') {
        schemaValidation = true
        successMessage = this.$i18n.t('namespace.notification.enableSchemaValidationEnforcedSuccess')
      }
      setSchemaValidationEnforced(this.tenantNamespace, schemaValidation).then(response => {
        this.$notify({
          title: 'success',
          message: successMessage,
          type: 'success',
          duration: 3000
        })
      })
    },
    handleMessageTTL() {
      setMessageTtl(this.tenantNamespace, parseInt(this.form.messageTTL)).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.updateMessageTTLSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleRetention() {
      const data = { 'retentionSizeInMB': parseInt(this.form.retentionSize), 'retentionTimeInMinutes': parseInt(this.form.retentionTime) }
      setRetention(this.tenantNamespace, data).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.updateRetentionSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleCompactionThreshold() {
      setCompactionThreshold(this.tenantNamespace, this.form.compactionThreshold).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.updateCompactionThresholdSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleOffloadThreshold() {
      setOffloadThreshold(this.tenantNamespace, this.form.offloadThreshold).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.updateOffloadThresholdSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleOffloadDeletionLag() {
      setOffloadDeletionLag(this.tenantNamespace, this.form.offloadDeletionLag).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.updateOffloadDeletionLagSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleMaxProducersPerTopic() {
      setMaxProducersPerTopic(this.tenantNamespace, this.form.maxProducersPerTopic).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.setMaxProducersSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleMaxConsumersPerTopic() {
      setMaxConsumersPerTopic(this.tenantNamespace, this.form.maxConsumersPerTopic).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.setMaxConsumersSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleMaxConsuemrsPerSubscription() {
      setMaxConsumersPerSubscription(this.tenantNamespace, this.form.maxConsumerPerSub).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.setMaxConsumersPerSubscriptionSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleDispatchRatePerTopic() {
      const data = {
        'dispatchThrottlingRateInByte': this.form.dispatchRatePerTopicBytes,
        'ratePeriodInSecond': this.form.dispatchRatePerTopicPeriod,
        'dispatchThrottlingRateInMsg': this.form.dispatchRatePerTopicMessage
      }
      setDispatchRate(this.tenantNamespace, data).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.setDispatchRateSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleDispatchRatePerSub() {
      const data = {
        'dispatchThrottlingRateInByte': this.form.dispatchRatePerSubBytes,
        'ratePeriodInSecond': this.form.dispatchRatePerSubPeriod,
        'dispatchThrottlingRateInMsg': this.form.dispatchRatePerSubMessage
      }
      setSubscriptionDispatchRate(this.tenantNamespace, data).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.setDispatchRatePerSubscriptionSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleSubscribeRate() {
      const data = {
        'subscribeThrottlingRatePerConsumer': this.form.subscribeRatePerConsumerSub,
        'ratePeriodInSecond': this.form.subscribeRatePerConsumerPeriod
      }
      setSubscribeRate(this.tenantNamespace, data).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.setSubscribeRateSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleAntiAffinityGroup() {
      setAntiAffinityGroup(this.tenantNamespace, this.form.antiAffinityGroup).then(response => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.notification.setAntiAffinityGroupSuccess'),
          type: 'success',
          duration: 3000
        })
      })
    },
    handleDeleteNamespace() {
      this.dialogStatus = 'delete'
      this.dialogFormVisible = true
    },
    deleteNamespace() {
      deleteNamespace(this.tenantNamespace).then((response) => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('namespace.deleteNsSuccessNotification'),
          type: 'success',
          duration: 2000
        })
        this.$router.push({ path: '/management/tenants/tenantInfo/' + this.postForm.tenant + '?tab=namespaces' })
      })
    },
    handleCreateTopic() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.form.topic = ''
      this.form.isPersistent = 'Persistent'
      this.form.partitions = 0
    },
    generalCreateTopic(persistent) {
      putTopic(
        persistent,
        this.postForm.tenant,
        this.postForm.namespace,
        this.form.topic, parseInt(this.form.partitions)).then(() => {
        this.$notify({
          title: 'success',
          message: this.$i18n.t('topic.notification.createTopicSuccess'),
          type: 'success',
          duration: 2000
        })
        this.dialogFormVisible = false
        this.topicsList = []
        this.tempTopicsList = []
        this.getTopics()
      })
    },
    createTopic() {
      // if (this.form.topic === null || this.form.topic.length <= 0) {
      //   this.$notify({
      //     title: 'error',
      //     message: 'Topic name is incorrect',
      //     type: 'error',
      //     duration: 3000
      //   })
      //   return
      // }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.isPersistent === 'Persistent') {
            this.generalCreateTopic('persistent')
          } else if (this.form.isPersistent === 'Non-persistent') {
            this.generalCreateTopic('non-persistent')
          }
        }
      })
    }
  }
}
</script>

<style>
.role-el-tag {
  background-color: #fff !important;
  border: none !important;
  font-size: 16px !important;
  color: black !important;
}
.split-line {
  background: #e6e9f3;
  border: none;
  height: 1px;
}
.danger-line {
  background: red;
  border: none;
  height: 1px;
}
.md-input-style {
  width: 300px;
  margin-top: 8px !important;
}
</style>