<template>
  <div class="app-container">
    <div class="createPost-container">
      <el-form :inline="true" :model="postForm" class="form-container">
        <el-form-item :label="$t('cluster.label')" class="postInfo-container-item">
          <el-select v-model="postForm.cluster" placeholder="select cluster" @change="getFailureDomainsList()">
            <el-option v-for="(item,index) in clustersListOptions" :key="item+index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('fd.label')" class="postInfo-container-item">
          <el-select v-model="postForm.failureDomainName" placeholder="select domain" @change="getFailureDomainInfo()">
            <el-option v-for="(item,index) in failureDomainListOptions" :key="item+index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <h3>{{ $t('fd.label') }}</h3>
    <h4>{{ $t('fd.brokerList') }}
      <el-tooltip :content="brokersContent" class="item" effect="dark" placement="top">
        <i class="el-icon-info"/>
      </el-tooltip>
    </h4>
    <el-select
      v-model="brokerValue"
      :placeholder="$t('fd.selectBrokers')"
      style="width:500px;margin-top:20px"
      multiple>
      <el-option v-for="item in brokerOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-button type="primary" class="button" @click="handleSelectBrokers()">{{ $t('fd.updateFd') }}</el-button>
    <h4 style="color:#E57470">{{ $t('common.dangerZone') }}</h4>
    <hr class="danger-line">
    <el-button type="danger" class="button" @click="handleDelete">{{ $t('fd.deleteFd') }}</el-button>
    <el-dialog :visible.sync="dialogFormVisible" :title="textMap[dialogStatus]" width="30%">
      <el-form label-position="top">
        <div v-if="dialogStatus==='delete'">
          <el-form-item>
            <h4>{{ deleteFdMessage }}</h4>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="deleteDomain()">{{ $t('table.confirm') }}</el-button>
            <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import MdInput from '@/components/MDinput'
import {
  fetchClusters,
  getClusterDomainName,
  updateClusterDomainName,
  listClusterDomainName,
  deleteClusterDomainName
} from '@/api/clusters'
import { fetchBrokersByDirectBroker } from '@/api/brokers'

const defaultForm = {
  cluster: '',
  failureDomainName: ''
}
export default {
  name: 'FailureDomainInfo',
  // components: {
  //   MdInput
  // },
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      clustersListOptions: [],
      brokersContent: this.$i18n.t('broker.brokerContent'),
      brokerValue: [],
      brokerOptions: [],
      failureDomainListOptions: [],
      firstInit: false,
      textMap: {
        delete: this.$i18n.t('fd.deleteFd')
      },
      dialogStatus: '',
      dialogFormVisible: false,
      deleteFdMessage: this.$i18n.t('fd.deleteFdMessage')
    }
  },
  created() {
    this.postForm.cluster = this.$route.params && this.$route.params.cluster
    this.postForm.failureDomainName = this.$route.params && this.$route.params.failureDomainName
    this.firstInit = true
    this.getClusterList()
    this.initBrokerValue()
    this.initSelectBrokers()
    this.getFailureDomainsList()
  },
  methods: {
    initBrokerValue() {
      getClusterDomainName(this.postForm.cluster, this.postForm.failureDomainName).then(response => {
        if (!response.data) return
        this.brokerValue = response.data.brokers
      })
    },
    getClusterList() {
      fetchClusters(this.listQuery).then(response => {
        if (!response.data) return
        for (var i = 0; i < response.data.data.length; i++) {
          this.clustersListOptions.push(response.data.data[i].cluster)
        }
      })
    },
    getFailureDomainsList() {
      listClusterDomainName(this.postForm.cluster).then(response => {
        if (!response.data) return
        if (this.firstInit) {
          this.firstInit = false
        } else {
          this.postForm.failureDomainName = ''
        }
        this.failureDomainListOptions = []
        for (var key in response.data) {
          this.failureDomainListOptions.push(key)
        }
      })
    },
    initSelectBrokers() {
      fetchBrokersByDirectBroker(this.postForm.cluster).then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.brokerOptions.push({
            value: response.data[i],
            label: response.data[i]
          })
        }
      })
    },
    handleSelectBrokers() {
      const data = {
        'brokers': this.brokerValue
      }
      updateClusterDomainName(this.postForm.cluster, this.postForm.failureDomainName, data).then(response => {
        this.$notify({
          title: 'success',
          message: 'Update brokers success',
          type: 'success',
          duration: 3000
        })
      })
    },
    getFailureDomainInfo() {
      this.$router.push({ path: '/management/clusters/' + this.postForm.cluster + '/' + this.postForm.failureDomainName + '/failureDomainName' })
    },
    handleDelete() {
      this.dialogFormVisible = true
      this.dialogStatus = 'delete'
    },
    deleteDomain() {
      deleteClusterDomainName(this.postForm.cluster, this.postForm.failureDomainName).then(response => {
        this.$notify({
          title: 'success',
          message: 'Delete Domain success',
          type: 'success',
          duration: 3000
        })
        this.dialogFormVisible = false
        this.$router.push({ path: '/management/clusters/' + this.postForm.cluster + '/cluster?tab=failureDomains' })
      })
    }
  }
}
</script>

<style>
.split-line {
  background: #e6e9f3;
  border: none;
  height: 1px;
}
.danger-line {
  background: red;
  border: none;
  height: 1px;
}
</style>