<template>
	<a-table :data-source="data" :columns="columns" scrollToFirstRowOnChange :pagination="pagination"
		@change="pageChange" bordered class="ant-table-striped" childrenColumnName="childs" rowKey="id" :indentSize="30"
		:expanded-row-keys="state.expandRowKeys"
		:rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" :loading="loading"
		:scroll="{ y: 600 }">
		<template #image="{ record }">
			<slot name="image" :record='record'></slot>
		</template>
		<template #hide_ad="{ record }">
			<slot name="hide_ad" :record='record'></slot>
		</template>
		
		<template #status="{ record }">
			<slot name="status" :record='record'></slot>
		</template>
		<template #stick_top="{ record }">
			<slot name="stick_top" :record='record'></slot>
		</template>
		<template #hot="{ record }">
			<slot name="hot" :record='record'></slot>
		</template>
		<template #photo_image="{ record }">
			<slot name="photo_image" :record='record'></slot>
		</template>
		<template #license_image="{ record }">
			<slot name="license_image" :record='record'></slot>
		</template>
		<template #operation="{ record }">
			<slot :record='record'></slot>
		</template>
		<template #p_type="{ record }">
			<slot name="p_type" :record='record'></slot>
		</template>
		<template #parent_id="{ record }">
			<slot name="parent_id" :record='record'></slot>
		</template>
		<template #permission_name="{ record }">
			<slot name="permission_name" :record='record'></slot>
		</template>
		
		<template #expandIcon="{ record }">
			<template v-if="record.childs && record.childs.length === 0"><span
					style="margin-right: 24px"></span></template>
			<template v-else>
				<button :class="[
		              'ant-table-row-expand-icon',
		              !state.isExpand[record.id]
		                ? 'ant-table-row-expand-icon-collapsed' //使用组件库原展开按钮的样式
		                : 'ant-table-row-expand-icon-expanded'
		            ]" @click="expandRow(record.id)">
				</button>
			</template>
		</template>

	</a-table>
</template>

<script lang="ts" setup>
	import { ref, onMounted, defineEmits, defineProps, watch } from 'vue';
	let props = defineProps(['data', 'columns', 'pagination', 'loading']);
	const emit = defineEmits();
	let data = ref<Object[]>([])
	let columns = ref<Object[]>([])
	let loading = ref<Boolean>(props.loading);
	let pagination = ref<CommonType.PageType>({
		current: 1,
		pageSize: 10,
		total: 10,
		pageSizeOptions: ['10', '20', '30', '40'],
		hideOnSinglePage: false,
		showSizeChanger: true
	})
	watch(() => [props.data, props.columns, props.pagination, props.loading],
		(newVal, oldVal) => {
			data.value = newVal[0];
			columns.value = newVal[1];
			pagination.value = newVal[2];
			loading.value = newVal[3]
		})

	const pageChange = (val) => {
		emit("page", val)
	}

	const state = ref({
		expandRowKeys: [],
		isExpand: {}
	})

	const expandRow = (id) => {
		state.value.isExpand[id] = !state.value.isExpand[id];
		if (!state.value.expandRowKeys.includes(id)) {
			state.value.expandRowKeys.push(id);
		} else {
			const closedIndex = state.value.expandRowKeys.indexOf(id);
			state.value.expandRowKeys.splice(closedIndex, 1);
		}
	};
</script>

<style scoped>
	.ant-table-striped :deep(.table-striped) td {
		background-color: #fafafa;
	}
</style>