<template>
  <div class="button-item" @click="open">
    <a-button>预览</a-button>
  </div>
  <!-- 预览弹窗 -->
  <div class="box" v-if="previewData.visible">
    <div class="header vben-tree-header flex px-2 py-2 items-center justify-between pd">
      <span class="vben-basic-title">列表展示</span>
      <div class="button-item" @click="previewData.visible = false">
        <span>收起 <Icon icon="ant-design:double-left-outlined" /></span>
      </div>
    </div>
    <div class="model-box">
      <PreviewTable v-if="previewData.visible" :columns="columns" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import Icon from '/@/components/Icon/index';
  import PreviewTable from './PreviewTable.vue';
  defineProps({
    columns: Array as () => Array<any>,
  });
  const previewData = reactive({
    visible: false,
  });
  function open() {
    previewData.visible = true;
  }
</script>

<style lang="less" scoped>
  .button-item {
    display: inline-flex;
    color: #5e95ff;
    text-align: center;
  }

  .model-box {
    margin: 20px;
    min-height: 400px;
  }

  .box {
    width: 900px;
    box-shadow: 1px 1px 1px 1px #ccc;
    border-radius: 10px;
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 0;
    z-index: 999;
    background: #fff;
  }

  .pd {
    padding: 16px 8px;
  }

  :deep(.ant-table-container table) {
    font-size: 14px;
  }

  :deep(.ant-table-container table > thead > tr:first-child th) {
    height: 50px;
    font-weight: bold;
    background: #f7fbff;
  }
</style>
