<!--
 * @Descripttion: 表格过滤组件
 * @version: 1.2
 * @Author: denny
 * @Date: 2022年5月9日10:04:07
 * @LastEditors: denny
 * @LastEditTime: 2022年5月9日09:39:03
-->

<template>
    <div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading">
        <div class="sc-table-select__header">
            <slot name="header" :form="formData" :submit="formSubmit"></slot>
        </div>
        <el-table ref="table" :data="tableData" :height="245" border :highlight-current-row="!multiple"  @select="select" @select-all="selectAll">
            <el-table-column v-if="multiple" type="selection" width="45"></el-table-column>
            <el-table-column v-else type="index" width="45">
                <template #default="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template>
            </el-table-column>
            <slot></slot>
        </el-table>
        <div class="sc-table-select__page">
            <el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
        </div>
    </div>
</template>

<script>
	import config from "@/config/tableSelect";

	export default {
		props: {
			apiObj: { type: Object, default: () => {} },
			params: { type: Object, default: () => {} },
			multiple: { type: Boolean, default: false },
			disabled: { type: Boolean, default: false },
			tableWidth: {type: Number, default: 400},
			props: { type: Object, default: () => {} }
		},
		data() {
			return {
				loading: false,
				tableData: [],
				pageSize: config.pageSize,
				total: 0,
				currentPage: 1,
				selection: [],
				defaultValue: "",
				formData: {}
			}
		},
		computed: {

		},
		watch: {

		},
		mounted() {
			//判断是否静态数据
			if(this.apiObj){
				this.getData();
			}
			this.defaultValue = this.props.keyword;
		},
		methods: {
			//获取表格数据
			async getData(){
				this.loading = true;
				var reqData = {
					[config.request.page]: this.currentPage,
					[config.request.pageSize]: this.pageSize
				}
				Object.assign(reqData, this.params, this.formData)
				var parseData = await this.apiObj.post(reqData);
				this.tableData = parseData.rows;
				this.total = parseData.total;
				this.loading = false;
				//表格默认赋值
				this.$nextTick(() => {
					if (this.selection && this.selection.length > 0)
					{
						var defaultList = []
						//绑定当前行
						this.selection.forEach(row => {
							var setrow = this.tableData.filter(item => item[this.defaultValue]===row[this.defaultValue])
							if(setrow.length > 0){
								this.$refs.table.toggleRowSelection(setrow[0], true);
							}
							else
							{
								defaultList.push(row[this.defaultValue]);
							}
						})
						//移除其他非选中行
						defaultList.forEach(val => {
							var isHas = this.selection.find(item => item[this.defaultValue] === val)
							if(isHas){
								this.selection.splice(this.selection.findIndex(item => item[this.defaultValue] === val), 1)
							}
						})
						this.$emit('change', this.selection);
					}
				})
			},
			//插糟表单提交
			formSubmit(){
				this.currentPage = 1
				this.getData()
			},
			//分页刷新表格
			reload(){
				this.getData()
			},
			//表格勾选事件
			select(rows, row){
				var isSelect = rows.length && rows.indexOf(row) !== -1
				if(isSelect){
					var isHas = this.selection.find(item => item === row);
					if (!isHas){
						this.selection.push(row)
					}
				}
				else
				{
					this.selection.splice(this.selection.findIndex(item => item === row), 1)
				}
				this.$emit('change', this.selection);
			},
			//表格全选事件
			selectAll(rows){
				var isAllSelect = rows.length > 0
				if(isAllSelect){
					rows.forEach(row => {
						var isHas = this.selection.find(item => item === row);
						if (!isHas){
							this.selection.push(row)
						}
					})
				}
				else
				{
					this.tableData.forEach(row => {
						var isHas = this.selection.find(item => item === row)
						if(isHas){
							this.selection.splice(this.selection.findIndex(item => item === row), 1)
						}
					})
				}
				this.$emit('change', this.selection);
			},
			// 触发select隐藏
			blur(){
				this.$refs.select.blur();
			},
			// 触发select显示
			focus(){
				this.$refs.select.focus();
			}
		}
	}
</script>

<style scoped>
	.sc-table-select__table {padding:12px;}
	.sc-table-select__page {padding-top: 12px;}
</style>
