import request from '@/config/axios'
import { isEmpty } from '@/utils/is'
import { jsonParse } from '@/utils'
import { handleTree } from '@/utils/tree'
import { defineComponent, ref, watch, onMounted, useAttrs } from 'vue'

interface TreeNode {
  id: string | number
  label: string
  children?: TreeNode[]
  isLeaf?: boolean
  [key: string]: any
}

interface ApiSelectTreeProps {
  // 选项标签字段
  labelField?: string
  // 选项值字段
  valueField?: string
  // API 接口
  url?: string
  // 请求方法
  method?: 'GET' | 'POST'
  // 请求参数
  data?: string
  // 自定义解析函数
  parseFunc?: string
  // 是否多选
  multiple?: boolean
  // 是否远程搜索
  remote?: boolean
  // 远程搜索字段
  remoteField?: string
  // 是否懒加载
  lazy?: boolean
  // 懒加载方法
  lazyLoad?: (node: TreeNode) => Promise<TreeNode[]>
  // 组件名称
  name?: string
}

export const useApiSelectTree = (option: ApiSelectTreeProps) => {
  return defineComponent({
    name: option.name || 'ApiSelectTree',
    props: {
      labelField: {
        type: String,
        default: () => option.labelField ?? 'label'
      },
      valueField: {
        type: String,
        default: () => option.valueField ?? 'value'
      },
      url: {
        type: String,
        default: () => option.url ?? ''
      },
      method: {
        type: String,
        default: () => option.method ?? 'GET'
      },
      parseFunc: {
        type: String,
        default: () => option.parseFunc ?? ''
      },
      data: {
        type: String,
        default: () => option.data ?? ''
      },
      multiple: {
        type: Boolean,
        default: () => option.multiple ?? false
      },
      remote: {
        type: Boolean,
        default: () => option.remote ?? false
      },
      remoteField: {
        type: String,
        default: () => option.remoteField ?? 'label'
      },
      lazy: {
        type: Boolean,
        default: () => option.lazy ?? false
      },
      lazyLoad: {
        type: Function,
        default: null
      }
    },
    setup(props) {
      const attrs = useAttrs()
      const treeData = ref<TreeNode[]>([])
      const loading = ref(false)
      const queryParam = ref<any>()
      const expandedKeys = ref<(string | number)[]>([])
      const selectedKeys = ref<(string | number)[]>([])

      // 获取树数据
      const getTreeData = async () => {
        if (isEmpty(props.url)) {
          return
        }

        loading.value = true
        try {
          let url = props.url
          const data: any = jsonParse(props.data) || {}

          if (props.remote && queryParam.value !== undefined) {
            if (props.method === 'GET') {
              if (url.includes('?')) {
                url = `${url}&${props.remoteField}=${queryParam.value}`
              } else {
                url = `${url}?${props.remoteField}=${queryParam.value}`
              }
            } else {
              data[props.remoteField] = queryParam.value
            }
          }

          const response =
            props.method === 'GET'
              ? await request.get({ url })
              : await request.post({ url: props.url, data })
          console.log('response', response)

          parseTreeData(response)
        } finally {
          loading.value = false
        }
      }

      // 解析树数据
      const parseTreeData = (data: any) => {
        console.log(123, data)

        // 自定义解析函数优先
        if (!isEmpty(props.parseFunc)) {
          const parse = new Function(`return ${props.parseFunc}`)()
          treeData.value = formatTreeData(parse(data))
          return
        }

        // 直接返回数组的情况
        if (Array.isArray(data)) {
          treeData.value = formatTreeData(data)
          console.log('treeData', treeData.value)

          return
        }

        // 分页数据情况
        if (data.list && Array.isArray(data.list)) {
          treeData.value = formatTreeData(data.list)
          return
        }

        console.warn(`接口[${props.url}]返回结果不符合预期，建议使用自定义解析函数`)
      }

      // 格式化树数据
      const formatTreeData = (data: any[]): TreeNode[] => {
        const res1 = data.map((item) => ({
          id: parseExpression(item, props.valueField),
          label: parseExpression(item, props.labelField),
          value: parseExpression(item, props.valueField),
          isLeaf: !item.children || item.children.length === 0,
          ...item
        }))

        return handleTree(res1, 'id', 'parentId')
      }

      // 表达式解析
      const parseExpression = (data: any, template: string) => {
        if (template.indexOf('${') === -1) {
          return data[template]
        }
        const pattern = /\$\{([^}]*)}/g
        return template.replace(pattern, (_, expr) => {
          const result = data[expr.trim()]
          if (result === undefined) {
            console.warn(`模板[${template}]解析失败，属性[${expr.trim()}]不存在`)
          }
          return result || ''
        })
      }

      // 懒加载子节点
      const loadChildren = async (node: TreeNode) => {
        if (props.lazy && props.lazyLoad && !node.children) {
          loading.value = true
          try {
            const children = await props.lazyLoad(node)
            node.children = formatTreeData(children)
            node.isLeaf = children.length === 0
          } finally {
            loading.value = false
          }
        }
      }

      // 远程搜索
      const remoteMethod = async (query: string) => {
        if (!query) {
          return
        }
        queryParam.value = query
        await getTreeData()
      }

      // 处理节点展开
      const handleNodeExpand = (node: TreeNode) => {
        const index = expandedKeys.value.indexOf(node.id)
        if (index >= 0) {
          expandedKeys.value.splice(index, 1)
        } else {
          expandedKeys.value.push(node.id)
          // 懒加载
          if (props.lazy) {
            loadChildren(node)
          }
        }
      }

      // 处理节点选择
      const handleNodeSelect = (node: TreeNode) => {
        if (props.multiple) {
          const index = selectedKeys.value.indexOf(node.id)
          if (index >= 0) {
            selectedKeys.value.splice(index, 1)
          } else {
            selectedKeys.value.push(node.id)
          }
        } else {
          selectedKeys.value = [node.id]
        }
      }

      // 渲染树节点
      const renderTreeNodes = (nodes: TreeNode[]) => {
        return nodes.map((node) => (
          <el-tree-node key={node.id} node={node}>
            {{
              default: () => (
                <>
                  <span class="custom-tree-node">
                    <span>{node.label}</span>
                  </span>
                  {node.children && renderTreeNodes(node.children)}
                </>
              )
            }}
          </el-tree-node>
        ))
      }

      // 构建树选择器
      const buildTreeSelect = () => {
        return (
          // <el-tree-select
          //   data={treeData.value}
          //   render-after-expand={false}
          //   multiple={props.multiple}
          //   style="width: 240px"
          // />
          <el-input />
        )
      }

      // 初始化加载
      onMounted(() => {
        // if (!props.remote) {
        //   getTreeData()
        // }
      })

      return () => buildTreeSelect()
    }
  })
}
