<template>
  <div
    v-loading="options.loading"
    class="l-flex__auto l-flex--col c-table"
    :class="{ 'prevent-copy': preventCopy }"
  >
    <div
      v-if="hasHeader"
      class="l-flex__none l-flex--row c-table__header"
    >
      <div class="l-flex__fill">
        <slot
          name="header"
          :condition="options.params"
          :total-count="options.totalCount"
        />
        <template v-if="buttons">
          <div class="l-flex wrap">
            <button
              v-for="(button, index) in buttons"
              :key="index"
              class="c-sibling-item o-button"
              @click="onClickButton(button)"
            >
              <i
                v-if="button.icon"
                class="o-button__icon"
                :class="button.icon"
              />
              {{ button.label }}
            </button>
          </div>
        </template>
      </div>
      <template v-if="filters">
        <div
          v-for="filter in filters"
          :key="filter.key"
          class="l-flex__none l-flex--row c-sibling-item"
        >
          <schema-select
            v-if="filter.type === 'select'"
            v-model="options.params[filter.key]"
            :class="{ 'o-select': !filter.remote || filter.simple }"
            :schema="filter"
            @change="onChange"
          />
          <template v-if="filter.type === 'switch'">
            <span class="c-sibling-item">{{ filter.placeholder }}</span>
            <el-switch
              v-model="options.params[filter.key]"
              class="c-sibling-item"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="onChange"
            />
          </template>
          <template v-if="filter.type === 'search'">
            <search-input
              v-model.trim="options.params[filter.key]"
              class="c-sibling-item"
              :placeholder="filter.placeholder"
              @search="onChange"
            />
            <button
              class="c-sibling-item o-button"
              @click="onChange"
            >
              搜索
            </button>
          </template>
        </div>
      </template>
    </div>
    <el-table
      ref="table"
      class="l-flex--col c-table__main"
      :data="tableData"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <schema-table-column
        v-for="(col, index) in cols"
        :key="index"
        :schema="col"
      />
      <status-wrapper
        slot="empty"
        :error="options.error"
        @click="onPagination"
      />
    </el-table>
    <slot
      name="pagination"
      :options="options"
      :pagination="onPagination"
    >
      <pagination
        :total="options.totalCount"
        :page.sync="options.params.pageNum"
        :limit.sync="options.params.pageSize"
        v-bind="paginationConfig"
        @pagination="onPagination"
      />
    </slot>
    <slot />
  </div>
</template>

<script>
import tableMixin from '../mixins/table'
import SchemaTableColumn from './Column'

export default {
  name: 'SchemaTable',
  components: {
    SchemaTableColumn
  },
  mixins: [tableMixin],
  computed: {
    pageSize () {
      return this.schema.pageSize || 10
    },
    preventCopy () {
      return !!this.$listeners['row-dblclick']
    },
    cols () {
      return this.schema.cols.filter(val => val)
    }
  }
}
</script>
