<template>
  <div style="width: 100%;display: flex;justify-content: center;align-items: center;transform: rotate(180deg);">
    <div class="primary-box" :class="{ 'none-primary-box': props.item.status === 'none' }">
      
      <div class="prompt-container" ref="promptContainerRef">
        <div class="prompt-wrapper" ref="promptWrapperRef">
          <div class="prompt" ref="promptRef" :class="{ 'expanded': isHovering }" @mouseenter="isHovering = true" @mouseleave="isHovering = false">
            <span class="prompt-text">
              {{ props.item.generateData.prompt || '生成图片' }}
              <i-ep-DocumentCopy class="Copy" @click.stop="copyPrompt"/>
            </span>
            <div class="generate-data internal" v-show="!isHovering && !showExternalGenerateData">
              <div class="detailed-data first-detailed-data">{{ props.item.generateData.model }}</div>
              <div class="detailed-data">{{ props.item.generateData.proportion }}</div>
            </div>
          </div>
        </div>
        <div class="generate-data external" v-show="!isHovering && showExternalGenerateData">
          <div class="detailed-data first-detailed-data">{{ props.item.generateData.model }}</div>
          <div class="detailed-data">{{ props.item.generateData.proportion }}</div>
        </div>
      </div>

      <!-- 加载中 -->
      <div v-if="props.item.status === 'none'" class="box none-box">
        <!-- <img :src="primaryPicture" alt="无" class="img" /> -->
      </div>

      <!-- 生成失败 -->
      <div v-if="props.item.status === 'error'" class="box none-box">
        <img :src="primaryPicture" alt="无" class="img" />
        <!-- <span>生成失败</span> -->
      </div>

      <!-- 生成中 -->
      <div v-if="props.item.status === 'generate'" class="box generate-box">
        <div class="generate-content">
          <!-- 欢快的加载动画 -->
          <div class="loading-animation">
            <div class="bounce-dot"></div>
            <div class="bounce-dot"></div>
            <div class="bounce-dot"></div>
          </div>

          <!-- 状态文本 -->
          <div class="status-text">{{ generateStatusText }}</div>
        </div>
      </div>

      <!-- 已完成 图片 -->
      <div v-if="props.item.status === 'success' && props.item.type === 'Painting'" class="box success-box">
        <div v-for="(file, index) in props.item.files" :key="index" class="one-box" :class="{ 'collected': isCollected(file) }" @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -1">
          <!-- <img :src="file" alt="index" class="img" /> -->
          <Img :src="file" alt="index" class="img" />

          <div class="left-top">
            <div v-show="hoverIndex === index" class="left-top-btn download-btn" @click="downloadImage(file, 'image')"><img src="@/assets/display/download.svg" /></div>
            <span v-if="hoverIndex === index" class="line" />
            <div class="left-top-btn collect-btn" @click="addCollection(file)"><img :src="isCollected(file) ? collectionActiveIcon : collectionIcon" /></div>
          </div>
          
          <el-tooltip
            effect="dark"
            content="画笔"
            placement="top"
            :hide-after="0"
          >
            <div @click.stop="AIbrush(file, index)" class="bottom-brush">
              <img :src="brush" />
            </div>
          </el-tooltip>
        </div>
      </div>

      <!-- 已完成 视频 -->
      <div v-if="props.item.status === 'success' && props.item.type === 'Video'" class="box success-box">
        <div class="one-box" :class="{ 'collected': isCollected(props.item.files[0]) }" @mouseenter="hoverIndex = 0" @mouseleave="hoverIndex = -1">
          <!-- <img :src="file" alt="index" class="img" /> -->
          <video :src="props.item.files[0]" class="video" controls playsinline />

          <div class="left-top">
            <div v-show="hoverIndex === 0" class="left-top-btn download-btn" @click="downloadImage(props.item.files[0], 'video')"><img src="@/assets/display/download.svg" /></div>
            <span v-if="hoverIndex === 0" class="line" />
            <div class="left-top-btn collect-btn" @click="addCollection(props.item.files[0])"><img :src="isCollected(props.item.files[0]) ? collectionActiveIcon : collectionIcon" /></div>
          </div>
        </div>
      </div>

      <div v-if="props.item.status === 'success'" class="bottom-btn-group" style="margin-top: 8px;">
        <div v-for="(item, index) in bottomBtnGroup" :key="index" class="bottom-btn" @click="item.click()">
          <img :src="item.icon" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import brush from '@/assets/display/brush.svg'
import collectionIcon from '@/assets/display/collection.svg'
import collectionActiveIcon from '@/assets/display/collection-active.svg'
import { useDisplayStore, useParamStore, useUserStore } from '@/stores'
import { downloadImage } from '@/utils/downloadImage.js'
import reEditIcon from '@/assets/display/reEdit.svg'
import againGenerateIcon from '@/assets/display/againGenerate.svg'
import deleteImageIcon from '@/assets/display/deleteImage.svg'
import Img from '@/components/Img/index.vue'
import { cancelOrCollect, deleteGenerateHistory } from '@/apis/display'

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['open-canvas', 'delete-success'])

const useDisplay = useDisplayStore()
const useParams = useParamStore()
const useUser = useUserStore()

const localCollectStatus = ref({ ...props.item.collectStatus })
const hoverIndex = ref(-1)
const isHovering = ref(false)
const showExternalGenerateData = ref(false)
const promptContainerRef = ref(null)
const promptWrapperRef = ref(null)
const promptRef = ref(null)

const checkTextOverflow = () => {
  nextTick(() => {
    if (promptRef.value && promptWrapperRef.value && promptContainerRef.value) {
      const lineHeight = 22.5
      const padding = 8
      const twoLineHeight = lineHeight * 2 + padding
      
      promptRef.value.style.maxHeight = 'none'
      promptRef.value.style.overflow = 'hidden'
      
      const actualHeight = promptRef.value.scrollHeight
      const lineCount = Math.ceil((actualHeight - padding) / lineHeight)
      
      if (!isHovering.value) {
        promptRef.value.style.maxHeight = `${twoLineHeight}px`
        promptRef.value.style.overflow = 'hidden'
      }
      
      showExternalGenerateData.value = lineCount >= 3
      
      if (!isHovering.value) {
        if(lineCount >= 3){
          promptContainerRef.value.style.height = `${twoLineHeight}px`
        } else {
          promptContainerRef.value.style.height = `${actualHeight}px`
        }
      }
    }
  })
}

watch(isHovering, (newVal) => {
  if (promptRef.value) {
    const lineHeight = 22.5
    const padding = 8
    const twoLineHeight = lineHeight * 2 + padding 
    
    if (newVal) {
      promptRef.value.style.maxHeight = 'none'
      promptRef.value.style.overflow = 'visible'
    } else {
      promptRef.value.style.maxHeight = `${twoLineHeight}px`
      promptRef.value.style.overflow = 'hidden'
    }
  }
})

watch(() => props.item.generateData.prompt, () => {
  checkTextOverflow()
}, { immediate: true })

onMounted(() => {
  checkTextOverflow()
  window.addEventListener('resize', checkTextOverflow)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkTextOverflow)
})

const isCollected = (url) => {
  return localCollectStatus.value[url] === true
}

const generateStatusText = computed(() => {
  if (props.item.status === 'generate') {
    return '正在生成中...'
  }
  return ''
})

const AIbrush = (file, index) => {
  emit('open-canvas', {
    mainImage: { url: file, index: index + 1 },
    referenceImages: [],
    source: 'set'
  })
}

const reEdit = () => {
  if(props.item.generateData?.modelType === 'edit'){
    ElMessage.error('画笔生成的任务不能重新编辑')
    return
  }
  useDisplay.setResultData(props.item.generateData)
  useDisplay.fillParamsForEdit()
}

const againGenerate = () => {
  if(props.item.generateData?.modelType === 'edit'){
    ElMessage.error('画笔生成的任务不能再次生成')
    return
  }
  useDisplay.setResultData(props.item.generateData)
  useDisplay.triggerGenerateWithResult()
}

const deleteImage = () => {
  ElMessageBox.confirm(
    '确定要删除该批次图片吗？此操作不可恢复！',
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
      confirmButtonClass: 'el-button--danger'
    }
  ).then(async () => {
    try {
      const res = await deleteGenerateHistory({
        id: props.item.id
      })
      if (res.success) {
        ElMessage.success('删除成功')
        emit('delete-success', props.item.id)
      } else {
        ElMessage.error(res.message || '删除失败')
      }
    } catch (error) {
      console.error('删除操作失败:', error)
      ElMessage.error('删除操作失败')
    }
  }).catch(() => {})
}

const bottomBtnGroup = computed(() => [
  {
    name: '重新编辑',
    icon: reEditIcon,
    click: reEdit
  },
  {
    name: '再次生成',
    icon: againGenerateIcon,
    click: againGenerate
  },
  {
    name: '删除该批次',
    icon: deleteImageIcon,
    click: deleteImage
  }
])

const addCollection = async (url) => {
  try {
    const res = await cancelOrCollect({
      taskId: props.item.id,
      userId: useUser.userInfo.id,
      url: url,
    })
    if (res.success) {
      ElMessage.success(res.message || '操作成功')
      localCollectStatus.value[url] = !localCollectStatus.value[url]
    } else {
      ElMessage.error(res.message || '操作失败')
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    ElMessage.error('收藏操作失败')
  }
}

const copyPrompt = async () => {
  try {
    const promptText = props.item.generateData.prompt || '生成图片'
    await navigator.clipboard.writeText(promptText)
    ElMessage.success('提示词已复制到剪贴板')
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败，请手动复制')
  }
}
</script>

<style lang="less" scoped>
.primary-box{
  width: 80%;
  max-width: 1118px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 40px;
}
.none-primary-box{
  height: 350px;
}

.prompt-container{
  width: 100%;
  position: relative;
  overflow: visible;
}

.prompt-wrapper{
  position: relative;
  width: 100%;
}

.prompt{
  color: #333;
  font-family: "Microsoft YaHei";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.5px;
  word-break: break-all;
  padding: 8px;
  background-color: #fff;
  position: absolute;
  left: -8px;
  top: 0;
  width: 102%;
  z-index: 5;
  width: auto;
  
  &.expanded{
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
}

.prompt-text{
  display: inline;
  color: #333;
  font-family: "Microsoft YaHei";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.Copy{
  cursor: pointer;
  margin-left: 5px;
  color: #999;
  text-align: center;
}
.Copy:hover{
  color: #666;
}
.generate-data{
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  height: 22.5px;
  text-align: center;
  padding: 0 12px;

  color: #999;
  font-family: "Microsoft YaHei";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  
  &.internal{
    display: inline-flex;
    margin-left: 10px;
  }
  
  &.external{
    position: absolute;
    right: -16px;
    bottom: 0;
    z-index: 6;
    // padding-right: 20px;
  }
}

.detailed-data{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-family: "Microsoft YaHei";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 0 10px;
  border-left: 1px solid #999;
  white-space: nowrap;
  height: 12px;
}

.first-detailed-data{
  border-left: none;
  padding-left: 0;
}

.box{
  height: calc(100% - 37px);
  width: 100%;
}
.none-box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .img{
    width: 100%;
    max-width: 300px;
  }
}

// 生成中
.generate-box {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;

  .generate-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    .status-text {
      font-size: 14px;
      color: #333;
      font-weight: 600;
      font-family: "Microsoft YaHei";
    }
  }
}

// 欢快的弹跳动画
.loading-animation {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;

  .bounce-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #333;
    animation: bounce 1.5s infinite ease-in-out;

    &:nth-child(2) {
      animation-delay: 0.2s;
      background-color: #409eff;
    }

    &:nth-child(3) {
      animation-delay: 0.4s;
      background-color: #67c23a;
    }
  }
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
}

// 成功
.one-box{
  position: relative;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  border-radius: 10px;
  // height: 100%;
}
.one-box:hover{
  .left-top,.bottom-brush{
    display:flex
  }
}
.one-box.collected{
  .left-top{
    display:flex
  }
}
.success-box{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 10px;
  gap: 10px;

  .img{
    width: 100%;
    height: auto; /* 保持宽高比 */
    object-fit: contain; /* 确保图片完整显示，不被裁剪 */
    border-radius: 8px; /* 可选：给图片添加圆角 */
  }

  .video{
    width: 380px;
    height: auto; /* 保持宽高比 */
    object-fit: contain; /* 确保图片完整显示，不被裁剪 */
    border-radius: 8px; /* 可选：给图片添加圆角 */
  }
}

.left-top,.bottom-brush{
  display: none;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
.left-top{
  padding: 4px 6px;
  gap: 10px;

  right: 10px;
  top: 10px;
  border-radius: 5px;
  background: rgba(51, 51, 51, 0.80);
  backdrop-filter: blur(2.5px);

  .left-top-btn{
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
  }

  .line{
    width: 1px;
    height: 12px;
    background-color: #ccc;
  }
}
.bottom-brush{
  width: 60px;
  height: 32px;

  border-radius: 10px;
  background: rgba(51, 51, 51, 0.80);
  backdrop-filter: blur(2.5px);
  bottom: 10px;
}
.left-top-btn:hover,.bottom-brush:hover {
  background-color: rgb(112, 112, 112);
}

// 成功时底部按钮组
.bottom-btn-group{
  display: flex;
  align-items: center;
  gap: 10px;
}
.bottom-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 120px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  background-color: #F8F9FA;
}
.bottom-btn:hover{
  background-color: #e4e7ed;
}
</style>
