<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.productImag" />
      </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>
    <NConfigProvider>
      <NMessageProvider>
      <div v-if="isShowEditorPicture">
        <PictureDetail @close-editor-picture="closeEditorPicture" ref="editUserInfoRef" :item="pictureDetail" @update-like="updateLike"/>
      </div>
        <Publish-picture v-if="isShowPublishPicture" type="edit" ref="PublishPictureRef" :form-data="publishPictureData" @close-publish-img="closePublishImg" />
      </NMessageProvider>
    </NConfigProvider>
  </div>
</template>

<script setup lang="ts">
import { NConfigProvider, NMessageProvider } from "naive-ui";
import { useRouter } from 'vue-router';

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

async function toDetail(item:any){
  try{
        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.productId}`)
          }else if(item.productType === 1){
            router.push(`/workflow-details/${item.productId}`)
          }else{
            onEditPicture(item)
          }
        }
    }catch(err){
        console.log(err);
    }
}

// 显示图片的详情
const pictureDetail = ref({})

const isShowEditorPicture = ref(false)
interface EditUserInfoType {
  isVisible: boolean
}
const editUserInfoRef = ref<EditUserInfoType | null>(null)
async function onEditPicture(item) {
  const res = await request.get(`/image/detail?id=${item.productId}`)
  if(res.code === 200){
    pictureDetail.value = res.data
  }
  isShowEditorPicture.value = true
  nextTick(()=>{
    if(editUserInfoRef.value){
      editUserInfoRef.value.isVisible = true
    }
  })
}
function closeEditorPicture(){
  isShowEditorPicture.value = false
}
</script>

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