import { ITemplateFiled } from '../types'
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '../../../../store/modules/user'

export const useOptions = (props, emits) => {
  const tempForm = ref<ITemplateFiled[]>([])

  // (0:不展示，1:单行文本，2:多行文本，3:下拉列表单选，4:下拉列表多选5:下拉树形列表单选，6:下拉树形列表多选,7:附件，8：日期选择，9：轨迹，10：日期时间选择，11.带选项的输入框，12.数字输入框 13.单选，14.多选，15.多选带其他，16.一级表单头，17.二级表单头, 18.子表单, 19.地图，20.富文本，21.下拉树形父子不关联)
  const formType = {
    1: 'Input',
    2: 'Input',
    3: 'Select',
    4: 'Select',
    5: 'Cascader',
    6: 'Cascader',
    7: 'FileUpload',
    8: 'Date',
    10: 'Date',
    11: 'Autocomplete',
    12: 'InputNumber',
    13: 'Radio',
    14: 'Checkbox',
    15: 'CheckboxOther',
    16: 'FormHead1',
    17: 'FormHead2',
    18: 'ChildForm',
    19: 'Map',
    20: 'Editor',
    21: 'Cascader'
  }

  const form = ref()
  const formItems = ref<ITemplateFiled[]>([])

  const rules = computed(() => {
    const obj = {}
    tempForm.value.forEach((item) => {
      // 判断是否是输入型表单
      const isText = item.type === 'Input'
      obj[item.prop] = []
      if (item.required) {
        obj[item.prop].push({
          required: true,
          message: isText ? '请输入' : '请选择',
          trigger: isText ? 'blur' : 'change'
        })
      }
      // 自定义验证规则
      // if (item.valid) {
      //   obj[item.prop].push({
      //     validator: item.valid,
      //     trigger: isText ? 'blur' : 'change'
      //   })
      // }
      // 有字数限制时验证规则
      if (item.maxLength) {
        obj[item.prop].push({
          message: `最多 ${item.maxLength} 个字符`,
          trigger: 'blur',
          max: item.maxLength
        })
      }
    })
    return obj
  })

  const route = useRoute()
  const mode = computed(() => route.query.mode || props.formMode)

  return {}
}
