<template>
  <div class="common-table-container" v-if="soul.columns">
    <search-form
      v-if="soul.useSearch && soul.filters.length"
      v-model="soul.query"
      :list="soul.filters"
      :reload="soul.loadData"
      :options="soul.options"
      :onSearch="soul.search"
      :onReset="soul.reset"
      :onCollapse="soul.onCollapse"
    />
    <a-table
      size="middle"
      @change="soul.sortChange"
      :loading="soul.loading"
      :columns="soul.finalColumns"
      :dataSource="soul.dataSource"
      :rowKey="soul.rowKey"
      :scroll="soul.scroll"
      :childrenColumnName="soul.childrenColumnName"
      :rowClassName="soul.changeClassName"
      :rowSelection="
        soul.useSelection
          ? {
              selectedRowKeys: soul.selectedRowKeys,
              onChange: soul.updateSelect,
              columnWidth: 40
            }
          : null
      "
      :bordered="soul.bordered"
      :expandedRowKeys.sync="soul.expandedRowKeys"
      :pagination="soul.paginationConfig"
      :defaultExpandAllRows="soul.defaultExpandAllRows"
    >
      <div slot="title" v-if="soul.useTitle">
        <span class="cust-title">
          {{ soul.title }}
        </span>
        <div class="cust-table-operator">
          <template v-if="soul.filters.length == 0">
            <a-button type="primary" @click="soul.search">查询</a-button>
            &nbsp;
            <a-button @click="soul.reset">重置</a-button>
            &nbsp;
          </template>
          <a-button-group>
            <!-- 额外的按钮 -->
            <template v-for="(tool, i) in soul.toolbar">
              <a-button
                :key="i"
                @click="soul[tool.handler]()"
                v-if="!tool.bizCode || soul.hasPerm(tool.bizCode)"
                >{{ tool.text }}</a-button
              >
            </template>
          </a-button-group>
        </div>
      </div>
      <!-- 单元格渲染插槽（双层的插槽） -->
      <template
        v-for="sname in soul.finalColumns
          .filter((c) => !!c.scopedSlots)
          .map((c) => c.scopedSlots.customRender)"
        #[sname]="value, record, index"
      >
        <slot :name="`${sname}`" v-bind="{ value, record, index }" />
      </template>
      <!-- 列title插槽 -->
      <template
        v-for="tname in soul.finalColumns
          .filter((c) => !!c.slots && c.slots.title)
          .map((c) => c.slots.title)"
        #[tname]
      >
        <slot :name="tname" />
      </template>
    </a-table>
    <slot name="free" />
  </div>
  <div v-else>
    what the fuck? <br />
    where is my fucking page?
  </div>
</template>
<script>
import SearchForm from './SearchForm'

export default {
  components: { SearchForm },
  props: ['soul']
}
</script>
<style lang="less">
.common-table-container {
  .ant-table-title {
    padding: 0px 20px 10px 20px !important;
    height: 55px;
    line-height: 55px;
    border-bottom: 0px !important;
    background: #ffffff;
  }
  .ant-table-wrapper {
    background: #ffffff;
    .ant-table-pagination {
      margin-right: 20px;
      margin-top: 10px;
    }
  }
  //列表页样式调整
  .ant-advanced-search-form {
    margin-bottom: 15px !important;
    padding: 20px 20px 10px 5px !important;
    background: #ffffff;
    .ant-form-item {
      margin-bottom: 15px;
    }
  }
}
</style>
