import { getCodeByType } from '../../../../utils'
import { findNodeNameById } from '../../../../utils/tree'
import { computed, ref, unref, watch } from 'vue'
import request from '../../../../axios'

export const useOptions = (props, emits) => {
  // 字段匹配类型
  const field = {
    value: 'value',
    label: 'label'
  }

  /**
   * 异步获取选项数据
   * 此函数用于根据表单头部信息动态获取选项数据，支持处理静态和动态URL
   * @returns {Promise<Object>} - 返回一个Promise，解析为包含选项数据和字段配置的对象
   */
  const getDynamicOptions = async () => {
    // 初始化URL，去除前后空格
    let url = props.formItem.formHead.trim()
    // 检查是否包含动态参数
    if (props.formItem.formHead.indexOf('${') > -1) {
      // 获取动态参数值
      const dynamicKey = getUrlParams(props.formItem.formHead)[0]
      const dynamicValue = props.formData[dynamicKey]
      if (dynamicValue) {
        // 替换URL中的动态参数
        url = replaceDynamicParams(url, dynamicValue)
      }
    }

    // 发起GET请求，获取数据
    const res = await request.get({ url })

    // 返回选项数据和字段配置
    return {
      options: res.data,
      field: {
        value: 'id',
        label: 'name',
        remark: 'remark'
      }
    }
  }

  /**
   * 从URL字符串中提取参数。
   *
   * 该函数用于从URL字符串中提取所有参数部分，并将其作为数组返回。
   * URL中的参数以${paramName}的形式表示，类似于模板字符串。
   *
   * @param url 要从中提取参数的URL字符串。
   * @returns 提取到的参数名称数组。
   */
  const getUrlParams = (url: string): string[] => {
    const regex = /\$\{([^}]*)\}/g
    const matches: string[] = []
    let match

    while ((match = regex.exec(url)) !== null) {
      matches.push(match[1])
    }

    return matches
  }
  /**
   * 使用正则表达式替换URL中的动态参数
   *
   * @param url {string} - 输入的URL字符串，可能包含动态参数占位符
   * @param param {string} - 用于替换动态参数占位符的实际参数值
   * @returns {string} - 所有动态参数占位符都被替换后的URL字符串
   */
  const replaceDynamicParams = (url: string, param: string): string => {
    // 定义正则表达式，用于匹配URL中的动态参数占位符
    const regex = /\$\{[^}]*\}/g
    // 使用正则表达式替换URL中的动态参数占位符为实际参数值
    return url.replace(regex, param)
  }

  // 默认取字典数据
  const options = getCodeByType(props.formItem.contactNo)

  // 是详情还是其它
  const isLook = props.mode === 'look'

  // 双向绑定 选中项
  const select = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    }
  })

  // 是否调用专门接口获取数据
  const isApi = computed(
    () => typeof props.formItem.formHead === 'string' && props.formItem.formHead.includes('api')
  )

  // 查看状态时 需要展示的值
  const select_look = computed(() => {
    if (!isLook) return
    const val = props.modelValue
      ? props.formItem.isMultiple
        ? props.modelValue
        : [props.modelValue]
      : ''

    if (val) {
      return val
        .map((i) => {
          // api类型的下拉 单独处理
          return ['3', '4'].includes(props.formItem.inputType) && isApi.value
            ? '-'
            : options.find((j) => j[field.value] == i)[field.label]
        })
        .join('，')
    } else return '-'
  })

  return {
    options,
    field,
    isLook,
    select,
    select_look,
    getDynamicOptions,
    getUrlParams
  }
}
