<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange">
				<el-table-column type="selection" fixed></el-table-column>
				<el-table-column v-if="page" type="index" label="序号" align="center" width="60">
					<template #default="scope">
						<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column v-else type="index" label="序号" align="center" width="60">
					<template #default="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column v-for="(item, index) in cols" :key="index" :prop="item.prop" :label="item.label" :width="item.width"
					header-align="center" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" header-align="center" align="center" show-overflow-tooltip width="200px">
					<template #default="scope">
						<el-button plain type="warning" @click="emit('edit',scope.row)">编辑</el-button>
						<el-button plain type="danger" @click="emit('remove',scope.row )">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination v-if="page" v-model:current-page="currentPage" v-model:page-size="pageSize"
				:page-sizes="pageSizes" :total="totalRows" background="background"
				layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</el-card>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		getCurrentInstance,
		watchEffect
	} from 'vue'

	const {
		proxy
	} = getCurrentInstance()

	import tools from '@/tools'
	const cardBodyStyle = ref(tools.style.card)
	const emit = defineEmits()

	onMounted(() => {
		// init()
		getMenuTable()
		getTableData()
	})

	const props = defineProps({
		column: {
			type: Array,
			default: () => []
		},
		// tableData: {
		// 	type: Array,
		// 	default: () => []
		// },
		tName: {
			type: String,
			default: () => ''
		},
		page: {
			type: Boolean,
			default: () => false
		},
		url: {
			type: String,
			default: () => ''
		},
		param: {
			type: Object,
			default: () => {}
		},
		paramType: {
			type: String,
			default: () => 'json'
		},
	})

	const paramTemp = ref({})
	const urlTemp = ref('')
	watchEffect(() => {
		paramTemp.value = props.param
		urlTemp.value =  props.url
	})
	const tableData = ref([])
	const getTableData = () => {
		if (props.page) {
			paramTemp.value.page = currentPage.value
			paramTemp.value.rows = pageSize.value
		}
		var data = {}
		if (props.paramType == 'String') {
			data = {
				params: JSON.stringify(paramTemp.value)
			}
		} else {
			data = paramTemp.value
		}

		console.log('data：' + JSON.stringify(data))
		proxy.$axios.get(urlTemp.value, data).then(response => {
			if (response.data.code == '0') {
				if (props.page) {
					tableData.value = response.data.data.records
					totalRows.value = response.data.data.total
				} else {
					tableData.value = response.data.data
				}
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	const search = () => {
		currentPage.value = 1
		getTableData()
	}


	/**
	 * 分页
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(5)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页
	 */




	const cols = ref([])
	const getMenuTable = () => {
		var url = 'framework/MenuTable/queryMenuTable'
		var param = {
			menuId: localStorage.getItem('menuId'),
			tName: props.tName
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				cols.value = response.data.data
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});
	}

	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	defineExpose({
		multipleSelection,
		search
	})
</script>

<style>
</style>
