<template>
  <div class="app-container">
    <el-form ref="dataForm" label-position="left" label-width="130px" style="width: 95%; margin-left:20px;">
      <el-form-item label="Namespace名称">
        <el-input v-model="namespace" :disabled="true"/>
      </el-form-item>
      <el-form-item label="服务地址">
        <el-input v-model="mqUrl" :disabled="true"/>
      </el-form-item>

      <el-button style="margin-right:40px;margin-bottom:40px;float:right" type="primary" @click="sync()">{{ $t('table.confirm') }}</el-button>
      <el-button style="margin-right:40px;margin-bottom:40px;float:right" @click="goBack()">{{ $t('table.cancel') }}</el-button>
    </el-form>
  </div>
</template>

<script>
import { fetchServiceDetails, reloadMq } from '@/api/docker'

export default {

  data() {
    return {
      namespace: '',
      mqUrl: ''
    }
  },

  created() {
    this.namespace = this.$route.params.name
    this.getMqService()
  },

  methods: {
    getMqService() {
      fetchServiceDetails({
        namespace: this.namespace,
        serviceName: 'rabbitmq',
        type: 'base'
      }).then(res => {
        const host = res.data.lanIp
        const port = res.data.portMappings.filter(item => item.port === 15672)[0].nodePort
        this.mqUrl = `${host}:${port}`
      })
    },
    goBack() {
      this.$router.go(-1)
    },

    sync() {
      reloadMq({ host: this.mqUrl }).then(res => {
        const self = this
        this.$message({
          message: '同步成功',
          type: 'success',
          duration: 1000,
          onClose() {
            self.goBack()
          }
        })
      })
    }
  }
}
</script>
