<!--
 * @Description: 实体引用列表组件
 * @Author: laoliu sunhuihong
 * @Date: 2022-07-31 16:43:52
 * @LastEditTime: 2023-01-09 18:43:27
-->
<template>
  <div class="body">
    <el-row class="head-line" :gutter="0" type="flex" justify="space-between" >
      <el-col :offset="14" :span="10">
        <el-collapse-transition>
          <el-table :data="tableList" :show-header="false"  :row-style="{'height': '20px'}" >
            <el-table-column label="数据库表名" min-width="25%">
              <template slot-scope="scope">
                {{scope.row.tableName + '(' + scope.row.tableDesc + ')'}}
              </template>
            </el-table-column>
            <el-table-column label="引用字段" min-width="75%">
              <template slot-scope="scope">
                <el-button v-for="(item, index) in scope.row.fieldList" :key="index"
                  @click="handleSelect(scope.row.tableName, item.name)" type="text" size="mini">
                  {{item.name}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-transition>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TableRefList',
  props: ["tableList"],

  data() {
    return {
      curTableField: '',
    }
  },
  
  methods: {    
    handleSelect(tableName, fieldName) {
      let currentData = {
        tableName: tableName,
        fieldName: fieldName
      }
      this.$emit("handle-select", currentData);
    }
  },
}
</script>

<style scoped>
.body {
  margin: 0;
  text-align: center;
  border: solid 0px;
  height: 180px;
  overflow-y: auto;
}

.head-line {
  margin-bottom: 12px;
  text-align: right;
  border: solid 0px;
}
</style>