
<template>
	<el-collapse v-model="innerActiveNames" class="coll-left mt-2 border">
		<el-collapse-item v-for="item in props.data" :key="item.id" :name="item.id">
			<template #title>
				<div class="collapse-title flex items-center justify-between coll-left-title">
					<div style="font-size: 14px">{{ item.title }}</div>
					<div class="action-buttons">
						<el-button size="text" type="primary" @click.stop="handleEdit(item)" class="edit-btn">{{ props.updateText }}</el-button>
						<el-button size="text" type="danger" @click.stop="handleDelete(item)" class="delete-btn">{{ props.deleteText }}</el-button>
					</div>
				</div>
			</template>
			<div v-if="item.list" class="">
				<div v-if="item.list.length && typeof item.list[0] === 'object'">
					<div v-if="item.list.length > 0">
						<div v-for="ip in item.list" :key="ip.id" class="m-2 float-left" style="color: #646464; font-size: 14px">{{ ip.value }}</div>
					</div>
					<div class="text-gray-400 m-2" style="line-height: 24px;" v-else>--</div>
				</div>
				<div v-else>
					<div v-if="item.list.length > 0">
						<div v-for="ip in item.list" :key="ip" class="m-2 float-left" style="color: #646464; font-size: 14px">{{ ip }}</div>
					</div>
					<div class="text-gray-400 m-2" style="line-height: 24px;" v-else>--</div>

				</div>
			</div>
			<slot v-else></slot>
		</el-collapse-item>
	</el-collapse>
</template>

<script setup name="jCollapse">
const emit = defineEmits(['update', 'delete']);
const props = defineProps({
	data: {
		type: Array,
		default: () => [],
	},
	deleteText: {
		type: String,
		default: '删除',
	},
	updateText: {
		type: String,
		default: '修改',
	},
	activeNames: {
		type: Array,
		default: () => [],
	},
});

const handleDelete = (item) => {
	emit('delete', item);
};
const handleEdit = (item) => {
	emit('update', item);
};
const innerActiveNames = computed({
	get: () => props.activeNames,
	set: (val) => emit('update:activeNames', val),
});
</script>
<style lang="scss">
.collapse-title {
	width: 100%;
	padding-right: 10px;
}

.coll-left {
	position: relative;
}
.coll-left {
	.collapse-title {
		padding-right: 0;
	}
	button {
		background-color: #f4f5fa !important;
	}
	.el-button {
		padding: 0 10px;
		height: 50px;
	}
	.el-button + .el-button {
		margin-left: 0;
	}
	.coll-left-title,
	span.el-collapse-item__title {
		order: 1;
		// margin-left: 5px;
	}
	.el-icon {
		margin-left: 10px;
	}
}
</style>
