<!--
 * @Author: kongbeiwu lishaohua-520@qq.com
 * @Date: 2025-12-29 13:45:28
 * @LastEditors: kongbeiwu lishaohua-520@qq.com
 * @LastEditTime: 2025-12-30 11:58:46
 * @FilePath: /project/zn-ai/src/renderer/views/knowledge/page.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bg-white box-border w-full h-full p-[20px]">
    <TitleSection @back-to="handleBack" :title="data.date" :desc="data.name" />
    <div class="flex flex-wrap items-center">
      <div v-for="item in 10" class="rounded-[12px] border border-[#E5E8EE] event-pic-item">
        <img src="@assets/images/task/xc.png" />
        <div class="p-[16px]">
          <div class="flex items-center mb-[8px]">
            <span>01.png</span>
            <el-tooltip placement="top">
              <template #content>
                <div class="flex">
                  <span>https://image.baidu.com/search/index</span>
                  <el-button :icon="DocumentCopy" size="small" text class="ml-[3px] bg-[#000]" @click="copyText('https://image.baidu.com/search/index')" />
                </div>
              </template>
              <component :is="RiInformationLine" color="#99A0AE" class="w-[15px] ml-[11px] cursor-pointer" />
            </el-tooltip>
          </div>
          <div class="h-[55px] text-[12px] text-[#99A0AE] mb-[12px] line-clamp-3">
            这是一只靓仔河马，拍照这是一只亲子青蛙主题很合适特别适合亲子主题这是一只靓仔河马，拍照这是一只亲子青蛙主题很合适特别适合亲子主题
          </div>
          <div class="flex items-center justify-between">
            <div class="text-[12px] text-[#99A0AE]">2025-12-15 10:45</div>
            <div class="flex items-center">
              <component :is="RiEditLine" color="#99A0AE" class="w-[12px] mr-[12px] cursor-pointer" />
              <component :is="RiDeleteBinLine" color="#99A0AE" class="w-[12px] cursor-pointer" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { DocumentCopy } from '@element-plus/icons-vue';
import { RiInformationLine, RiEditLine, RiDeleteBinLine } from '@remixicon/vue';
import TitleSection from '@renderer/components/TitleSection/index.vue';

interface Props {
  data: object;
}
const props = defineProps<Props>();

const emits = defineEmits(["update:change"]);

// 复制文本
const copyText = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage({
      message: '复制成功',
      type: 'success',
    });
  } catch (err) {
    ElMessage({
      message: '复制失败',
      type: 'warning',
    });
  }
};

// 返回上一页
const handleBack = (val) => {
  emits("change", '返回事件管理');
};

</script>
<style scoped>
.event-pic-item {
  width: calc((100% - 48px) / 4);
  margin-right: 16px;
  margin-bottom: 16px;
}

.event-pic-item:nth-child(4n) {
  margin-right: 0;
}
</style>
