<template>

  <div class="page">
    <el-table highlight-current-row tooltip-effect="dark" v-loading="loading" border :data="tableData"
      @selection-change="handleSelectionChange" :max-height="tableHeight">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column show-overflow-tooltip width="150px" prop="fondscode" align="center" label="全宗代码">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="fondsname" label="全宗名称" align="center">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="unitperson" align="center" label="单位联系人" min-width="100px">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="unittel" align="center" label="联系方式">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="unitaddr" align="center" label="单位地址">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="unitname" align="center" label="单位名称" min-width="100px">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="description" align="center" label="单位描述" min-width="100px">
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="80px">
        <template slot-scope="scope">
          <el-button type="text" style="color: #2763FF" v-if="showButtons.edit" @click="openDialog(scope.row)">编辑
          </el-button>
          <el-button type="text" style="color: #ff0000 " v-if="showButtons.del" @click="deleteClick(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
      layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
      :current-page="pagination.pageNum" :total="pagination.total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableHeight: window.innerHeight - 200,
      };
    },
    props: {
      loading: {
        type: Boolean,
        default: () => false,
      },
      tableData: {
        type: Array,
        default: () => [],
      },
      pagination: {
        type: Object,
        default: () => {},
      },
      selectList: {
        type: Array,
        default: () => [],
      },
      showButtons: {
        type: Object,
        default: () => {},
      },
    },
    methods: {
      handleSelectionChange(val) {
        this.$emit("handleSelectionChange", val);
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.$emit("refreshTable");
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.$emit("refreshTable");
      },
      openDialog(val) {
        this.$emit("openDialog", val);
      },
      deleteClick(val) {
        this.$emit("deleteClick", val);
      },
    },
  };

</script>

<style lang="scss" scoped>
  .page {
    width: 100%;
    margin-top: 10px;
    background-color: transparent;
    text-align: left;
    // padding: 20px;
    box-sizing: border-box;

  }

</style>
