<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="160" />
        <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="syncMySQL(scope.row.name)">同步线上MySQL</el-button>
            <el-button size="mini" type="primary" @click="syncMQ(scope.row.name)">同步线上MQ</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getNamespaceList } from '@/api/k8s'
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    // 获取环境列表
    getNamespaceList() {
      getNamespaceList({ env: 'dev' }).then((resp) => {
        this.tableData = resp.data.data
      })
    },
    indexMethod(index) {
      return index + 1
    },
    // 跳转到详情页面
    jumpToDetail() {},
    syncMySQL() {}
  },
  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;
}
.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

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