<!--
 * @Author: 曹捷
 * @Date: 2021-04-26 17:40:16
 * @LastEditors: 曹捷
 * @LastEditTime: 2022-01-22 13:14:18
 * @Description: 默认  列表查询模板
 模板二
 左右结构
-->
<template>
  <div class="obit-main right-table">
    <a-layout>
      <a-layout-sider :width="leftWidth" class="right-table-left">
        <slot name="left"></slot>
      </a-layout-sider>
      <a-layout-content class="right-table-content scrollBar">
        <slot name="search"></slot>
        <div style="height:10px" v-if="hasSearch" class="background"></div>
        <div class="obit-content">
          <div class="flex-l-r p-b-10" v-if="name || hasBtn">
            <div class="content-title">{{name}}</div>
            <div>
              <slot name="btn"></slot>
            </div>
          </div>
          <slot></slot>
          <div class="table-footer flex-l-r" v-if="footerLeft  || pagination">
            <div>
              <slot name="footerLeft"></slot>
            </div>
            <a-pagination class="t-r" v-if="pagination" :show-size-changer="pagination.showSizeChanger" v-model:current="pagination.current" v-model:pageSize="pagination.pageSize"
              :total="pagination.total" :page-size-options="pagination.pageSizeOptions" @showSizeChange="pagination.onShowSizeChange" @change="pagination.onChange"
              :show-total="pagination.showTotal" />
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
// import { Pagination ,Layout} from 'ant-design-vue'
export default {
  // components:{APagination:Pagination ,ALayout:Layout,ALayoutHeader:Layout.Header, ALayoutContent:Layout.Content,ALayoutSider:Layout.Sider},
  props: {
    name: {
      type: String,
      default: ' '
    },
    pagination: {
      type: Object
    },
    hasSearch: {
      type: Boolean
    },
    hasBtn: {
      type: Boolean
    },
    footerLeft: {
      type: Boolean
    },
    leftWidth: {
      type: [Number, String],
      default: 160
    }
  },
  setup (props, contenxt) {
  }
}
</script>

<style lang="less">
@import './../../../styles/theme/common/cssVariable.less';
.right-table {
  .ant-tabs-bar {
    width: 100%;
  }
  .ant-tabs-left-bar {
    .ant-tabs-tab {
      text-align: center !important;
    }
  }

  .right-table-content {
    background: @bodyBackColor;
  }
  .right-table-left {
    background: @bodyBackColor;
    margin-right: 10px;
  }
}
</style>