// src/directives/smartImage.js
import { imageCacheManager } from '@/utils/imageCacheManager'

export const smartImage = {
  async mounted(el, binding) {
    // 只有当绑定的值存在时才处理
    if (binding.value) {
      // 设置加载状态样式
      el.style.opacity = '0'
      el.style.transition = 'opacity 0.3s ease-in-out'

      // 等待DOM更新确保样式生效
      await nextTick()

      try {
        // 统一使用缓存管理器处理所有可缓存资源
        if (imageCacheManager.isBuildAsset(binding.value)) {
          await imageCacheManager.loadImage(binding.value)
          el.src = binding.value
          el.style.opacity = '1'
        } else {
          // 外部链接直接加载
          el.src = binding.value
          el.style.opacity = '1'
        }
      } catch (error) {
        console.warn(`图片加载失败: ${binding.value}`, error)
        el.src = binding.value
        el.style.opacity = '1'
      }
    }
  },

  async updated(el, binding) {
    if (binding.value !== binding.oldValue && binding.value) {
      el.style.opacity = '0'

      // 等待DOM更新确保样式生效
      await nextTick()

      try {
        if (imageCacheManager.isBuildAsset(binding.value)) {
          await imageCacheManager.loadImage(binding.value)
          el.src = binding.value
          el.style.opacity = '1'
        } else {
          el.src = binding.value
          el.style.opacity = '1'
        }
      } catch (error) {
        console.warn(`图片更新失败: ${binding.value}`, error)
        el.src = binding.value
        el.style.opacity = '1'
      }
    }
  },
}