declare global {
    interface HTMLElement {
        mozRequestFullScreen?(): void;
        webkitRequestFullscreen?(): void;
        msRequestFullscreen?(): void;
    }

    interface Document {
        mozFullScreenElement?: HTMLElement;
        webkitFullscreenElement?: HTMLElement;
        mozCancelFullScreen?(): void;
        webkitExitFullscreen?(): void;
        msExitFullscreen?(): void;
    }
}

import { RenderFunction, SetupContext, Ref, ComputedRef, ComponentPublicInstance, ComponentInternalInstance, VNode } from 'vue'
import { XComponent, XComponentBase, XEvent, SizeType, ValueOf } from './component'

/**
 * 组件 - 表格
 */
export const XTable: XComponent<XTableProps<any>, XTableEventProps<any>, XTableSlots<any>>

export type XTableDataRow = Record<string, any>

export interface XTableConstructor extends XComponentBase, XHeaderMethods {
    props: Readonly<XTableProps<D>>
    context: SetupContext<XTableEmits>
    reactData: TableReactData
    internalData: TableInternalData<D>
    getRefMaps(): TablePrivateRef
    renderVN: RenderFunction
}

export interface TablePrivateRef {
    refElem: Ref<HTMLDivElement>
    refTableHeader: Ref<ComponentPublicInstance>
    refTableFooter: Ref<ComponentPublicInstance>
    refCellResizeBar: Ref<HTMLDivElement>
    refTableRenderMain: Ref<HTMLDivElement>
    refLeftFixedTable?: Ref<ComponentPublicInstance>
    refRightFixedTable?: Ref<ComponentPublicInstance>
}
export interface XTablePrivateRef extends TablePrivateRef { }

export interface TableMethods<D = XTableDataRow> extends TablePublicMethods<D> {
    dispatchEvent(type: ValueOf<XTableEmits>, params: any, evnt: Event | null | string): void
    autoCellWidth(): any
    loadData(): Promise
    loadFields(): Promise
    queryAction(params: any): void
    addRows(data?: any): Promise
    updateRows(data?: any): Promise
    deleteRows(deleteIds?: any[]): Promise
    submitData(data?: any[]): Promise
    validateData(): any
    calcuTableHeaderHeight(): any,
    updateTheme(theme): void
}


export interface XHeaderMethods extends TableMethods {

}

export interface TablePublicMethods<DT = XTableDataRow> {
    updateStyle(): any
}

export interface TablePrivateMethods<DT = XTableDataRow> {
    init(): void
    workInit(): void
    mergeFields(): void
    triggerCellClickEvent(row: any, column: any, $rowIndex: any): void
    unactiveEditCell(): void
    monitorTableBodyResize(): void
    documentEvent(): void
    fixedRightTableYscroll(evnt: any): void
    globalCheckbox(): void // 校验当前页是否全选
}

export type XTableProps<D = XTableDataRow> = {
    id?: XTablePropTypes.ID
    fields?: XTablePropTypes.Fields<D>
    data?: XTablePropTypes.Data<D>
    showHeader?: XTablePropTypes.ShowHeader
    showFooter?: XTablePropTypes.ShowFooter
    showTools?: XTablePropTypes.ShowTools
    loading?: XTablePropTypes.Loading
    checkedRow?: XTablePropTypes.CheckedRow
    stripe?: XTablePropTypes.Stripe
    ShowQueryPanel?: XTablePropTypes.ShowQueryPanel
    queryMaxColumn?: XTablePropTypes.QueryMaxColumn
    firstColumnType?: XTablePropTypes.FirstColumnType
    fieldConfig?: XTablePropTypes.RqConfig
    rowConfig?: XTablePropTypes.RowConfig
    editConfig?: XTablePropTypes.EditConfig
    addConfig?: XTablePropTypes.RqConfig
    deleteConfig?: XTablePropTypes.RqConfig
    updateConfig?: XTablePropTypes.RqConfig
    selectConfig?: XTablePropTypes.RqConfig
    downloadConfig?: XTablePropTypes.RqConfig
    submitConfig?: XTablePropTypes.RqConfig
    schema?: XTablePropTypes.Schema
    defaultProp?: XTablePropTypes.DefaultProp
    size?: XTablePropTypes.SizeType
    toolbarAuth?: XTablePropTypes.ToolbarAuth
    modalZindex?: XTablePropTypes.ModalZindex
    authorization?: XTablePropTypes.Authorization
    filterCondition?: XTablePropTypes.FilterCondition
    filterNeqCondition?: XTablePropTypes.FilterNeqCondition
    reqParams?: XTablePropTypes.ReqParams
    showOverflow?: XTablePropTypes.ShowOverflow
    mergeRow?: XTablePropTypes.MergeRow
    camelOrUnderline?: XTablePropTypes.CamelOrUnderline
    interceptor?: XTablePropTypes.Interceptor
    treeConfig?: XTablePropTypes.TreeConfig
    form?: XTablePropTypes.Form
    theme?: XColumnPropTypes.Theme
    frontPager?: XTablePropTypes.FrontPager
    pageInfo?: XTablePropTypes.PageInfo
    deepFieldNameLastKey?: XTablePropTypes.DeepFieldNameLastKey
    _work?: XTablePropTypes.Work
    _limitLoop?: XTablePropTypes.LimitLoop
}

export type ButtonTpye = {
    enable: boolean,
    title?: string,
    type?: string,
    leftIcon?: string,
    circle?: boolean
}

export namespace XTablePropTypes {
    export type ID = string
    export type Fields<T = any> = T[]
    export type Data<T = any> = T[]
    export type ShowHeader = boolean
    export type ShowFooter = boolean
    export type ShowTools = boolean
    export type Loading = boolean
    export type CheckedRow = Array[]
    export type Stripe = boolean
    export type ShowQueryPanel = boolean
    export type QueryMaxColumn = number
    export type FirstColumnType = 'checkbox' | 'radio' | ''
    export type LoadedAwaitTime = number
    export type Theme = "dark" | "light" | ''
    export type DeepFieldNameLastKey = boolean
    export type FrontPager = boolean
    export type PageInfo = XPagerProps
    export type Schema = {
        $schema?: string
        title?: string
        description?: string
        type: string,
        items: {
            type: string
            properties: object
        }
        required?: any[]
        errorMessage?: object
    }
    export type Form = {
        border?: boolean,
        grid?: boolean,
        labelSuffix?: string,
        labelWidth?: string,
        labelAlign?: string,
        labelInline?: boolean,
        layout?: any[]
    }
    export type Size = SizeType
    export type ModalZindex = number
    export type DefaultProp = {
        totalRs?: string
        dataRs?: string
        pageNumRs?: string
        pageSizeRs?: string
        filterRq?: string
        filterNeqRq?: string
        orderRq?: string
        loadRq?: string
        fieldRs?: string
        fieldRq?: string
        addRq?: string
        updateRq?: string
        deleteRq?: string
        submitRq?: string
    }
    export type RqConfig = {
        url: string
        method?: string
        payload?: any
        payloadType?: 'data' | 'params'
    }
    export type RowConfig = {
        rowKey?: string // 行id的键值
        isHover?: boolean // 当鼠标移到行时，是否要高亮当前行
        isCurrent?: boolean // 当鼠标点击行时，是否要高亮当前行
    }
    export type EditConfig = {
        trigger: null | 'dblclick' | 'click' | '',
        mode: 'cell' | 'row',
        addPos?: 'first' | 'last' | 'afterColumnType' | number,
    }
    export type ToolbarAuth = { // 工具栏权限
        add: ButtonTpye,
        delete: ButtonTpye,
        update: ButtonTpye,
        refresh: ButtonTpye,
        upload: ButtonTpye,
        export: ButtonTpye,
        zoom: ButtonTpye,
        batchUpdate: ButtonTpye,
        menu: ButtonTpye,
        submit: ButtonTpye,
        download: ButtonTpye,
    }
    export type Authorization = {
        key?: string,
        value?: string,
        codeKey?: string,
        codeVal?: string,
        msgkey?: string,
        expireCode?: string | number
        cookieKey?: string
    }
    export type FilterCondition = Object
    export type FilterNeqCondition = Object
    export type ReqParams = Object
    export type ShowOverflow = string | boolean
    export type MergeRow = Object
    export type CamelOrUnderline = 'UnderlineToCamel' | 'CamelToUnderline' | ''
    export type Work = boolean
    export type LimitLoop = number
    export type Interceptor = {
        beforeAddRows(params?: any): boolean; // 返回true会触发http
        beforeAddClick(params?: any): boolean;
        beforeDeleteRows(params?: any): boolean;
        beforeDeleteClick(params?: any): boolean;
        beforeUpdateRows(params?: any): boolean;
        beforeUpdateClick(params?: any): boolean;
        beforeSubmit(params?: any): boolean;
        beforeSubmitClick(params?: any): boolean;
    }
    export type TreeConfig = {
        treeField?: string | '' // 有值则开启
        expandAll?: Boolean
        rowField?: string // id
        parentField?: string // parentId
        childrenField?: string // children
        showLine?: Boolean
        indent?: number
        type?: 'checkbox' | '' | 'radio'
        level?: 'level'
    }
}

export interface XTableEventProps<D = XTableDataRow> {

}

export interface XTableSlots<D = XTableDataRow> {
    leftToolbar: () => any
    rightToolbar: () => any
}

export type XTableEmits = [
    'paste',
    'resizable-change',
    'actions',
    'scroll',
    'checkbox-change',
]

export interface TableReactData<D = XTableDataRow> {
    // 表头字段
    fields: D[]
    // 渲染中的数据
    tableData: D[],
    // 纵向滚动条的宽度
    yScrollbarWidth: number
    // 横向滚动条的宽度
    xScrollbarWidth: number
    // 弹窗
    modalVal: boolean
    // 最小列宽
    minColumnWidth: number
    // 已经勾选
    checkedRows: object
    // 当前页操作信息
    curPageCell: object
    // 全选
    checkedAll: {
        value: boolean
    }
    // 查询过滤值
    queryValues: object,
    // 字段排序
    orderCondition: object,
    // 分页信息
    pageInfo: any,
    // 映射关系
    defaultProp: any,
    // 加载中
    loading: boolean,
    // 是否显示菜单
    showMenus: boolean,
    // 当前点击的行
    activeRow: object
    // 是否显示搜索
    _showQueryPanel: boolean,
    // 字段记录
    _recordFields: object,
    // x轴滚动条距离左侧的距离
    _xScrollLeft: number,
    // x轴滚动条距离右侧的距离
    _xScrollRight: number,
    // 全选item
    _checkedAllItem: any
    // 列最小宽度
    _widgetColMinWidth: {
        select: number,
        datetimepicker: number,
        input: number,
        checkbox: number
    },
}

export interface Button {
    widget: string,
    name: string,
    circle: boolean,
    leftIcon: string,
    [string | number]: any,
}

export namespace XColumnPropTypes {
    export type Widget = string
    export type Name = string
    export type Title = string
    export type Width = number | string
    export type Editable = boolean
    export type Sortable = boolean | number
    export type ShowFormItem = boolean
    export type ShowField = boolean
    export type Searchable = boolean
    export type WidgetLayout = any
    export type Sort = number
    export type Align = 'center' | 'left' | 'right'
    export type SlotName = string
    export type Fixed = '' | 'left' | 'right'
    export type ShowEditWidget = boolean
    export type SlotCanBeClick = boolean
    export type BatchUpdate = boolean
}

/**
 * 列对象
 */
export class ColumnInfo<D = XTableDataRow> {
    widget: XColumnPropTypes.Type
    name: XColumnPropTypes.Name
    title: XColumnPropTypes.Title
    width?: XColumnPropTypes.Width
    editable?: XColumnPropTypes.Editable
    sortable?: XColumnPropTypes.Sortable
    showFormItem?: XColumnPropTypes.ShowFormItem
    showField?: XColumnPropTypes.ShowField
    searchable?: XColumnPropTypes.Searchable
    widgetLayout?: XColumnPropTypes.WidgetLayout
    sort?: XColumnPropTypes.Sort
    align?: XColumnPropTypes.Align
    slotName?: XColumnPropTypes.SlotName
    fixed?: XColumnPropTypes.Fixed
    showEditWidget?: XColumnPropTypes.ShowEditWidget
    slotCanBeClick?: XColumnPropTypes.SlotCanByClick
    batchUpdate?: XColumnPropTypes.BatchUpdate

    /**
     * 以下内部属性
     * 内部属性随时都会调整，不应该被使用
     */
    [String | Number]: any
}

export interface CellRenderHeaderParams<D = XTableDataRow> {
    $table: XTableConstructor<D>
    $rowIndex: number
    column: ColumnInfo<D>
}

export interface TableInternalData<D = XTableDataRow> {
    elemStore: {
        [key: string]: Ref<HTMLElement> | null
    },
    // 搜索高度
    queryPanelHeight: number,
    // 搜索高度
    toolsHeight: number,
    // 表头高度
    headerHeight: number
    // 表尾高度
    footerHeight: number
    // 正在编辑的列
    curEditColumns: any
    // 记录cell的vn,提升性能
    recordCellVN: object
    // 点击单元格的键值
    clickCellKey: string
    // 记录触发的单元格，避免重复触发
    recordCellActive: object
}