<template>
  <div>
    <div
      v-for="(item, index) in dataList" :key="index"
      @click="toDetail(item)"
      class="bg-white h-20 rounded-lg p-3 mb-2 flex items-center justify-center cursor-pointer relative" 
    >
      <div class="flex-1">
        <div class="text-base ellipsis w-[600px]">{{ item.content }}</div>
        <div class="text-[12px] text-gray-400 mt-1">{{ item.createTime }}</div>
      </div>
      <div class="w-10 h-10 ">
        <img class="w-full h-full rounded-lg" :src="item.userAvatar" />
      </div>
      <div
        v-if="item.isRead === 0"
        class="w-2 h-2 rounded-full bg-[#ec7768] absolute top-2 right-2"
      ></div>
    </div>
    <n-empty v-if="dataList.length === 0" size="large" description="暂无数据！">
    </n-empty>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const props = defineProps({
  dataList: {
    type: Object,
    default: () => [],
  },
});
const router = useRouter()

async function toDetail(item){
    try{
      debugger
        const res = await request.get(`/advice/read?adviceId=${item.id}`)
        if(res.code === 200){
          // 0模型 1工作流 2图片
          if(item.productType === 0){
            router.push(`/model-details/${item.id}`)
          }else if(item.productType === 1){
            router.push(`/workflow-details/${item.id}`)
          }else{
            // onEditPicture()
          }
        }
    }catch(err){
        console.log(err);
    }
}
</script>

<style scoped>
.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
