<template>
  <div>
    <div style="float: right;margin-right: 20px;margin-top: 10px">
      <el-button type="primary" @click="addCluster('add')">添加集群</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item class="preshow" label="YAML配置" style="width: 100%">
              <div class="editor-container">
                <yaml-editor ref="yamlEditor" v-model="props.row.caYaml"/>
              </div>
              <!--<div style="width: 100%">-->
              <!--<el-input v-model="props.row.caYaml" type="textarea"/>-->
              <!--<pre style="width: 100%">{{ props.row.caYaml }}</pre>-->
              <!--</div>-->
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="集群名称"
        prop="clusterName"/>
      <el-table-column
        label="集群域名"
        prop="clusterDomain"/>
      <el-table-column
        width="400px"
        label="集群host"
        prop="clusterDomain">
        <template slot-scope="scope">
          <div v-for="item in scope.row.hosts" :key="item.key">{{ item.value }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogFormVisible" title="添加集群配置" class="warp-ruleform">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="集群名称" prop="clusterName">
          <el-input v-model="ruleForm.clusterName"/>
        </el-form-item>
        <el-form-item label="集群域名" prop="clusterDomain">
          <el-input v-model="ruleForm.clusterDomain"/>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in ruleForm.hosts"
          :label="'host' + index"
          :key="domain.key"
          :prop="'hosts.' + index + '.value'"
          :rules="{
            required: true, message: '域名不能为空', trigger: 'blur'
          }"
        >
          <el-input v-model="domain.value" placeholder="127.0.0.1=>http:localhost"/><el-button style="margin-left: 10px" type="danger" size="small" @click.prevent="removeDomain(domain)">删除</el-button>
        </el-form-item>
        <el-form-item label="集群CA" prop="clusterCA">
          <el-input v-model="ruleForm.clusterCA" class="preinput" type="textarea"/>
        </el-form-item>
        <el-form-item class="action_footer">
          <el-button @click="addDomain">新增host</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import yaml from 'js-yaml'
import { addCluster, getCluster, deleteCluster } from '@/api/cluster'
import YamlEditor from '@/components/Yaml'
export default {
  components: { YamlEditor },
  data() {
    return {
      isSave: true,
      clusterId: '',
      dialogFormVisible: false,
      tableData: [],
      ruleForm: {
        clusterName: '',
        clusterCA: '',
        clusterDomain: '',
        hosts: [
          {
            value: '',
            key: Date.now()
          }
        ]
      },
      code: '',
      rules: {
        clusterName: [
          { required: true, message: '请输入集群的名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        clusterDomain: [
          { required: true, message: '请输入集群域名信息', trigger: 'blur' }
        ],
        clusterCA: [
          { required: true, message: '请输入集群的名称', trigger: 'blur' }
        ]

      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getCluster().then((res) => {
        this.tableData = res.data
        this.tableData.map((item) => {
          console.log(item.clusterCA)
          item.caYaml = yaml.dump(item.clusterCA)
        })
      })
    },
    handleEdit(scope) {
      this.isSave = false
      this.dialogFormVisible = true
      this.clusterId = scope._id
      this.ruleForm = { ...scope }
      this.ruleForm.clusterCA = scope.caYaml
    },
    handleDelete(scope) {
      this.$confirm('此操作将删除集群配置信息,会导致集群不可用，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCluster({ id: scope._id, disable: 0 }).then((res) => {
          if (res.code === '0000') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addCluster() {
      this.ruleForm = {
        clusterName: '',
        clusterCA: '',
        clusterDomain: '',
        hosts: [
          {
            value: '',
            key: Date.now()
          }
        ]
      }
      this.dialogFormVisible = true
      this.isSave = true
      this.clusterId = ''
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let clusterCa = null
          yaml.safeLoadAll(this.ruleForm.clusterCA, function(doc) {
            clusterCa = doc
          })
          const sendData = {
            clusterName: this.ruleForm.clusterName,
            clusterCA: clusterCa,
            hosts: this.ruleForm.hosts,
            clusterDomain: this.ruleForm.clusterDomain,
            disable: 1
          }
          if (!this.isSave) {
            sendData._id = this.clusterId
          }
          addCluster(sendData).then((res) => {
            if (res.code === '0000') {
              this.$message({
                message: '集群设置成功',
                type: 'success'
              })
              this.dialogFormVisible = false
              this.getData()
            } else {
              this.$message({
                message: '集群设置添加失败',
                type: 'error'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields()
    // },
    removeDomain(item) {
      var index = this.ruleForm.hosts.indexOf(item)
      if (index !== -1) {
        this.ruleForm.hosts.splice(index, 1)
      }
    },
    addDomain() {
      this.ruleForm.hosts.push({
        value: '',
        key: Date.now()
      })
    }
  }
}
</script>
<style>
  .demo-ruleForm .el-input{
    width: 380px;
  }
  .preinput .el-textarea__inner{
    font-family: monospace, monospace;
    font-size: 1em;
    /*width: 370px;*/
    height: 300px;
  }
  .preshow .el-form-item__content{
    width: 100%;
    background: #c0ccda;
    overflow-x: scroll;

  }
  .action_footer .el-form-item__content{
    text-align: center;
    margin-left: 0px !important;
  }
</style>
