<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:280px">
            <el-option v-for="item in namespaceList" :key="item.key" :label="item.desc" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库 名:" prop="dataBaseName">
          <el-select v-model="databaseFrom.dataBaseName" placeholder="请选择环境" style="width:280px" @change="selectChange" 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:280px">
            <el-option v-for="item in tableList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="synBtn" style="margin-left:80px">开始同步</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getNamespaceList } from '@/api/getXyqbData'
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: {
        text: '数据同步中，请耐心等待',
        lock: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)'
      }
    }
  },
  created() {
    this.getNamespaceList()
    this.getDataBaseList()
  },
  methods: {
    // 环境列表
    getNamespaceList() {
      getNamespaceList().then((resp) => {
        this.namespaceList = resp.data.data
      })
    },
    // 获取数据库列表
    getDataBaseList() {
      getDataBaseList().then((resp) => {
        // console.log('返回值信息', 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.paramsFrom.namespace = 'fe'
      // this.paramsFrom.dbName = 'msg'
      // this.paramsFrom.tableName = 'all'
      // console.log('参数信息', this.paramsFrom)
      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.data.code === '0000') {
              Lloading.close()
              this.$message.success('数据同步成功！')
            } else {
              Lloading.close()
              this.$message.error(resp.data.data.msg)
            }
          })
        }
      })
    }
  }
}
</script>







