<script setup lang="ts">
import {
  CircleAlert,
  Download,
  EllipsisVertical,
  Play,
} from 'lucide-vue-next'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  currentType: {
    type: String,
    default: '',
  },
  currentState: {
    type: String,
    default: '',
  },
})

// 定义 emit
const emit = defineEmits(['topedRefresh'])

const router = useRouter()

// 跳转详情
function toDetails() {
  if (props.currentType === '0') {
    router.push(`/model-details/${props.item.id}`)
  }
  else if (props.currentType === '1') {
    // console.log('object', 111);
    router.push(`/workflow-details/${props.item.id}`)
  }
}

// 处理下拉菜单选项 编辑/删除/置顶
function handleSelect(event: Event, key: string) {
  event.stopPropagation() // 阻止事件冒泡
  if (key === 'top') {
    handleTop()
  }
  else if (key === 'delete') {
    handleDelete()
  }
}

// 置顶
interface TopUrlType {
  [key: string | number]: string
}
const topUrl = ref<TopUrlType>({
  0: 'model',
  1: 'WorkFlow',
  2: 'image',
})
async function handleTop() {
  try {
    const res = await request.get(
      `/${topUrl.value[props.currentType]}/${props.item.id}/top?isTop=${!props.item
        .isTop}`,
    )
    if (res.code === 200) {
      // 刷新列表
      emit('topedRefresh')
    }
  }
  catch (e) {}
}

// 删除

interface Response {
  code: number
}

async function handleDelete(): Promise<void> {
  const { currentType, item } = props
  let url: string

  switch (currentType) {
    case '0':
      url = `/model/delete?id=${item.id}`
      break
    case '1':
      url = `/WorkFlow/deleteWorkFlow?id=${item.id}`
      break
    default:
      url = `/image/delete?id=${item.id}`
      break
  }

  try {
    const res: Response = await request.get(url)
    if (res.code === 200) {
      // 刷新列表
      emit('topedRefresh')
    }
  }
  catch (e) {
    // 统一处理错误
    console.error('删除操作失败:', e)
  }
}
function getFirstImagePath(imagePaths: string): string {
  if (!imagePaths)
    return ''
  return imagePaths.split(',')[0] || ''
}
</script>

<template>
  <div>
    <div v-if="currentState === 'like' && currentType === '2'">
      <div
        class="h-80 rounded-2xl overflow-hidden cursor-pointer relative group"
        @click="toDetails"
      >
        <img
          class="w-full h-full object-cover block"
          :src="getFirstImagePath(item.imagePaths)"
          alt=""
        >
        <div
          class="absolute w-full h-full top-0 left-0 flex justify-between px-4 py-4 box-border bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
        >
          <div class="flex items-center h-6">
            <img
              class="w-6 h-6 rounded-full"
              :src="item.userAvatar"
              alt="头像"
            >
            <span class="ml-2 h-5 text-gray-300 text-[12px]">{{ item.userName }}</span>
          </div>
          <div class="flex items-center h-7 justify-center rounded-xl bg-[#fceceb] p-2">
            <img
              src="@/assets/img/heart.png"
              class="w-3 h-3 mr-1"
              alt="❤️"
            >
            <span class="text-xs text-[#000]">{{ item.likeNum }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div
        class="h-80 rounded-2xl overflow-hidden cursor-pointer relative"
        @click="toDetails"
      >
        <img v-if="currentType === '0'" class="w-full h-full object-cover block" :src="item.surfaceUrl" alt="">
        <img v-if="currentType === '1'" class="w-full h-full object-cover block" :src="item.coverPath" alt="">
        <img v-if="currentType === '2'" class="w-full h-full object-cover block" :src="item.imagePaths" alt="">
        <div
          v-if="currentState === 'mallProduct' && item.isTop === 1"
          class="text-[#58c08e] border-[#58c08e] border-solid border-[1px] bg-white rounded-lg px-1 w-10 text-[12px] ml-2 text-center absolute top-4 right-8"
        >
          置顶
        </div>
        <!-- 在发布中 auditStatus等于代表没有审批通过 -->
        <div
          v-if="currentState === 'mallProduct' && item.auditStatus === 4"
          class="absolute top-0 left-0 w-full h-full text-gray-400 bg-black/50 flex justify-center items-center flex-col"
        >
          <component
            :is="CircleAlert"
            class="h-[40px] w-[40px] text-white menu-icon m-1 text-gray-400"
          />
          未通过
        </div>
        <div
          class="modelSelectByUserIdModel w-full h-full top-0 left-0 flex px-4 py-4 box-border"
        >
          <div
            v-if="currentState === 'mallProduct' && currentType === '0'"
            class="text-white text-[12px] px-3 bg-[#000] bg-opacity-40 rounded-lg h-[20px] leading-relaxed"
          >
            <span>
              {{ item.modelType }}
            </span>
          </div>
          <div
            v-if="currentState === 'mallProduct' && currentType === '1'"
            class="text-white text-[12px] px-3 bg-[#000] bg-opacity-40 rounded-lg h-[20px] leading-relaxed"
          >
            工作流
          </div>
          <div
            v-if="currentState === 'mallProduct'"
            class="modelSelectByUserIdModel-mask h-1/3 absolute top-0 left-0 bg-gradient-to-b from-black/100 to-transparent px-4 py-4 text-white box-border flex justify-end"
          >
            <div class="menu-content">
              <component
                :is="EllipsisVertical"
                class="h-[18px] w-[18px] text-white menu-icon"
              />
              <div
                class="menu-group text-[#000000] text-[12px] bg-white rounded-lg text-center w-20 mt-2 hidden"
              >
                <div class="menu-item" @click="(event) => handleSelect(event, 'edit')">
                  编辑
                </div>
                <div
                  class="menu-item text-red-600"
                  @click="(event) => handleSelect(event, 'delete')"
                >
                  删除
                </div>
                <div class="menu-item" @click="(event) => handleSelect(event, 'top')">
                  {{ item.isTop === 1 ? "取消置顶" : "置顶" }}
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="currentType !== '2'"
            class="absolute bottom-0 left-0 px-4 py-2 text-white box-border flex justify-between items-center"
          >
            <component :is="Play" class="h-[14px] w-[14px] text-white menu-icon m-1" />
            <span v-if="currentType === '0'">
              {{ item.reals || 0 }}
            </span>
            <span v-if="currentType === '1'">
              {{ item.useNumber || 0 }}
            </span>
            <component
              :is="Download"
              class="h-[14px] w-[14px] text-white menu-icon m-1"
            />
            <span v-if="currentType === '0'">
              {{ item.numbers || 0 }}
            </span>
            <span v-if="currentType === '1'">
              {{ item.downloadNumber || 0 }}
            </span>
            <!-- <component
              :is="ImagePlay"
              class="h-[14px] w-[14px] text-white menu-icon m-1"
            />0 -->
          </div>
        </div>
      </div>
      <div v-if="currentType !== '2'" class="mt-2 text-[12px] text-[#67787e]">
        <div class="text-[#000] mb-1">
          <span v-if="currentType === '0'">
            {{ item.modelName }}
          </span>
          <span v-if="currentType === '1'">
            {{ item.workflowName }}
          </span>

          <!-- <span>{{ item.userName }}</span> -->
        </div>
        <div class="flex">
          <img
            class="block w-[20px] h-[20px] rounded-full mr-2"
            :src="item.userAvatar"
            alt=""
          >
          <span>{{ item.userName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.modelSelectByUserIdModel {
  position: absolute;
  &:hover {
    .modelSelectByUserIdModel-mask {
      display: block;
    }
  }
  .modelSelectByUserIdModel-mask {
    position: absolute;
    width: 100%;
    display: none;
    .menu-content {
      width: 20px;
      height: 30px;
      position: absolute;
      right: 10px;
    }
    .menu-content:hover {
      .menu-group {
        display: block;
      }
    }
    .menu-group {
      position: absolute;
      top: 10px;
      right: 0;
      .menu-item {
        padding: 4px 0 4px 0;
        margin: 4px;
        border-radius: 2px;
        &:hover {
          background-color: #eeeded;
          // border: solid;
        }
      }
    }
  }
}
</style>
