<template>
  <div class="filter-box">
    <search v-if="filter && filterFiled.length > 0" :filed="filterFiled" @query="searchQuery">
      <template v-slot:search="{ item, formInline }">
        <slot v-bind="{ item, formInline }" name="search"></slot>
      </template>
    </search>
    <el-row v-if="useBtn">
      <el-button plain :type="item.type" :size="item.size || 'mini'" :icon="item.icon" v-for="(item, index) in btnList" :key="index" @click="$emit(item.name)">{{ item.label }}</el-button>
    </el-row>
    <tables
      :selection="selection"
      :readOnly="readOnly"
      :tableData="tableData"
      :operation="operation"
      :filed="filed"
      :options="options"
      :operate="operate"
      @handle="handle"
      @handleSelectionChange="$emit('handleSelectionChange', $event)"
      @dblclick="$emit('dblclick', $event)"
    >
      <template v-slot:tablesPre>
        <slot name="tablesPre"></slot>
      </template>
      <template v-slot:tablesExt>
        <slot name="tablesExt"></slot>
      </template>
      <template v-slot:tablesOperate="{ scope }">
        <slot name="tablesOperate" v-bind="{ scope }"></slot>
      </template>
    </tables>
    <pagination v-if="pagination" :total="total" :page.sync="this_is_pageNum" :limit.sync="this_is_pageSize" @pagination="paginationsQuery"/>
  </div>
</template>
<script>
import tables from './table.vue';
import search from './search.vue';
// import pagination from './pagination.vue';
// import _ from 'lodash';
export default {
  components: {
    tables,
    search,
    // pagination
  },
  props: {
    // 是否使用分页
    pagination: { type: Boolean, default: true },
    // 是否使用查询
    filter: { type: Boolean, default: true },
    // 多选属性
    selection: { type: Boolean, default: false },
    // 只读属性
    readOnly: { type: Boolean, default: false },
    // 使用默认操作 false 通过插槽自定义操作
    operate: { type: Boolean, default: true },
    // 数据
    tableData: { type: Array, default: () => [] },
    // 操作选项
    operation: {
      type: Array,
      default: () => [
        { name: 'edit', label: '修改', icon: 'el-icon-edit' },
        { name: 'delete', label: '删除', icon: 'el-icon-delete' }
      ]
    },
    // 列表循环项
    filed: { type: Array, default: () => [] },
    // 分页总数
    total: { type: Number, default: 0 },
    // 每页条数
    pageSize: { type: Number, default: 10 },
    // 页数
    pageNum: { type: Number, default: 1 },
    options: {
      type: Object,
      default: () => ({
        size: 'mini',
        width: 100
      })
    },
    // 按钮组
    btnList: {
      type: Array,
      default: () => [
        { name: 'add', label: '新增', type: 'primary', icon: 'el-icon-plus' }
      ]
    },
    // 是否显示按钮组
    useBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      filters: {},
      paging: {},
      this_is_pageNum: this.pageNum,
      this_is_pageSize: this.pageSize
    };
  },
  computed: {
    filterFiled() {
      return this.filed.filter(e => e.filter == true);
    },
  },
  mounted() {},
  methods: {
    // 操作函数
    handle({ row, item }) {
      if (item.name == 'delete') {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { type: 'warning' })
          .then(_ => {
            this.$emit(item.name, row);
          })
          .catch(_ => {});
        return;
      }
      this.$emit(item.name, row);
    },
    // 搜索函数
    searchQuery(e) {
      this.filters = e;
      this.query();
    },
    // 分页函数
    paginationsQuery({ page, limit }) {
      this.paging = { pageNum: page, pageSize: limit };
      this.query();
    },
    // 查询函数（分页加搜索）
    query() {
      this.$emit('query', { ...this.filters, ...this.paging });
    }
  },
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
