<template>
  <div class="app-container">
    <div class="createPost-container">
      <el-form :inline="true" :model="postForm" class="form-container">
        <el-form-item class="postInfo-container-item" label="Tenant">
          <el-select v-model="postForm.tenant" placeholder="select tenant" @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 class="postInfo-container-item" label="Namespace">
          <el-select v-model="postForm.namespace" placeholder="select namespace" @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="OVERVIEW" name="overview">
        <el-table
          :data="namespaceStats"
          border
          style="width: 100%">
          <el-table-column prop="inMsg" label="In - msg/s"/>
          <el-table-column prop="outMsg" label="Out - msg/s"/>
          <el-table-column prop="inBytes" label="In - bytes/s"/>
          <el-table-column prop="outBytes" label="Out - bytes/s"/>
        </el-table>
        <h4>Bundles</h4>
        <hr class="split-line">
        <div class="filter-container">
          <!-- <el-input placeholder="Search Bundles" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilterBundle"/> -->
          <!-- <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilterBundle">{{ $t('table.search') }}</el-button> -->
          <el-button class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-delete" @click="handleUnloadAll">Unload All</el-button>
          <el-button class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-delete" @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="Bundle" align="center" min-width="100px">
            <template slot-scope="scope">
              <span>{{ scope.row.bundle }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Operations" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="medium" type="danger" @click="handleSplitBundle(scope.row)">Split</el-button>
              <el-button size="medium" type="danger" @click="handleUnloadBundle(scope.row)">Unload</el-button>
              <el-button size="medium" type="danger" @click="handleClearBundleBacklog(scope.row)">Clear Backlog</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"/> -->
      </el-tab-pane>
      <el-tab-pane label="TOPICS" name="topics">
        <el-input v-model="searchTopic" placeholder="Query Topics" style="width: 200px;" @keyup.enter.native="handleFilterTopic"/>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilterTopic">{{ $t('table.search') }}</el-button>
        <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreateTopic">{{ $t('table.add') }}</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;padding-right:8px;margin-bottom:30px;">
            <el-table
              v-loading="topicsListLoading"
              :key="topicsTableKey"
              :data="topicsList"
              border
              fit
              highlight-current-row
              style="width: 100%;">
              <el-table-column label="Topic" min-width="50px" align="center">
                <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="Partitions" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.partitions }}</span>
                </template>
              </el-table-column>
              <el-table-column label="Persistent" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.persistent }}</span>
                </template>
              </el-table-column>
              <el-table-column label="Producers" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.producers }}</span>
                </template>
              </el-table-column>
              <el-table-column label="Subscriptions" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.subscriptions }}</span>
                </template>
              </el-table-column>
              <el-table-column label="In - msg/s" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.inMsg }}</span>
                </template>
              </el-table-column>
              <el-table-column label="Out - msg/s" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.outMsg }}</span>
                </template>
              </el-table-column>
              <el-table-column label="In - bytes/s" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.inBytes }}</span>
                </template>
              </el-table-column>
              <el-table-column label="Out - bytes/s" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.outBytes }}</span>
                </template>
              </el-table-column>
              <el-table-column label="Storage Size" 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="POLICIES" name="policies">
        <h4>Namespace Name</h4>
        <hr class="split-line">
        <span>{{ tenantNamespace }}</span>
        <h4>Clusters</h4>
        <hr class="split-line">
        <div class="component-item">
          <div class="section-title">
            <span>Replicated Clusters</span>
            <el-tooltip :content="replicatedClustersContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
          </div>
          <el-select
            v-model="replicationClustersValue"
            style="width:500px;margin-top:20px"
            multiple
            placeholder="Please Select Cluster"
            @change="handleReplicationsClusters()">
            <el-option v-for="item in replicationClustersOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <h4>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]"
              multiple
              placeholder="Please Select Options"
              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)">删除</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()">Add Role</el-button>
            <!-- <el-button @click="revokeAllRole()">Revoke All</el-button> -->
          </el-form-item>
        </el-form>
        <h4>Subscription Authentication</h4>
        <hr class="split-line">
        <div class="section-title">
          <span>Subscription Authentication Mode</span>
          <el-tooltip :content="subscriptionAuthenticationModeContent" class="item" effect="dark" placement="top">
            <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>Storage</h4>
        <hr class="split-line">
        <div class="section-title">
          <span>Replication Factor</span>
          <el-tooltip :content="replicationFactorContent" class="item" effect="dark" placement="top">
            <i class="el-icon-info"/>
          </el-tooltip>
        </div>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="ensembelSize">
            <md-input
              v-model="form.ensembleSize"
              class="md-input-style"
              name="ensembelSize"
              placeholder="Please input Ensemble"
              @keyup.enter.native="handlePersistence">
              Ensemble Size
            </md-input>
          </el-form-item>
          <el-form-item prop="writeQuorumSize">
            <md-input
              v-model="form.writeQuorumSize"
              class="md-input-style"
              name="writeQuorumSize"
              placeholder="Please input Write Quorum Size"
              @keyup.enter.native="handlePersistence">
              Write Quorum Size
            </md-input>
          </el-form-item>
          <el-form-item prop="readQuorumSize">
            <md-input
              v-model="form.readQuorumSize"
              class="md-input-style"
              name="readQuorumSize"
              placeholder="Please input Read Quorum Size"
              @keyup.enter.native="handlePersistence">
              Read Quorum Size
            </md-input>
          </el-form-item>
          <el-form-item prop="markDeleteMaxRate">
            <md-input
              v-model="form.markDeleteMaxRate"
              class="md-input-style"
              name="markDeleteMaxRate"
              placeholder="Please input Delete Max Rate"
              @keyup.enter.native="handlePersistence">
              Mark Delete Max Rate
            </md-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="backlogQuotasLimit">
            <span>Backlog Quotas Limit</span>
            <el-tooltip :content="backlogQuotasLimitContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.backlogQuotasLimit"
              class="md-input-style"
              name="backlogQuotasLimit"
              placeholder="Please input Backlog Quotas Limit"
              @keyup.enter.native="handleBacklogQuota">
              Backlog Quotas Limit
            </md-input>
          </el-form-item>
          <el-form-item style="width:300px">
            <span>Backlog Retention Policy</span>
            <el-tooltip :content="backlogRententionPolicyContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <br>
            <el-select
              v-model="form.backlogRententionPolicy"
              placeholder="Please select backlog rentention policy"
              style="margin-top:36px;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>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="encryptionRequire">
            <span>Encryption Require</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:30px;width:300px"
              @change="handleEncryption()">
              <el-radio label="Enabled"/>
              <el-radio label="Disabled"/>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="deduplication">
            <span>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:30px;width:300px"
              @change="handleDeduplication()">
              <el-radio label="Enabled"/>
              <el-radio label="Disabled"/>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <h4>Schema</h4>
        <hr class="split-line">
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="autoUpdateStrategy">
            <span>AutoUpdate Strategy</span>
            <el-tooltip :content="autoUpdateStrategyContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <br>
            <el-select
              v-model="form.autoUpdateStrategy"
              placeholder="Please select backlog autoUpdate strategy"
              style="margin-top:30px;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>Schema Validation Enforced</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:39px;width:300px"
              @change="handleSchemaValidationEnforced()">
              <el-radio label="Enabled"/>
              <el-radio label="Disabled"/>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <h4>Cleanup Policy</h4>
        <hr class="split-line">
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="messageTTL">
            <span>Message TTL(Unit Second)</span>
            <el-tooltip :content="messageTTLContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.messageTTL"
              class="md-input-style"
              name="messageTTL"
              placeholder="Please input Backlog Quotas Limit"
              @keyup.enter.native="handleMessageTTL">
              Default 0
            </md-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="retentionSize">
            <span>Retention Size</span>
            <el-tooltip :content="retentionSizeContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.retentionSize"
              class="md-input-style"
              name="retentionSize"
              placeholder="Please input retention size"
              @keyup.enter.native="handleRetention">
              retention size default 0
            </md-input>
          </el-form-item>
          <el-form-item prop="retentionTime">
            <span>Retention Time(Unit Minutes)</span>
            <el-tooltip :content="retentionTimeContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.retentionTime"
              class="md-input-style"
              name="retentionTime"
              placeholder="Please input Retention Time"
              @keyup.enter.native="handleRetention">
              Default 0
            </md-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="compactionThreshold">
            <span>Compaction Threshold</span>
            <el-tooltip :content="compactionThresholdContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.compactionThreshold"
              class="md-input-style"
              name="compactionThreshold"
              placeholder="Please input retention size"
              @keyup.enter.native="handleCompactionThreshold">
              Default 0
            </md-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="offloadThreshold">
            <span>Offload Threshold</span>
            <el-tooltip :content="offloadThresholdContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.offloadThreshold"
              class="md-input-style"
              name="offloadThreshold"
              placeholder="Please input Offload Threshold"
              @keyup.enter.native="handleOffloadThreshold">
              Default -1
            </md-input>
          </el-form-item>
          <el-form-item prop="offloadDeletionLag">
            <span>Offload Deletion Lag</span>
            <el-tooltip :content="offloadDeletionLagContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.offloadDeletionLag"
              class="md-input-style"
              name="offloadDeletionLag"
              placeholder="Please input Retention Time"
              @keyup.enter.native="handleOffloadDeletionLag">
              Default -1
            </md-input>
          </el-form-item>
        </el-form>
        <h4>Throttling</h4>
        <hr class="split-line">
        <el-form :inline="true" :model="form" :rules="rules">
          <el-form-item prop="maxProducersPerTopic">
            <span>Max Producers Per Topic</span>
            <el-tooltip :content="maxProducersPerTopicContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.maxProducersPerTopic"
              class="md-input-style"
              name="maxProducersPerTopic"
              placeholder="Please input max Producers"
              @keyup.enter.native="handleMaxProducersPerTopic">
              Default 0
            </md-input>
          </el-form-item>
          <el-form-item prop="maxConsumersPerTopic">
            <span>Max Consumers Per Topic</span>
            <el-tooltip :content="maxConsumersPerTopicContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.maxConsumersPerTopic"
              class="md-input-style"
              name="maxConsumersPerTopic"
              placeholder="Please input max Consumers"
              @keyup.enter.native="handleMaxConsumersPerTopic">
              Default 0
            </md-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
          <el-form-item prop="maxConsumerPerSub">
            <span>Max Consumers Per Subscription</span>
            <el-tooltip :content="maxConsumerPerSubContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.maxConsumerPerSub"
              class="md-input-style"
              name="maxConsumerPerSub"
              placeholder="Please input max Consumers"
              @keyup.enter.native="handleMaxConsuemrsPerSubscription">
              Default 0
            </md-input>
          </el-form-item>
        </el-form>
        <h4>Dispatch Rate</h4>
        <hr class="split-line">
        <span>Dispatch Rate Per Topic</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>bytes/second</span>
            <md-input
              v-model="form.dispatchRatePerTopicBytes"
              class="md-input-style"
              name="dispatchRatePerTopicBytes"
              placeholder="Please input dispatch rate"
              @keyup.enter.native="handleDispatchRatePerTopic">
              Default -1
            </md-input>
          </el-form-item>
          <el-form-item prop="dispatchRatePerTopicMessage">
            <span>message/second</span>
            <md-input
              v-model="form.dispatchRatePerTopicMessage"
              class="md-input-style"
              name="dispatchRatePerTopicMessage"
              placeholder="Please input dispatch rate"
              @keyup.enter.native="handleDispatchRatePerTopic">
              Default -1
            </md-input>
          </el-form-item>
          <el-form-item prop="dispatchRatePerTopicPeriod">
            <span>period(Unit second)</span>
            <md-input
              v-model="form.dispatchRatePerTopicPeriod"
              class="md-input-style"
              name="dispatchRatePerTopicPeriod"
              placeholder="Please input dispatch rate"
              @keyup.enter.native="handleDispatchRatePerTopic">
              Default -1
            </md-input>
          </el-form-item>
        </el-form>
        <span>Dispatch Rate Per Subscription</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>bytes/second</span>
            <md-input
              v-model="form.dispatchRatePerSubBytes"
              class="md-input-style"
              name="dispatchRatePerSubBytes"
              placeholder="Please input dispatch rate"
              @keyup.enter.native="handleDispatchRatePerSub">
              Default -1
            </md-input>
          </el-form-item>
          <el-form-item prop="dispatchRatePerSubMessage">
            <span>message/second</span>
            <md-input
              v-model="form.dispatchRatePerSubMessage"
              class="md-input-style"
              name="dispatchRatePerSubMessage"
              placeholder="Please input dispatch rate"
              @keyup.enter.native="handleDispatchRatePerSub">
              Default -1
            </md-input>
          </el-form-item>
          <el-form-item prop="dispatchRatePerSubPeriod">
            <span>period(Unit Second)</span>
            <md-input
              v-model="form.dispatchRatePerSubPeriod"
              class="md-input-style"
              name="dispatchRatePerSubPeriod"
              placeholder="Please input dispatch rate"
              @keyup.enter.native="handleDispatchRatePerSub">
              Default -1
            </md-input>
          </el-form-item>
        </el-form>
        <span>Subscribe Rate Per Consumer</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>message/second</span>
            <md-input
              v-model="form.subscribeRatePerConsumerSub"
              class="md-input-style"
              name="subscribeRatePerConsumerSub"
              placeholder="Please input subscribe rate"
              @keyup.enter.native="handleSubscribeRate">
              Default -1
            </md-input>
          </el-form-item>
          <el-form-item prop="subscribeRatePerConsumerPeriod">
            <span>period(Unit Second)</span>
            <md-input
              v-model="form.subscribeRatePerConsumerPeriod"
              class="md-input-style"
              name="subscribeRatePerConsumerPeriod"
              placeholder="Please input subscribe rate"
              @keyup.enter.native="handleSubscribeRate">
              Default -1
            </md-input>
          </el-form-item>
        </el-form>
        <h4>Anti Affinity</h4>
        <hr class="split-line">
        <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
          <el-form-item prop="antiAffinityGroup">
            <span>Anti Affinity Group</span>
            <el-tooltip :content="antiAffinityGroupContent" class="item" effect="dark" placement="top">
              <i class="el-icon-info"/>
            </el-tooltip>
            <md-input
              v-model="form.antiAffinityGroup"
              class="md-input-style"
              name="antiAffinityGroup"
              placeholder="Please input Anti Affinity Group"
              @keyup.enter.native="handleAntiAffinityGroup"/>
          </el-form-item>
        </el-form>
        <h4>Danager Zone</h4>
        <hr class="danger-line">
        <el-button type="danger" class="button" @click="deleteNamespace">Delete Namespace</el-button>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <div v-if="dialogStatus==='create'">
          <el-form-item :label="$t('table.topic')" prop="topic">
            <el-input v-model="form.topic"/>
          </el-form-item>
          <el-form-item label="Persistent">
            <el-radio-group
              v-model="form.isPersistent"
              size="medium">
              <el-radio label="Persistent"/>
              <el-radio label="Non-persistent"/>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('table.partition')" prop="partition">
            <el-input v-model="form.partitions"/>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="createTopic()">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { fetchTenants } 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,
  splitBundle,
  unloadBundle,
  unload,
  clearBacklog,
  deleteNamespace,
  clearBundleBacklog
} from '@/api/namespaces'
import { fetchBrokerStatsTopics } from '@/api/brokerStats'
import { putTopic, fetchTopicsByPulsarManager } from '@/api/topics'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import ElDragSelect from '@/components/DragSelect' // base on element-ui
import MdInput from '@/components/MDinput'
import { validateEmpty } from '@/utils/validate'

const defaultForm = {
  tenant: '',
  namespace: ''
}
export default {
  name: 'NamespaceInfo',
  components: {
    ElDragSelect,
    MdInput,
    Pagination
  },
  data() {
    // const validate = (rule, value, callback) => {
    //   if (value.length !== 6) {
    //     callback(new Error('请输入六个字符'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      postForm: Object.assign({}, defaultForm),
      tenantNamespace: '',
      tenantsListOptions: [],
      namespacesListOptions: [],
      activeName: 'overview',
      namespaceStats: [{
        inMsg: 0,
        outMsg: 0,
        inBytes: 0,
        outBytes: 0
      }],
      replicatedClustersContent: 'This is Allowed Clusters',
      replicationClustersValue: [],
      replicationClustersOptions: [],
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
        email: ''
      },
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      roleValue: [],
      roleMap: {},
      roleMapOptions: {},
      roleOptions: [{
        value: 'consume',
        label: 'consume'
      }, {
        value: 'produce',
        label: 'produce'
      }, {
        value: 'functions',
        label: 'functions'
      }],
      authorizationContent: 'This is AuthorizationContent',
      subscriptionAuthenticationMode: '',
      subscriptionAuthenticationModeContent: 'This is subscriptionAuthenticationMode',
      subscriptionAuthenticationModeOptions: [{
        value: 'None',
        label: 'None'
      }, {
        value: 'Prefix',
        label: 'Prefix'
      }],
      replicationFactorContent: 'This is replicationFactorContent',
      form: {
        ensembelSize: '',
        writeQuorumSize: '',
        readQuorumSize: '',
        markDeleteMaxRate: '',
        backlogQuotasLimit: '',
        backlogRententionPolicy: '',
        encryptionRequire: '',
        deduplication: '',
        autoUpdateStrategy: '',
        messageTTL: '',
        retentionTime: '',
        encryptionRequireRadio: 'Disabled',
        deduplicationRadio: 'Disabled',
        schemaValidationEnforcedRadio: 'Disabled',
        dispatchRatePerTopicBytes: '',
        dispatchRatePerTopicMessage: '',
        dispatchRatePerTopicPeriod: '',
        dispatchRatePerSubBytes: '',
        antiAffinityGroup: '',
        dispatchRatePerSubMessage: '',
        dispatchRatePerSubPeriod: '',
        subscribeRatePerConsumerSub: '',
        subscribeRatePerConsumerPeriod: '',
        maxConsumerPerSub: '',
        topic: '',
        isPersistent: 'Persistent',
        partitions: 0
      },
      rules: {
        // ensembelSize: [{ required: true, message: 'EnsembelSize is greater more than 0', trigger: 'blur' }]
      },
      backlogQuotasLimitContent: 'This is backlogQuotasLimitContent',
      backlogRententionPolicyContent: 'This is backlogRententionPolicyContent',
      backlogRententionPolicyRadio: 'consumer_backlog_eviction',
      backlogRententionPolicyOption: [{
        value: 'consumer_backlog_eviction',
        label: 'consumer_backlog_eviction'
      }, {
        value: 'producer_exception',
        label: 'producer_exception'
      }, {
        value: 'producer_request_hold',
        lable: 'producer_request_hold'
      }],
      encryptionRequireContent: 'This is encryptionRequireContent',
      encryptionRequireOption: [{
        value: 'Enabled',
        label: 'Enabled'
      }, {
        value: 'Disabled',
        label: 'Disabled'
      }],
      deduplicationContent: 'This is deduplicationContent',
      deduplication: '',
      deduplicationOption: [{
        value: 'Enabled',
        label: 'Enabled'
      }, {
        value: 'Disabled',
        label: 'Disabled'
      }],
      autoUpdateStrategyContent: 'This is schemaValidationEnforced',
      autoUpdateStrategyOption: [{
        value: 'Full',
        label: 'Full'
      }, {
        value: 'Forward',
        label: 'Forward'
      }, {
        value: 'Backward',
        label: 'Backward'
      }, {
        value: 'AlwaysCompatible',
        label: 'Always Compatible'
      }, {
        value: 'AutoUpdateDisabled',
        label: 'AutoUpdateDisabled'
      }, {
        value: 'BackwardTransitive',
        label: 'BackwardTransitive'
      }, {
        value: 'ForwardTransitive',
        label: 'ForwardTransitive'
      }, {
        value: 'FullTransitive',
        label: 'FullTransitive'
      }],
      schemaValidationEnforcedContent: 'This is schemaValidationEnforcedContent',
      schemaValidationEnforced: '',
      messageTTLContent: 'This is messageTTLContent',
      retentionSizeContent: 'This is retentionSizeContent',
      retentionTimeContent: 'This is retentionTimeContent',
      compactionThresholdContent: 'This is compactionThresholdContent',
      offloadThresholdContent: 'This is offloadThresholdContent',
      offloadDeletionLagContent: 'This is offloadDeletionLagContent',
      maxProducersPerTopicContent: 'This is maxProducersPerTopicContent',
      maxConsumersPerTopicContent: 'This is maxConsumersPerTopicContent',
      maxConsumerPerSubContent: 'This is maxConsumerPerSubContent',
      dispatchRatePerTopicContent: 'This is dispatchRatePerTopicContent',
      dispatchRatePerSubContent: 'This is dispatchRatePerSubContent',
      subscribeRatePerConsumerContent: 'This is subscribeRatePerConsumerContent',
      antiAffinityGroupContent: 'This is antiAffinityGroupContent',
      tableKey: 0,
      topicsListLoading: true,
      topicsTableKey: 0,
      brokerStats: null,
      topics: {},
      localList: [],
      tempTopicsList: [],
      topicsList: [],
      topicsTotal: 0,
      // total: 0,
      topicsListQuery: {
        page: 1,
        limit: 10
      },
      firstInit: false,
      searchTopic: '',
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      currentTabName: ''
    }
  },
  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.getPolicies(this.tenantNamespace)
    this.initPermissions(this.tenantNamespace)
    this.initPersistence(this.tenantNamespace)
    this.initRetention(this.tenantNamespace)
    this.getStats()
  },
  methods: {
    getStats() {
      this.getTopics()
    },
    getTopics() {
      fetchTopicsByPulsarManager(this.postForm.tenant, this.postForm.namespace).then(response => {
        if (!response.data) return
        for (var i in response.data.topics) {
          this.topics[response.data.topics[i]['topic']] = i
          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'
          }
          this.topicsList.push({
            'topic': response.data.topics[i]['topic'],
            'partitions': response.data.topics[i]['partitions'],
            'persistent': response.data.topics[i]['persistent'],
            'producers': 0,
            'subscriptions': 0,
            'inMsg': 0,
            'outMsg': 0,
            'inBytes': 0,
            'outBytes': 0,
            'storageSize': 0,
            'tenantNamespace': this.tenantNamespace,
            'topicLink': topicLink
          })
        }
        fetchBrokerStatsTopics('').then(res => {
          if (!res.data) return
          this.brokerStats = res.data
          if (this.brokerStats.hasOwnProperty(this.tenantNamespace)) {
            for (var bundle in this.brokerStats[this.tenantNamespace]) {
              for (var p in this.brokerStats[this.tenantNamespace][bundle]) {
                for (var topic in this.brokerStats[this.tenantNamespace][bundle][p]) {
                  this.namespaceStats[0].inMsg += this.brokerStats[this.tenantNamespace][bundle][p][topic].msgRateIn
                  this.namespaceStats[0].outMsg += this.brokerStats[this.tenantNamespace][bundle][p][topic].msgRateOut
                  this.namespaceStats[0].inBytes += this.brokerStats[this.tenantNamespace][bundle][p][topic].msgThroughputIn
                  this.namespaceStats[0].outBytes += this.brokerStats[this.tenantNamespace][bundle][p][topic].msgThroughputOut
                  var topicName = topic.split('://')[1].split('/')[2]
                  var isPartition = false
                  if (topicName.indexOf('-partition-') > 0) {
                    topicName = topicName.split('-partition-')[0]
                    isPartition = true
                  }
                  if (this.topics.hasOwnProperty(topicName)) {
                    if (isPartition) {
                      this.topicsList[this.topics[topicName]]['producers'] += this.brokerStats[this.tenantNamespace][bundle][p][topic].producerCount
                      for (var psub in this.brokerStats[this.tenantNamespace][bundle][p][topic].subscriptions) {
                        this.topicsList[this.topics[topicName]]['subscriptions'] += Object.keys(this.brokerStats[this.tenantNamespace][bundle][p][topic].subscriptions[psub].consumers).length
                      }
                      this.topicsList[this.topics[topicName]]['inMsg'] += this.brokerStats[this.tenantNamespace][bundle][p][topic].msgRateIn
                      this.topicsList[this.topics[topicName]]['outMsg'] += this.brokerStats[this.tenantNamespace][bundle][p][topic].msgRateOut
                      this.topicsList[this.topics[topicName]]['inBytes'] += this.brokerStats[this.tenantNamespace][bundle][p][topic].msgThroughputIn
                      this.topicsList[this.topics[topicName]]['outBytes'] += this.brokerStats[this.tenantNamespace][bundle][p][topic].msgThroughputOut
                      if (p === 'non-persistent') {
                        this.topicsList[this.topics[topicName]]['storageSize'] = 0
                      } else {
                        this.topicsList[this.topics[topicName]]['storageSize'] += this.brokerStats[this.tenantNamespace][bundle][p][topic].storageSize
                      }
                    } else {
                      this.topicsList[this.topics[topicName]]['producers'] = this.brokerStats[this.tenantNamespace][bundle][p][topic].producerCount
                      for (var sub in this.brokerStats[this.tenantNamespace][bundle][p][topic].subscriptions) {
                        this.topicsList[this.topics[topicName]]['subscriptions'] = Object.keys(this.brokerStats[this.tenantNamespace][bundle][p][topic].subscriptions[sub].consumers).length
                      }
                      this.topicsList[this.topics[topicName]]['inMsg'] = this.brokerStats[this.tenantNamespace][bundle][p][topic].msgRateIn
                      this.topicsList[this.topics[topicName]]['outMsg'] = this.brokerStats[this.tenantNamespace][bundle][p][topic].msgRateOut
                      this.topicsList[this.topics[topicName]]['inBytes'] = this.brokerStats[this.tenantNamespace][bundle][p][topic].msgThroughputIn
                      this.topicsList[this.topics[topicName]]['outBytes'] = this.brokerStats[this.tenantNamespace][bundle][p][topic].msgThroughputOut
                      if (p === 'non-persistent') {
                        this.topicsList[this.topics[topicName]]['storageSize'] = 0
                      } else {
                        this.topicsList[this.topics[topicName]]['storageSize'] += this.brokerStats[this.tenantNamespace][bundle][p][topic].storageSize
                      }
                    }
                  }
                }
              }
            }
          }
        })
        this.topicsListLoading = false
      })
    },
    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 {
        console.log(this.tempTopicsList)
        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)
      })
    },
    initPoliciesOptions(policies) {
      for (var i = 0; i < policies.replication_clusters.length; i++) {
        this.replicationClustersOptions.push({
          value: policies.replication_clusters[i],
          label: policies.replication_clusters[i]
        })
      }
      this.replicationClustersValue = policies.replication_clusters
      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
    },
    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 {
          console.log('error submit!!')
          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: 'Add success',
          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 role is exist',
            type: 'error'
          })
          this.inputVisible = false
          this.inputValue = ''
          return
        }
        grantPermissions(this.currentNamespace, inputValue, this.roleMap[inputValue]).then(response => {
          this.$notify({
            title: 'success',
            message: 'Add success',
            type: 'success',
            duration: 3000
          })
          this.dynamicTags.push(inputValue)
          this.roleMap[inputValue] = []
          this.roleMapOptions[inputValue] = this.roleOptions
        })
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleChangeOptions() {
      console.log(this.roleMap)
      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: 'Set persistence success for namespace',
          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: 'Add Backlog Quota success for namespace',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleSplitBundle(row) {
      splitBundle(this.tenantNamespace, row.bundle, false).then(response => {
        this.$notify({
          title: 'success',
          message: 'splitBundle success for namespace',
          type: 'success',
          duration: 3000
        })
        this.localList = []
        this.getPolicies(this.tenantNamespace)
      })
    },
    handleUnloadAll() {
      unload(this.tenantNamespace).then(response => {
        this.$notify({
          title: 'success',
          message: 'Unload success for namespace',
          type: 'success',
          duration: 3000
        })
        this.localList = []
        this.getPolicies(this.tenantNamespace)
      })
    },
    handleUnloadBundle(row) {
      unloadBundle(this.tenantNamespace, row.bundle).then(response => {
        this.$notify({
          title: 'success',
          message: 'Unload success for namespace',
          type: 'success',
          duration: 3000
        })
      })
      this.localList = []
      this.getPolicies(this.tenantNamespace)
    },
    hanldeClearAllBacklog() {
      clearBacklog(this.tenantNamespace).then(response => {
        this.$notify({
          title: 'success',
          message: 'clearBacklog success for namespace',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleClearBundleBacklog(row) {
      clearBundleBacklog(this.tenantNamespace, row.bundle).then(response => {
        this.$notify({
          title: 'success',
          message: 'clearBacklog success for bundle',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleReplicationsClusters() {
      setClusters(this.tenantNamespace, this.replicationClustersValue).then(response => {
        this.$notify({
          title: 'success',
          message: 'Add clusters success for namespace',
          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: 'success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleEncryption() {
      var encryptionRequire = false
      if (this.form.encryptionRequireRadio === 'Enabled') {
        encryptionRequire = true
      }
      setEncryptionRequired(this.tenantNamespace, encryptionRequire).then(response => {
        this.$notify({
          title: 'success',
          message: 'success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleDeduplication() {
      var deduplication = false
      if (this.form.deduplicationRadio === 'Enabled') {
        deduplication = true
      }
      setDeduplication(this.tenantNamespace, deduplication).then(response => {
        this.$notify({
          title: 'success',
          message: 'Set deduplication success for namespace',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleSchemaAutoUpdateStrategy() {
      console.log(this.form.autoUpdateStrategy)
      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: 'Set SchemaAutoupdateStrategy success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleSchemaValidationEnforced() {
      var schemaValidation = false
      if (this.form.schemaValidationEnforcedRadio === 'Enabled') {
        schemaValidation = true
      }
      setSchemaValidationEnforced(this.tenantNamespace, schemaValidation).then(response => {
        this.$notify({
          title: 'success',
          message: 'Set SchemaValidationEnforced success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleMessageTTL() {
      setMessageTtl(this.tenantNamespace, parseInt(this.form.messageTTL)).then(response => {
        this.$notify({
          title: 'success',
          message: 'Set messageTTL success for namespace',
          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: 'Set Retention success for namespace',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleCompactionThreshold() {
      setCompactionThreshold(this.tenantNamespace, this.form.compactionThreshold).then(response => {
        this.$notify({
          title: 'success',
          message: 'Set threshold success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleOffloadThreshold() {
      setOffloadThreshold(this.tenantNamespace, this.form.offloadThreshold).then(response => {
        this.$notify({
          title: 'success',
          message: 'Set threshold success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleOffloadDeletionLag() {
      setOffloadDeletionLag(this.tenantNamespace, this.form.offloadDeletionLag).then(response => {
        this.$notify({
          title: 'success',
          message: 'Set DeletionLag success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleMaxProducersPerTopic() {
      setMaxProducersPerTopic(this.tenantNamespace, this.form.maxProducersPerTopic).then(response => {
        this.$notify({
          title: 'success',
          message: 'Set max producers per topic success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleMaxConsumersPerTopic() {
      setMaxConsumersPerTopic(this.tenantNamespace, this.form.maxConsumersPerTopic).then(response => {
        this.$notify({
          title: 'success',
          message: 'Set max consumers per topic success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleMaxConsuemrsPerSubscription() {
      setMaxConsumersPerSubscription(this.tenantNamespace, this.form.maxConsumerPerSub).then(response => {
        this.$notify({
          title: 'success',
          message: 'Set max subscription per topic success',
          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: 'set DispatchRate success for namespace',
          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: 'set subscription dispatchRate success for namespace',
          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: 'set subscription dispatchRate success for namespace',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleAntiAffinityGroup() {
      setAntiAffinityGroup(this.tenantNamespace, this.form.antiAffinityGroup).then(response => {
        this.$notify({
          title: 'success',
          message: 'Set AntiAffinityGroup success for namespace',
          type: 'success',
          duration: 3000
        })
      })
    },
    deleteNamespace() {
      deleteNamespace(this.tenantNamespace).then((response) => {
        this.$notify({
          title: 'success',
          message: 'delete success',
          type: 'success',
          duration: 2000
        })
        this.$router.push({ path: '/management/namespaces/' + this.postForm.tenant })
      })
    },
    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: 'create topic success',
          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
      }
      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: 20px;
}
</style>