<template>
	<a-list
		class="demo-loadmore-list"
		:loading="initLoading"
		item-layout="horizontal"
		:data-source="listData"
		:pagination="pagination"
	>
		<template #renderItem="{ item }">
			<a-list-item>
				<a-skeleton avatar :title="false" :loading="!!item.loading" active>
					<div style="width: 100%">
						<a-list-item-meta>
							<template #title>{{ item.info }}</template>
							<template #avatar v-if="item.avatar">
								<a-avatar :src="item.avatar" />
							</template>
						</a-list-item-meta>
						{{ item.remark }}
						<div class="flc">
							<div @click="editNote(item)">
								<a-tooltip title="编辑" :getPopupContainer="(trigger) => trigger.parentElement">
									<edit-outlined />
								</a-tooltip>
							</div>
							<div class="ml-2" @click="delNote(item)">
								<a-tooltip title="删除" :getPopupContainer="(trigger) => trigger.parentElement">
									<delete-outlined />
								</a-tooltip>
							</div>
							<!-- <div class="ml-2" @click="giveFun(item)">
								<a-tooltip title="点赞" :getPopupContainer="(trigger) => trigger.parentElement">
									<like-outlined :style="{ color: item.isLike == 1 ? '#fa6c8d' : '' }" />
								</a-tooltip>
							</div> -->
						</div>
					</div>
				</a-skeleton>
			</a-list-item>
		</template>
	</a-list>
</template>

<script setup>
	import classCentre from '@/api/student/classCentre'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import { createVNode } from 'vue'
	import { Modal } from 'ant-design-vue'
	const props = defineProps({
		idsObj: {
			type: [Array, Object],
			required: () => {}
		}
	})
	const count = 3
	const emit = defineEmits({ edit: null })
	const initLoading = ref(true)
	const loading = ref(false)
	const data = ref([])
	const listData = ref([])
	const itemNote = ref({})
	onMounted(() => {
		loading.value = false
		initLoading.value = false
		getList()
	})
	const pagination = ref({
		current:1,
		onChange: (page) => {
			pagination.value.current = page
			getList()
		},
		pageSize: 10
	})
	const getList = () => {
		classCentre
			.askList(
				{
					current:pagination.value.current,
					size: pagination.value.pageSize,
					...props.idsObj
				},
				itemNote.value.noteId
			)
			.then((data) => {
				data.records = data.records.map((r) => {
					return {
						...r,
						loading: false
					}
				})
				listData.value = data.records
				pagination.value.total = data.total
				loading.value = false
				initLoading.value = false
			})
	}

	const editNote = (e) => {
		itemNote.value = e.id
		emit('edit', JSON.parse(JSON.stringify(e)))
	}
	const delNote = (e) => {
		Modal.confirm({
			title: '确定要删除笔记',
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				classCentre.askDel([{ noteId: e.noteId }]).then((data) => {
					getList()
				})
			},
			onCancel() {
				console.log('Cancel')
			}
		})
	}
	const giveFun = (e) => {
		classCentre.askLike({ giveId: e.id }, e.giveNumSelf).then(() => {
			getList()
		})
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		getList
	})
</script>
<style scoped lang="less">
	.flc {
		display: flex;
		align-items: center;
	}
	.fcbc {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
