<template>
  <!-- 明细 公共组件 -->
  <a-drawer placement="bottom"
            :closable="false"
            :visible="show"
            :get-container="false"
            :wrap-style="{ position: 'absolute' }"
            @close="close">
    <div class="bottomTable">
      <slot></slot>
      <ThridMenu :list="tabList"
                 @selectMenu="changeTab" />
    </div>
  </a-drawer>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect, PropType } from 'vue';
import ThridMenu from '@/common/components/thirdMenu/index.vue';
import { TabList } from './interface';
import { ColumnType } from '@/common/methods/table/interface';

export default defineComponent({
    name: 'description',
    components: {
        ThridMenu,
    },
    props: {
        tabList: {
            // 按钮列表
            default: [],
            type: Array as PropType<TabList[]>,
        },
        tableList: {
            // 表格数据
            default: [],
            type: Array as PropType<any[]>,
        },
        columns: {
            // 表头数据
            default: [],
            type: Array as PropType<ColumnType[]>,
        },
        visible: {
            // 是否显示
            default: false,
            type: Boolean,
        },
    },
    setup(props, context) {
        const show = ref<boolean>(true);
        // 切换明细
        function changeTab(index: number, current: TabList) {
            context.emit('changeTab', index, current);
        }
        function close() {
            show.value = false;
            context.emit('close');
        }
        return { changeTab, show, close };
    },
});
</script>

<style lang="less">
.bottomTable {
    width: 100%;
    .flex;
    flex-direction: column;
    .topTable {
        height: calc(100% - 46px);
        .ant-table {
            background-color: transparent;
        }
    }
}
</style>;
