<template>
	<div class="pages" :style="{ height: height, 'max-height': maxHeight }">
		<!-- 新增具名插槽 -->
		<slot name="page-search-filter"></slot>
		<div class="page-search">
			<page-search
				ref="pageSearchRef"
				:search="config.search"
				:search-label-width="config.searchLabelWidth"
				@events="onPageSearch"
			>
				<slot name="page-search-before"></slot>
			</page-search>
		</div>
		<div class="center">
			<page-table
				:config="config"
				@rowBtnClick="btnClick"
				@selection="handleSelectionChange"
				@currentChange="currentChange"
				@rowClick="rowClick"
				@sortClick="sortClick"
			></page-table>
		</div>
		<div v-if="!config.hidePage" class="page-pagination">
			<pagination
				:page.sync="config.pagination.pageIndex"
				:limit.sync="config.pagination.pageSize"
				:total="config.pagination.total"
				:page-sizes="config.pagination.pageSizes"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			></pagination>
		</div>
	</div>
</template>

<script>
import pagination from './pagination';
import pageTable from './page-table';
import pageSearch from '../../page-search/index.vue';
import { tableDataInit } from './page-table/tableDataType';
export default {
	components: { pagination, pageSearch, pageTable },
	props: {
		config: {
			type: Object,
			default: () => tableDataInit,
		},
		height: {
			type: [Number, String],
			default: '100%',
		},
		maxHeight: {
			type: [Number, String],
			default: '100%',
		},
	},
	data() {
		return {};
	},
	created() {},
	methods: {
		/***搜索 */
		onPageSearch(item, searchData) {
			const { config } = this;
			if (config.searchInit && !item.notQuery) {
				config.searchInit(searchData);
				if (!config.hidePage) {
					config.pagination.pageIndex = 1;
				}
				this.getData();
			}
			this.$emit('onSearch', item, searchData);
		},
		/**
		 * 表格*
		 * 每行按钮的点击事件
		 * @returns
		 * row - 每行的数据
		 * index - 按钮的下标
		 * btnItem - 按钮的item数据
		 */
		getData() {
			this.config.query && this.config.query();
		},
		btnClick(item, index, btnItem) {
			this.$emit('rowBtnClick', item, index, btnItem);
		},
		handleSelectionChange(val) {
			this.$emit('selection', val);
		},
		//  hover 进入时会触发该事件
		cellClick(row, column, cell, event) {
			this.$emit('cellClick', row, column, cell, event);
		},
		//  点击显示高亮
		currentChange(currentRow) {
			this.$emit('currentChange', currentRow);
		},
		// 点击某一列
		rowClick(currentRow) {
			this.$emit('rowClick', currentRow);
		},
		sortClick(column) {
			this.$emit('sortClick', column);
		},
		/**分页 */
		// 执行事件
		executeEvent(key, val) {
			const config = this.config.events;
			if (config && config[key]) {
				config[key](val);
			}
		},
		// change当前页数量
		handleSizeChange(size) {
			this.getData();
			this.executeEvent('onChangePageSize', size);
			this.$emit('onChangePageSize', size);
		},
		// change当前页数
		handleCurrentChange(index) {
			this.getData();
			this.executeEvent('onChangePageIndex', index);
			this.$emit('onChangeCurrentPage', index);
		},
	},
};
</script>
<style scoped lang="scss">
</style>
