<script setup lang="ts">
import type { PropType } from "vue";
import { DeleteOutlined } from "@ant-design/icons-vue";
import type { BrowsingHistoryItem } from "@/types/browsingHistory.types";

const props = defineProps({
  data: {
    type: Object as PropType<BrowsingHistoryItem>,
    required: true,
  }
});

const emits = defineEmits<{
  (e: "delete", id: number): void;
}>();

function handleDelete() {
  emits("delete", props.data.id);
}
</script>

<template>
  <div class="history-item-wrap">
    <a-row type="flex" justify="space-between" :gutter="8">
      <a-col flex="1" class="item-content">
        <span class="item-time">{{ data.updateAt }}</span>
        <span class="item-expression" v-if="data.title">
          <RouterLink :to="'/detail/' + data.paperId" target="_blank">{{ data.title }}</RouterLink>
        </span>
      </a-col>
      <a-col>
        <a-popconfirm
          title="确定删除？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="handleDelete"
          placement="topRight"
        >
          <a-button type="text">
            <template #icon><delete-outlined /></template>
          </a-button>
        </a-popconfirm>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/base.scss";

.history-item-wrap {
  padding: 8px 16px;
  border: 1px solid $border-color-primary;
  border-radius: 5px;

  &:hover {
    background-color: #fcfcfc;
  }

  .item-content {
    display: flex;
    align-items: center;

    .item-expression {
      margin-left: 2em;
    }
  }
}
</style>
