<template>
  <div>
    <cb-advance-table @cell-click="handleCellClick" :data="clusterTableData" :params="params" :columns="Clustercolumns" :get-list="getClusterData" :total="total" :loading="loading">
      <template v-slot:action>
        <el-button type="primary" @click="addCluster()"> 新增 </el-button>
      </template>
      <template #name="val, record">
        <span class="detail-href" @click="getDetail(record)" v-if="record.clusterStatus !== 'Initializing'">{{ val }}</span>
        <span v-else>{{ val }}</span>
      </template>
      <template #clusterStatus="val">
        <cb-status-icon :type="val | tceClusterColor" v-if="val && val.toLowerCase() != 'stopped'">{{ val | tceClusterText }}</cb-status-icon>
      </template>
      <template #clusterOs="val">
        {{ val ? val : 'ubuntu16.04.1 LTSx86_64' }}
      </template>
      <template #clusterVersion="val">
        {{ val && val.length > 0 ? val : '1.10.5' }}
      </template>
      <template #operate="val, record">
        <AssignTenant :detail="record" type="TKE" @back="getClusterData"></AssignTenant>
        <div class="action-divider"></div>
        <el-button type="text" @click="edit(record)" :disabled="record.clusterStatus == 'Initializing'"> 编辑 </el-button>
        <div class="action-divider"></div>
        <el-button type="text" @click="handleOperate({ flag: 3, row: record })" :disabled="record.status === 'BIND' || record.tenantName"> 删除 </el-button>
      </template>
    </cb-advance-table>
    <detail v-if="detaildialogVisible" :detail="detail" @back="detaildialogVisible = false" :platform-object="platformObject"></detail>
    <bind :add-data="bindData" v-if="bindData.dialog"></bind>
    <service ref="serviceTable" v-if="serviceVisible" :vendorId="platformObject.vendorId" :clusterInfo="clusterInfo" @close="closeService"></service>
    <modify-cluster :add-data="modifyClusterData" :vendor-id="platformObject.vendorId" v-if="modifyClusterData.dialog"></modify-cluster>
    <delete-cluster :data="deleteClusterData" :vendor-id="platformObject.vendorId" v-if="deleteClusterData.dialog" :clusterInfo="clusterInfo"></delete-cluster>
    <add-cluster :add-data="addClusterData" :vendor-id="platformObject.vendorId" :platform-object="platformObject" v-if="addClusterData.dialog"></add-cluster>
  </div>
</template>

<script>
/* global $ */
import bind from './bind.vue'
import { getClusterList } from 'views/resource/ctstack/services/tke.js'
import { removeFloatIp, detailFloatIp } from 'views/resource/ctstack/services/floatips.js'
import { getRegion } from 'views/resource/ctstack/services/regions.js'
import service from './service/index.vue'
import modifyCluster from './modifyCluster.vue'
import deleteCluster from './deleteCluster.vue'
import addCluster from './addCluster.vue'
import webSocket from '@cmp/cmp-common/mixins/getGlobalSocket'
import detail from './detail'
import AssignTenant from 'views/platform/assign/index.vue'
const Clustercolumns = [
  {
    label: 'ID',
    prop: 'clusterId',
    disabled: true,
    scopedSlots: { customRender: 'name' }
  },
  {
    label: '名称',
    prop: 'name'
  },
  {
    label: '状态',
    prop: 'clusterStatus',
    scopedSlots: { customRender: 'clusterStatus' }
  },
  {
    label: '版本',
    prop: 'clusterVersion',
    scopedSlots: { customRender: 'clusterVersion' }
  },
  {
    label: '类型',
    prop: 'clusterType',
    customRender(val) {
      const map = {
        INDEPENDENT_CLUSTER: '独立集群'
      }
      return map[val] || val
    }
  },
  {
    label: '节点数量',
    prop: 'clusterNodeNum'
  },
  {
    label: '所属租户',
    prop: 'tenantName'
  },
  {
    label: '描述',
    prop: 'clusterDescription'
  },
  {
    label: '系统',
    prop: 'clusterOs',
    scopedSlots: { customRender: 'clusterOs' }
  },
  {
    label: '创建时间',
    prop: 'gmtCreate'
  },
  {
    label: '操作',
    scopedSlots: { customRender: 'operate' },
    width: '220px'
  }
]
export default {
  mixins: [webSocket],
  components: {
    bind,
    service,
    modifyCluster,
    deleteCluster,
    addCluster,
    detail,
    AssignTenant
  },
  props: {
    platformObject: {
      type: Object,
      default: function () {
        return {
          vendorId: -1
        }
      }
    }
  },
  data() {
    return {
      clusterInfo: {},
      instanceVisible: false,
      secrectVisible: false,
      serviceVisible: false,
      flexibleVisible: false,
      Clustercolumns,
      clusterTableData: [],
      activeName: 'first', // 从这里开始
      loading: false,
      detaildialogVisible: false,
      detail: {},
      params: {
        page: 1,
        rows: 10
      },
      total: 0,
      addData: {
        dialog: false,
        data: {}
      },
      regionList: [],
      bindData: {
        dialog: false,
        data: {}
      },
      modifyClusterData: {
        dialog: false,
        data: {}
      },
      addClusterData: {
        dialog: false,
        data: {}
      },
      deleteClusterData: {
        dialog: false,
        data: {}
      }
    }
  },
  methods: {
    onmessage(data) {
      const arr = ['tke.modify.cluster', 'tke.delete.instance', 'tke.add.instance', 'ctstack.sync', 'ctstack.cluster', 'tke.create.cluster', 'tke.delete.cluster']
      if (arr.includes(data.operate)) {
        this.getClusterData()
      }
    },
    addCluster() {
      this.$router.push({ name: 'ctstackCreateCluster', query: { vendorId: this.platformObject.vendorId } })
    },
    handleCellClick(data) {
      this.clusterInfo = data
    },
    edit(row) {
      this.modifyClusterData = {
        dialog: true,
        data: {
          name: row.name,
          id: row.id
        }
      }
    },
    handleOperate(command) {
      switch (command.flag) {
        case 1: // 密钥
          this.showSecrect(command.row)
          break
        case 2: // 服务
          this.showService(command.row)
          break
        case 3: // 删除
          this.deleteCluster(command.row)
          break
        case 4: // 添加已有节点
          this.addExistInstance(command.row)
          break
        case 5: // 伸缩组
          this.showFlexible(command.row)
          break
        case 'node':
          this.showInstance(command.row)
          break
        default:
      }
    },
    deleteCluster(row) {
      this.clusterInfo = row
      this.deleteClusterData = {
        dialog: true,
        mode: false,
        data: row
      }
    },
    closeService() {
      this.serviceVisible = false
    },
    showService(row) {
      this.serviceVisible = true
      this.clusterInfo = row
    },
    closeSecrect() {
      this.secrectVisible = false
    },
    showSecrect(row) {
      this.secrectVisible = true
      this.clusterInfo = row
    },
    showFlexible(row) {
      this.flexibleVisible = true
      this.clusterInfo = row
    },
    closeInstance() {
      this.instanceVisible = false
    },
    closeFlexible() {
      this.flexibleVisible = false
    },
    showInstance(row) {
      this.instanceVisible = true
      this.clusterInfo = row
    },
    getClusterData() {
      // if (this.instanceVisible) {
      //   this.$refs.instanceTable.getData()
      //   return
      // }
      this.loading = true
      this.clusterTableData = []
      this.total = 0
      const params = {
        page: this.params.page,
        rows: this.params.rows,
        params: JSON.stringify([
          {
            param: {
              vendorId: this.platformObject.vendorId
            },
            sign: 'EQ'
          }
        ])
      }
      getClusterList(params)
        .then(data => {
          if (data.success) {
            this.clusterTableData = data.data.rows
            this.total = data.data.total
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 详情
    getDetail(row) {
      this.detaildialogVisible = true
      this.detail = row
    },
    add() {
      this.addData = {
        dialog: true,
        data: {
          vendorId: this.platformObject.vendorId
        }
      }
    },
    // 获取域
    getRegion() {
      getRegion({ vendorId: this.platformObject.vendorId }).then(data => {
        if (data.success) {
          this.regionList = data.data
        }
      })
    }
  },
  mounted() {
    if (this.$router.currentRoute.params.formCreateInstance) {
      this.showInstance(this.$router.currentRoute.params.clusterInfo)
    }
  },
  watch: {
    platformObject: {
      handler(newVal, oldVal) {
        this.getClusterData()
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
