<template>
  <div class="PublicPageTable">
    <div class="PublicPageTable-content">
      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="name" label="名称" width="450">
        </el-table-column>
        <el-table-column prop="date" label="类型" width="180">
        </el-table-column>
        <el-table-column prop="address" label="所属应用">
        </el-table-column>
        <el-table-column prop="address" label="编码">
        </el-table-column>
        <el-table-column prop="address" label="描述">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleDetails(scope.row)" type="text">详情</el-button>
            <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
            <el-button @click="handleRemove(scope.row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublicPageTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleDetails (row) {
      this.$emit('handleDetails', row)
    },
    handleEdit (row) {
      this.$emit('handleEdit', row)
    },
    handleRemove (row) {
      this.$emit('handleRemove', row)
    }
  }
}
</script>

<style lang="scss" scoped>
.PublicPageTable {
  padding: 20px;
  height: calc(100vh - 120px);
  &-content {
    background-color: #fff;
    height: 100%;
    position: relative;
  }
}
</style>