<template>
  <div class="LayerTable">
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <template #toolbar>
        <a-button type="primary" @click="handleCancle">关闭</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-button type="primary" @click="handleDetail(record)">详情</a-button>
          <a-button type="success" @click="handleDetail(record)">编辑</a-button>
          <a-button type="error" @click="handleDelete(record)">删除</a-button>
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '@/components/Table';

  const props = defineProps(['layerTableShowData']);
  const emit = defineEmits(['setLayerTableShow']);

  const [registerTable, { reload }] = useTable({
    columns: props.layerTableShowData.columns,
    dataSource: props.layerTableShowData.dataSource,
    rowKey: 'id',
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    handleSearchInfoFn(info) {
      return info;
    },
    maxHeight: 350,
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
    },
  });

  // 下方表格-开启
  function handleDetail(record) {}

  // 下方表格-关闭
  function handleCancle() {
    emit('setLayerTableShow', false);
  }
</script>
<style lang="less">
  .LayerTable {
    position: absolute;
    width: calc(100% - 390px);
    bottom: 0px;
    height: 300px;
  }
</style>
