import type { App } from 'vue'
import Avue from '@smallwei/avue';
import { service } from '@/config/axios/service'
import { useLocaleStoreWithOut } from '@/store/modules/locale'
import { isMobile } from '@/utils/domUtils';

import '@smallwei/avue/lib/index.css';
import '@/styles/avueTable.scss'
import '@/styles/avueForm.scss'


export const setupAvue = async (app: App<Element>) => {
  const { getLocaleMessage } = useI18n() // 国际化
  const localeStore = useLocaleStoreWithOut()
  const currMessages = getLocaleMessage(localeStore.currentLocale.lang)
  const AvueObj = {
    axios: service,
    crudOption: {
      align: 'center',
      headerAlign: 'center',
      index: true,
      border: true,
      gridBtn: false,
      height: 'auto',
      calcHeight: 130,
      searchSpan: 6,
      searchMenuSpan: 6,
      searchMenuPosition: 'left',
      searchIndex: 4,
      searchIcon: true,
      searchShowBtn: true,
      labelSuffix: ' ',
      dialogEscape: false,
      dialogWidth: '80%',
      dialogDrag: true,
    },
    formOption: {
      labelSuffix: ' ',
      labelWidth: 120,
    },
  } as any
  if (isMobile()) {
    AvueObj.crudOption.searchShow = false
    AvueObj.crudOption.calcHeight = 80
    AvueObj.crudOption.dialogFullscreen = true
  }
  if (currMessages && currMessages['Avue']) {
    AvueObj.locale = currMessages['Avue']
  }
  app.use(Avue, AvueObj)
}