<template>
  <div @click="csh">
    <div style="padding-left: 10px;padding-right: 10px;">
      <el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
        <el-form-item label="数据库名称" prop="dbName">
          <el-select v-model="queryParams.dbName" placeholder="请选择数据库" clearable @change="handleQuery">
            <el-option v-for="item in dbNameOptions" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="表名称" prop="tableName">
          <el-input
            v-model="queryParams.tableName"
            clearable
            @change="handleQuery"
            placeholder="请输入表名称" />
        </el-form-item>
        <el-form-item label="表描述" prop="tableComment">
          <el-input
            v-model="queryParams.tableComment"
            clearable
            @change="handleQuery"
            placeholder="请输入表描述" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">查找</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="table" :data="tableOptions" height="300px">
        <el-table-column :show-overflow-tooltip="true" label="表名称" prop="tableName" />
        <el-table-column :show-overflow-tooltip="true" label="表描述" prop="tableComment" />
        <el-table-column label="操作" width="50px">
          <template slot-scope="scope">
            <el-button type="text" @click="selectTable(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider content-position="left">选择字段 v</el-divider>
      <el-table ref="table" :data="fieldsOptions" height="300px"
                @row-click="clickRow" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="columnName" />
        <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="columnComment" />
        <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="columnType" />
      </el-table>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
// 例如：import 《组件名称》 from '《组件路径》,
import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "@/api/tool/gen";

export default {
  // import引入的组件需要注入到对象中才能使用"
  name: 'tableUpd',
  props: {
    disp: {
      nodeCode: undefined,
      nodeType: undefined,
      findFlag: false,
      updFlag: false,
      formData: {
        db: {},
        fields: []
      }
    }
  },
  data() {
    // 这里存放数据"
    return {
      // 数据库列表
      dbNameOptions: [],
      // 展示数据表列表
      tableOptions: [],
      // 字段列表
      fieldsOptions: [],
      // 所有数据库列表
      tableList: [],
      queryParams: {}
    }
  },
  // 计算属性 类似于data概念",
  computed: {},
  // 生命周期 - 创建完成（可以访问当前this实例）",
  created() {

  },
  // 方法集合",
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.tableOptions = []
      this.tableList.forEach(table => {
        const params = this.queryParams
        if ((table.dbName === params.dbName || !params.dbName) &&
          (table.tableName.includes(params.tableName) || !params.tableName) &&
          (table.tableComment.includes(params.tableComment) || !params.tableComment)){
          this.tableOptions.push(table)
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 表字段查询*/
    selectTable(row) {
      this.disp.formData.db = row
      selectDbTableColumnsByName(row.dbName, row.tableName).then(res => {
        this.fieldsOptions = res.data
      })
    },
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.disp.formData.fields = selection.map(item => {
        return {
          fieldName: item.columnName,
          fieldType: item.columnType,
          fieldComment: item.columnComment
        };
      });
    },
    // 查询所有数据库名称
    selDbNameList() {
      selDbNameAll().then(res => {
        this.dbNameOptions = res.data
      })
    },
    // 查询所有表名称信息
    getListAll() {
      listDbTableAll().then(res => {
        this.tableList = res.data;
        this.tableOptions = res.data;
      });
    },
    csh() {
      this.selDbNameList()
      this.getListAll()
    }
  }
}
</script>
<style scoped>

</style>
