<template>
  <div>
    <div class="title">
      <i class="el-icon-s-promotion"></i>
      开发环境列表
    </div>
    <div>
      <el-table :data="tableData" :header-cell-style="{background:'#F3F4F7',color:'#555'}" size="medium" align="center" style="width: 100%;margin-bottom: 30px;">
        <el-table-column :index="indexMethod" label="#" type="index" />
        <el-table-column prop="name" label="名称" width="100">
          <template slot-scope="scope">
            <span class="link-type" @click="jumpToDetail(scope.row.name)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="200" />
        <el-table-column prop="status" label="运行状态" width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status ==='Active'">正常</el-tag>
            <el-tag type="danger" v-if="scope.row.status !== 'Active'">异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="owner" label="所有者" width="120" />
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleSyncMysql(scope.row.name)">同步线上MySQL</el-button>
            <el-button size="mini" type="primary" @click="handleMqSync(scope.row.name)">同步线上MQ</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 同步MQ对话框 -->
    <el-dialog title="同步MQ" :visible.sync="mqSyncDialogVisible" width="50%" :before-close="handleClose">
      <el-form ref="mqDataForm" 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-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mqSyncDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="syncMQ()">开始同步</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getNamespaceList, getServiceDetail, syncMq } from '@/api/k8s'
export default {
  data() {
    return {
      tableData: [],
      mqSyncDialogVisible: false,
      mqDataForm: {},
      namespace: '',
      mqUrl: ''
    }
  },
  methods: {
    // 获取环境列表
    getNamespaceList() {
      getNamespaceList({ env: 'dev' }).then((resp) => {
        this.tableData = resp.data.data
      })
    },
    indexMethod(index) {
      return index + 1
    },
    // 跳转到详情页面
    jumpToDetail(name) {
      window.sessionStorage.setItem('env', name)
      this.$router.push({
        path: `/docker/env`
      })
      // 强制刷新整个页面
      this.$router.go(0)
    },
    handleSyncMysql() {
      this.$router.push('/effect/database')
    },
    // 打开MQ同步对话框
    handleMqSync(name) {
      this.namespace = name
      getServiceDetail({
        namespace: this.namespace,
        serviceType: 'base',
        serviceName: 'rabbitmq'
      }).then((resp) => {
        if (resp.data.data != null) {
          this.mqUrl =
            resp.data.data.lanIp + ':' + resp.data.data.portMappings[1].nodePort
        } else {
          return this.$message.error('当前环境没有MQ！')
        }
      })
      this.mqSyncDialogVisible = true
    },
    // 同步MQ
    syncMQ() {
      var formdata = new FormData()
      formdata.set('host', this.mqUrl)
      syncMq(formdata).then((resp) => {
        if (resp.data.data === true) {
          this.mqSyncDialogVisible = false
          return this.$message.success('同步成功！')
        } else {
          return this.$message.error('同步失败！')
        }
      })
    }
  },
  created() {
    this.getNamespaceList()
  }
}
</script>

<style lang="less" scoped>
.title {
  background: rgba(66, 185, 131, 0.1);
  border-radius: 2px;
  line-height: 40px;
  margin: 0 0 10px 0px;
  padding: 0 0 0 5px;
  font-size: 20px;
}
.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32, 160, 255);
  }
}
</style>
