import type { App, Directive } from 'vue'
import { convertImageUrl } from '@/utils/image-helper'

/**
 * 图片URL处理指令
 * 使用方法：v-image="imageUrl"
 * 或者：v-image:[属性名]="imageUrl" 例如 v-image:src="imageUrl"
 */
export const imageDirective: Directive = {
  mounted(el, binding) {
    const attributeName = binding.arg || 'src'
    const url = binding.value

    if (url) {
      const convertedUrl = convertImageUrl(url)
      el.setAttribute(attributeName, convertedUrl)
    }
  },
  updated(el, binding) {
    const attributeName = binding.arg || 'src'
    const url = binding.value

    if (url) {
      const convertedUrl = convertImageUrl(url)
      el.setAttribute(attributeName, convertedUrl)
    }
  }
}

export function setupImageDirective(app: App) {
  app.directive('image', imageDirective)
}