import type { App } from 'vue'
import request from '@/config/axios'
import Address from '@/components/FormCreate/src/components/Address.vue'
import Input from '@/components/FormCreate/src/components/Input.vue'
import AddUserComp from '@/components/FormCreate/src/components/AddUserComp.vue'
import AddUserDept from '@/components/FormCreate/src/components/AddUserDept.vue'
import AddAprove from '@/components/FormCreate/src/components/AddAprove.vue'
// 👇使用 form-create 需额外全局引入 element plus 组件
import {
  // ElAutocomplete,
  // ElButton,
  // ElCascader,
  // ElCheckbox,
  // ElCheckboxButton,
  // ElCheckboxGroup,
  // ElCol,
  // ElColorPicker,
  // ElDatePicker,
  // ElDialog,
  // ElForm,
  // ElInput,
  // ElInputNumber,
  // ElPopover,
  // ElRadio,
  // ElRadioButton,
  // ElRadioGroup,
  // ElRate,
  // ElRow,
  // ElSelect,
  // ElSlider,
  // ElSwitch,
  // ElTimePicker,
  // ElTooltip,
  // ElTree,
  // ElUpload,
  // ElIcon,
  // ElProgress,
  // 以上会由 @form-create/element-ui/auto-import 自动引入
  ElAlert,
  ElTransfer,
  ElAside,
  ElContainer,
  ElDivider,
  ElHeader,
  ElMain,
  ElPopconfirm,
  ElTable,
  ElTableColumn,
  ElTabPane,
  ElTabs,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElBadge,
  ElTag,
  ElText,
  ElMenu,
  ElMenuItem,
  ElFooter,
  ElMessage,
  ElCollapse,
  ElCollapseItem,
  ElCard,
  ElTreeSelect
  // ElFormItem,
  // ElOption
} from 'element-plus'
import FcDesigner from '@form-create/designer'
import formCreate from '@form-create/element-ui'
import FcDesignerMobile from '@form-create/vant-designer'
import formCreateMobile from '@form-create/vant'
import install from '@form-create/element-ui/auto-import'

//======================= 自定义组件 =======================
import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
import { useApiSelect, useApiSelectTree } from '@/components/FormCreate'
import { Editor } from '@/components/Editor'
import DictSelect from '@/components/FormCreate/src/components/DictSelect.vue'

const DeptSelect = useApiSelectTree({
  name: 'DeptSelect',
  url: 'system/dept/user/get?type=3',
  method: 'GET',
  labelField: 'name',
  valueField: 'id',
  multiple: false,
  lazy: true,
  lazyLoad: async (node) => {
    const res = await request.get({
      url: `system/dept/user/get?type=1?id=${node.id}`
    })
    return res.data || []
  }
})

const CompSelect = useApiSelect({
  name: 'CompSelect',
  labelField: 'name',
  valueField: 'id',
  url: '/system/dept/user/get?type=1'
})
const UserSelect = useApiSelect({
  name: 'UserSelect',
  labelField: 'nickname',
  valueField: 'id',
  url: '/system/user/simple-list'
})
// const DeptSelect = useApiSelect({
//   name: 'DeptSelect',
//   labelField: 'name',
//   valueField: 'id',
//   url: '/system/dept/simple-list'
// })
const ApiSelect = useApiSelect({
  name: 'ApiSelect'
})

console.log('DeptSelect11', DeptSelect, CompSelect)
FcDesigner.component('FcAddress', Address)
FcDesigner.component('FcInput', Input)
FcDesigner.component('FcAddUserDept', AddUserDept)
FcDesigner.component('FcAddUserComp', AddUserComp)
FcDesigner.component('FcAddAprove', AddAprove)

FcDesignerMobile.component('FcAddress', Address)
FcDesignerMobile.component('FcInput', Input)
FcDesignerMobile.component('FcAddUserDept', AddUserDept)
FcDesignerMobile.component('FcAddUserComp', AddUserComp)
FcDesignerMobile.component('FcAddAprove', AddAprove)

const components = [
  ElAlert,
  ElTransfer,
  ElAside,
  ElContainer,
  ElDivider,
  ElHeader,
  ElMain,
  ElPopconfirm,
  ElTable,
  ElTableColumn,
  ElTabPane,
  ElTabs,
  ElTreeSelect,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElBadge,
  ElTag,
  ElText,
  ElMenu,
  ElMenuItem,
  ElFooter,
  ElMessage,
  // ElFormItem,
  // ElOption,
  UploadImg,
  UploadImgs,
  UploadFile,
  DictSelect,
  UserSelect,
  CompSelect,
  DeptSelect,
  ApiSelect,
  Editor,
  ElCollapse,
  ElCollapseItem,
  ElCard
]

// 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档
export const setupFormCreate = (app: App<Element>) => {
  components.forEach((component) => {
    app.component(component.name, component)
  })
  formCreate.use(install)
  // formCreateMobile.use(install)
  // app.use(formCreateMobile)
  app.use(formCreate)
  app.use(FcDesigner)
}
