<template>
  <div>
    <el-card>
      <!-- <span>同步数据库操作</span> -->
      <el-form ref="databaseFromRef" :rules="rules" :model="databaseFrom" label-width="90px">
        <el-form-item label="环 境:" prop="namespace">
          <el-select v-model="databaseFrom.namespace" placeholder="请选择环境" style="width:300px" filterable clearable>
            <el-option v-for="item in namespaceList" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库 名:" prop="dataBaseName">
          <el-select v-model="databaseFrom.dataBaseName" placeholder="请选择环境" style="width:300px" @change="selectChange" filterable clearable>
            <el-option v-for="item in dataBaseList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表 名:">
          <el-select v-model="databaseFrom.tableName" placeholder="请选择环境" style="width:300px" filterable clearable>
            <el-option v-for="item in tableList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
          <el-tooltip class="item" effect="light" content="表名为空或者选择all都将同步所有表" placement="right-start">
            <i class="iconfont icon-questionmarko" />
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="synBtn" style="margin-left:200px">开始同步</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getNamespaceList } from '@/api/k8s'
import { getDataBaseList, getTableByDataBase, synDataBase } from '@/api/effect'
export default {
  data() {
    return {
      databaseFrom: {
        namespace: '',
        dataBaseName: '',
        tableName: ''
      },
      namespaceList: [],
      dataBaseList: [],
      tableList: [],
      paramsFrom: {
        namespace: '',
        dbName: '',
        tableName: ''
      },
      rules: {
        namespace: [
          {
            required: true,
            message: '环境不能为空！',
            trigger: 'blur'
          }
        ],
        dataBaseName: [
          {
            required: true,
            message: '库名描述不能为空！',
            trigger: 'blur'
          }
        ]
      },
      loadingOptions: {
        // customClass: 'create-isLoading',
        text: '数据同步中，请耐心等待',
        lock: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)'
      }
    }
  },
  created() {
    this.getNamespaceList()
    this.getDataBaseList()
  },
  methods: {
    // 环境列表
    getNamespaceList() {
      getNamespaceList({env: 'all'}).then((resp) => {
        this.namespaceList = resp.data.data
      })
    },
    // 获取数据库列表
    getDataBaseList() {
      getDataBaseList().then((resp) => {
        this.dataBaseList = resp.data.data
      })
    },
    // 下拉框选择
    selectChange(e) {
      // 根据数据库获取表信息
      getTableByDataBase({ dbName: e }).then((resp) => {
        this.tableList = resp.data.data
      })
    },
    // 同步数据库按钮
    synBtn() {
      this.paramsFrom.namespace = this.databaseFrom.namespace
      this.paramsFrom.dbName = this.databaseFrom.dataBaseName
      this.paramsFrom.tableName = this.databaseFrom.tableName
      this.$refs.databaseFromRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          const Lloading = this.$loading.service(this.loadingOptions)
          synDataBase(this.paramsFrom).then((resp) => {
            if (resp.data.code === '0000') {
              Lloading.close()
              return this.$message.success('数据同步成功！')
            } else {
              Lloading.close()
              this.$message.error(resp.data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.create-isLoading {
  .el-loading-spinner {
    top: 50%;
    left: 50%;
    margin-left: -55px;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 4px;
    width: auto;
    text-align: center;
    position: absolute;

    i {
      color: #eee;
    }

    .el-loading-text {
      color: #eee;
    }
  }
}
</style>
