<template>
	<div :class="['left-content-item', { 'left-content-item-active': isActive }]">
		<img class="left-content-item-left" :src="props.avatar" alt="img">
		<transition>
			<div class="left-content-item-right" v-if="isCollapse">
				<div class="left-content-item-right-title">
					{{ props.title }}
				</div>
				<div class="left-content-item-right-time">
					{{ props.date }}
				</div>
			</div>
		</transition>
		<transition @click.stop>
			<el-dropdown v-if="isCollapse && props.item?.id" trigger="hover">
				<div class="left-content-item-more" @click.stop>
					<img src="@/assets/agent/chat/more.svg" alt="">
				</div>
				<template #dropdown>
					<el-dropdown-menu :teleported="false">
						<el-dropdown-item @click="emit('topPosition', props.item)">{{ props.item?.topUp === "1" ? "取消置顶" : "置顶" }}</el-dropdown-item>
						<el-dropdown-item @click="emit('delete', props.item)">删除</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</transition>
	</div>
</template>

<script setup lang="ts"> 
import useStore from '@/stores'
import { computed } from 'vue'


defineOptions({ name: 'ChatHistoryItem' })

const { chat } = useStore()

const emit = defineEmits(['delete', 'topPosition'])

const props = defineProps({
	/** 抬头 */
	title: {
    type: String,
    default: ''
  },
	/** 头像 */
  avatar: {
    type: String,
    default: ''
  },
	/** 时间 */
	date: {
    type: String,
    default: ''
  },
	/** 是否折叠 */
  isCollapse: {
    type: Boolean,
    default: true
  },
	item: {
		type: Object,
		default: () => {}
	}
})

/** 当前是否为活动项 */
const isActive = computed(() => {
  return props.item?.sessionId === chat.info?.historyId || (!props.item?.sessionId && !chat.info?.historyId)
})

</script>


<style lang="scss" scoped>
.left-content-item {
	display: flex;
	padding: 12px 20px 12px 16px;
	border-radius: 12px;
	margin-bottom: 10px;

	&-left {
		width: 36px;
		height: 36px;
	}

	&-right {
		flex: 1;
		margin-right: 8px;
		padding-left: 8px;
		width: 114px;

		&-title {
			color: #191919;
			font-size: 14px;
			max-width: 106px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&-time {
			color: #8C8C8C;
			font-size: 12px;
			max-width: 106px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	&-more {
		position: absolute;
		width: 20px;
		top: 11.5px;
		right: -10px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
}

.left-content-item:hover,
.left-content-item-active {
	background: #F4F8FF;
}

</style>