/**
 * 图片URL处理指令模块
 *
 * @author 系统开发团队
 * @date 2023-05-15
 * @version 1.0.0
 * @description
 *   该模块提供了一个自定义指令，用于处理图片URL，支持将远程图片URL转换为本地路径。
 *   主要用于简化图片URL处理，减少重复代码，统一处理逻辑。
 */
import type { App, Directive } from 'vue'
import { convertImageUrl } from '@/utils/image-helper'

/**
 * 图片URL处理指令
 * 使用方法：v-image="imageUrl"
 * 或者：v-image:[属性名]="imageUrl" 例如 v-image:src="imageUrl"
 *
 * @example
 * <!-- 基本用法，处理src属性 -->
 * <img v-image="imageUrl" alt="图片描述" />
 *
 * @example
 * <!-- 指定属性，处理background属性 -->
 * <div v-image:background="imageUrl">内容</div>
 *
 * @example
 * <!-- 与Element Plus结合使用 -->
 * <el-image v-image="product.image" />
 */
export const imageDirective: Directive = {
  /**
   * 指令挂载时调用
   * 当元素第一次绑定指令时执行
   *
   * @param el 指令绑定的元素
   * @param binding 指令的绑定值和参数
   */
  mounted(el, binding) {
    const attributeName = binding.arg || 'src'
    const url = binding.value

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

  /**
   * 指令更新时调用
   * 当绑定值变化时执行
   *
   * @param el 指令绑定的元素
   * @param binding 指令的绑定值和参数
   */
  updated(el, binding) {
    const attributeName = binding.arg || 'src'
    const url = binding.value

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

/**
 * 设置图片处理指令
 * 在应用中注册v-image指令
 *
 * @param app Vue应用实例
 *
 * @example
 * // 在main.ts中调用
 * setupImageDirective(app)
 */
export function setupImageDirective(app: App) {
  app.directive('image', imageDirective)
}
