<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="userName" align="center" label="姓名">
      </el-table-column>
      <el-table-column prop="" align="center" label="出生年月" min-width="100px">
        <template slot-scope="scope">
          {{ `${scope.row.birthYear}-${scope.row.birthMonth}-${scope.row.birthDay}` }}
        </template>
      </el-table-column>
      <el-table-column prop="idCard" align="center" label="身份证号">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="archiveNo" align="center" label="档案档号">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="maintitle" 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" @click="openDialog(scope.row)">编辑
          </el-button>
          <el-button type="text" style="color: #2763FF" @click="showFile(scope.row)">查看证明
          </el-button>
          <el-button type="text" style="color: #ff0000 " @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 - 130,
      };
    },
    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);
      },
      showFile(row){
        this.$emit('showFile',row);
      }
    },
  };

</script>

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

  }

</style>
