<template>
  <div>
    <div class="shadow-content">
      <p class="warn-content">
        <svg-icon icon-class="list"/>
        运行环境列表
        <el-select v-model="cluster" placeholder="请选择集群名称" @change="changeCluster">
          <el-option v-for="item in clusterArray" :value="item.clusterName" :label="item.clusterName" :key="item.clusterName" />
        </el-select>
      </p>
      <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"
          type="index"/>
        <el-table-column
          prop="name"
          label="名称"
          width="100">
          <template slot-scope="scope">
            <span class="link-type" @click="handleDetail(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">
            {{ scope.row.status | formatStatus }}
          </template>
        </el-table-column>
        <el-table-column
          prop="owner"
          label="所有者"
          width="160"/>
        <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>
            <el-button size="mini" type="primary" @click="deploy(scope.row.name)">部署应用服务</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { fetchKubernetesList } from '@/api/docker'
import { getCluster } from '@/api/cluster'

export default {
  data() {
    return {
      name: 'hello',
      clusterArray: [],
      tableData: [],
      cluster: this.$store.getters.cluster
    }
  },
  created() {
    this.fetchK8sList()
    this.getCluster()
  },
  methods: {
    syncMySQL(namespace) {
      this.$router.push({
        path: '/dbsync',
        query: { namespace: namespace }
      })
    },
    syncMQ(namespace) {
      this.$router.push({
        path: `/dockers/syncMq/${namespace}`
      })
    },
    deploy(namespace) {
      this.$router.push({
        path: `/dockers/deployEnv/${namespace}`
      })
    },
    fetchK8sList() {
      fetchKubernetesList().then(res => {
        this.tableData = res.data.namespaces.filter(item => {
          if (item.description === 'test') {
            return item
          }
        })
      })
    },
    getCluster() {
      getCluster().then(res => {
        this.clusterArray = res.data
      })
    },
    indexMethod(index) {
      return index + 1
    },
    changeCluster() {
      this.$store.dispatch('changeCluster', this.cluster)
      sessionStorage.setItem('cluster', this.cluster)
      this.fetchK8sList()
    },
    handleDetail(namespace) {
      this.$router.push({
        path: `/dockers/runingEnv/${namespace}`
      })
    },
    handleEdit() {
      console.log(1)
    },
    handleDelete() {
      console.log(2)
    }
  }
}
</script>
