// 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'

      try {
        // 对于OSS图片使用特殊处理
        if (binding.value.startsWith('https://tkm-likei.oss-ap-southeast-1.aliyuncs.com/h5')) {
          const img = new Image()
          img.crossOrigin = 'anonymous'
          img.onload = () => {
            el.src = binding.value
            el.style.opacity = '1'
          }
          img.onerror = (error) => {
            console.warn(`图片加载失败: ${binding.value}`, error)
            el.src = binding.value
            el.style.opacity = '1'
          }
          img.src = binding.value
        } else {
          // 对于外部链接，直接使用普通加载方式
          if (!imageCacheManager.isBuildAsset(binding.value)) {
            el.src = binding.value
            el.style.opacity = '1'
            return
          }

          await imageCacheManager.loadImage(binding.value)
          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'

      try {
        // 对于OSS图片使用特殊处理
        if (binding.value.startsWith('https://tkm-likei.oss-ap-southeast-1.aliyuncs.com/h5')) {
          const img = new Image()
          img.crossOrigin = 'anonymous'
          img.onload = () => {
            el.src = binding.value
            el.style.opacity = '1'
          }
          img.onerror = (error) => {
            console.warn(`图片更新失败: ${binding.value}`, error)
            el.src = binding.value
            el.style.opacity = '1'
          }
          img.src = binding.value
        } else {
          // 对于外部链接，直接使用普通加载方式
          if (!imageCacheManager.isBuildAsset(binding.value)) {
            el.src = binding.value
            return
          }

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