<template>
	<el-dialog title="请选择" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')"
			   :close-on-click-modal="false" top="8vh">
		<div v-loading="loading">
			<div class="pi-table-select__header">
				<slot name="header" :form="formData" :submit="formSubmit"></slot>
			</div>
			<el-table ref="tableRef" :data="tableData" :height="480" :highlight-current-row="!multiple"
					  @row-click="click"
					  @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="pi-table-select__page">
				<el-pagination size="small" background layout="prev, pager, next" :total="total" :page-size="pageSize"
							   v-model:currentPage="formData.page" @current-change="reload"></el-pagination>
			</div>
		</div>
		<template #footer v-if="multiple">
			<el-button @click="visible=false">取 消</el-button>
			<el-button @click="confirm()">确 定</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import config from "@/config/select"
import {ref, onMounted, nextTick} from "vue"

defineExpose({
	open
})

const emit = defineEmits(["success", "closed"])

const props = defineProps({
	title: {type: String, default: '请选择'},
	api: {
		type: Function, default: () => {
		}
	},
	limit: {type: Number, default: 0},
	multiple: {type: Boolean, default: false},
	params: {
		type: Object, default: () => {
		}
	},
	props: {
		type: Object, default: () => {
		}
	}
})
const tableRef = ref(null)

let loading = ref(false)
let visible = ref(false)
let tableData = ref([])
let pageSize = ref(config.pageSize)
let currentPage = ref(1)
let total = ref(0)
let formData = ref({})
let checkData = ref([])
let defaultProps = ref({
	label: config.props.label,
	value: config.props.value,
	page: config.request.page,
	pageSize: config.request.pageSize,
	keyword: config.request.keyword,
	fields: []
})

onMounted(() => {
	defaultProps.value = Object.assign(defaultProps.value, props.props)
})

//显示
function open() {
	visible.value = true;
	getData()
}

async function getData() {
	var reqData = {
		[config.request.page]: currentPage.value,
		[config.request.pageSize]: pageSize.value,
	}
	Object.assign(reqData, props.params, formData.value)
	const res = await props.api(reqData)
	tableData.value = res.data
	total.value = res.count
	initCheck()
}

function confirm() {
	visible.value = false
	emit('success', checkData.value);
}

function formSubmit() {
	currentPage.value = 1
	getData()
}

//分页刷新表格
function reload() {
	getData()
}

//表格勾选事件
function select(rows, row) {
	var isSelect = rows.length && rows.indexOf(row) !== -1
	if (isSelect) {
		checkData.value.push(row)
	} else {
		checkData.value.splice(checkData.value.findIndex(item => item[props.value] == row[props.value]), 1)
	}
}

//表格全选事件
function selectAll(rows) {
	var isAllSelect = rows.length > 0
	if (isAllSelect) {
		rows.forEach(row => {
			var isHas = false
			isHas = checkData.value.find(item => item[props.value] == row[props.value])
			if (!isHas) {
				checkData.value.push(row)
			}
		})
	} else {
		tableData.value.forEach(row => {
			var isHas = false
			isHas = checkData.value.find(item => item[props.value] == row[props.value])
			if (isHas) {
				checkData.value.splice(checkData.value.findIndex(item => item[props.value] == row[props.value]), 1)
			}
		})
	}
}

function click(row) {
	if (!props.multiple) {
		visible.value = false
		emit('success', row);
	}
	var isSelect = checkData.value.length && checkData.value.indexOf(row) !== -1
	tableRef.value.toggleRowSelection(row)
	if (!isSelect) {
		checkData.value.push(row)
	} else {
		checkData.value.splice(checkData.value.findIndex(item => item[props.value] == row[props.value]), 1)
	}
}

function initCheck() {
	if (!props.multiple) return;
	nextTick(() => {
		tableData.value.forEach((row) => {
			var isHas = false
			isHas = checkData.value.find(item => item[props.value] == row[props.value])
			if (isHas) {
				tableRef.value.toggleRowSelection(row, true)
			}
		});
	})
}
</script>

<style scoped>
.pi-table-select__table {
	padding: 12px;
}

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