import { computed, unref } from 'vue'
import { useQuestionInfo } from './useQuestionInfo'
import { flatten } from 'lodash-es'
import { cleanRichText } from '@/common/xss'
import { showLogicEngine } from '@/management/hooks/useShowLogicEngine'

// 目标题的显示逻辑提示文案
export const useShowLogicInfo = (field) => {
  const hasShowLogic = computed(() => {
    const logicEngine = showLogicEngine.value
    // 判断该题是否作为了显示逻辑前置题
    const isField = logicEngine?.findTargetsByFields(field)?.length > 0
    // 判断该题是否作为了显示逻辑目标题
    const isTarget = logicEngine?.findTargetsByScope(field)?.length > 0
    return isField || isTarget
  })
  const getShowLogicText = computed(() => {
    const logicEngine = showLogicEngine.value
    // 获取目标题的规则
    const rules = logicEngine?.findConditionByTarget(field) || []

    const conditions = flatten(rules).map((item) => {
      const { getQuestionTitle, getOptionTitle } = useQuestionInfo(item.field)
      return `<span>【 ${cleanRichText(getQuestionTitle.value())}】 选择了 【${getOptionTitle.value(unref(item.value)).join('、')}】</span> <br/>`
    })
    return conditions.length
      ? conditions.join('') + '<span> &nbsp;满足以上全部，则显示本题</span>'
      : ''
  })
  return { hasShowLogic, getShowLogicText }
}