import DatePickePage from '@/components/DatePicker'
import GroupWxTabs from '@/components/GroupWxTabs'
import Tables from '@/components/Tables'
import { quanpin } from '@/utils/fullScreen'
import { CloudDownloadOutlined, FullscreenExitOutlined, FullscreenOutlined, QuestionCircleOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons'
import { Button, Card, Col, Drawer, Input, InputNumber, Radio, Row, Select, Space, Statistic, Table, Tabs, Tooltip, Transfer } from 'antd'
import { SelectValue } from 'antd/es/select'
import { RadioChangeEvent } from 'antd/lib/radio'
import { ColumnsType } from 'antd/lib/table'
import { TransferDirection } from 'antd/lib/transfer'
import { Moment } from 'moment'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useModel, history } from 'umi'
import style from './index.less'
import Sortable from 'sortablejs'
import { useDebounce } from 'ahooks'

interface Prosp {
    isTableName?: boolean,//是否开启公众号名称搜索
    sortArr?: { label: string, value: string }[],//排序参数名列表
    isTableId?: boolean,//是否开公众号ID搜索
    isTableDate?: boolean,//是否开启单日期搜索
    isTableDay?: boolean,//是否开启N天搜索
    isBook?: boolean,//是否开启小说搜索
    isGroup?: boolean,//是否开启切换
    isZj?: boolean,//是否查总计
    isQs?: boolean,//是否开启期数
    isInputName?: boolean, // 是否开启输入框 输入公众号
    isPitcher?: boolean,//默认关闭，关闭下使用左侧组员组件选中的名称，开启后使用input输入筛选
    isAdmin?: boolean, // 是否admin展示 普通员工不展示 与isGroupTab 配合 isGroupTab关闭 isAdmin可打开 
    isCPitcher?: boolean, //是否传Pitcher
    isUserId?: boolean, // 是否传入usid
    isDownload?: boolean,//是否开启下载
    isPlatform?: boolean,//是否开启书城
    isTableDateArr?: boolean,//是否开启双日期搜索
    tableTotal?: { [key: string]: string },//是个开启总计
    isLocation?: boolean,//是否开启投放位置
    isType?: boolean,//是否开启投放位置
    scroll?: { x?: number, y?: number },//开启行滑动并设置容器最大宽度
    columns: () => ColumnsType<any>,//table列表配置
    title?: string,//tabel的标题
    tooltip?: JSX.Element,//是否在标题后加问号展示说明
    dataSource: any[],//table的数据
    expandedRowRender?: (data: any) => JSX.Element,
    ajax: any,//请求
    isTdColor?: boolean,//是否需要开启背景色
    isGroupTab?: boolean,//是否开启组员tab
    className?: string,//自定义class
    isSelctAcc?: boolean, // 是否用data公众号
    isdownload?: boolean, // 是否下载
    isDataSelectPitcher?: boolean,  // 选择数据服务传回来的投手
    isLoginId?: boolean, // 传登陆ID
}
/**
 * 
 * @param  isTableName boolean是否开启公众号名称搜索
 * @param isTableId boolean,//是否开公众号ID搜索
 * @param isTableDate boolean,//是否开启单日期搜索
 * @param isTableDay  boolean,//是否开启N天搜索
 * @param isBook   boolean,//是否开启小说搜索
 * @param isTableDateArr  boolean,//是否开启双日期搜索
 * @param tableTotal  { [key: string]: string },//是个开启总计
 * @param x  number,//开启行滑动并设置容器最大宽度
 * @param dataSource any[],//table的数据
 * @param columns  () => ColumnsType<any>,//table列表配置
 * @param title  string,//tabel的标题
 * @param tooltip  JSX.Element//是否在标题后加问号展示说明
 * @param ajax  (params: Params) => Promise<any>//请求
 */
function Page(props: Prosp) {
    const { isInputName, isTableName, isGroup, isTableId, isTableDate, isSelctAcc = false, isLoginId = false, isTableDay, isCPitcher = true, isDataSelectPitcher = false, isLocation, isBook, isTableDateArr, isType, isPitcher = false, isdownload = false, isAdmin = false, isUserId = false, isPlatform, isDownload, isGroupTab = true, tableTotal, isQs, isZj, scroll, columns, title, tooltip, ajax, dataSource, expandedRowRender, sortArr, isTdColor, className } = props
    const { state, dispatch, getAccAjax, getUserAjax } = useModel('useData.useTableData')
    const { state: userState } = useModel('useOperating.useUser')
    const { currentUser }: any = useModel('@@initialState', model => ({ currentUser: model.initialState?.currentUser }))
    const { state: { groupActionWx } } = useModel('useOperating.useWxGroupList')
    const [size, setSize] = useState<'small' | 'middle' | 'large'>('small')
    const [page, setPage] = useState<number>(1)
    const [pageSize, setPageSize] = useState<number>(100)
    const [total, setTotal] = useState<number>(0)
    const { selectdName, isFell } = userState
    const [visible, setVisible] = useState<boolean>(false)
    const [selectedKeys, setSelectedKeys] = useState<any[]>([])
    const [statistical, setStatistical] = useState<any>({})
    const [fixedNum, setFixedNum] = useState<number | string>(localStorage.getItem(`${title}fixedNum`) || 1)
    const [targetKeys, setTargetKeys] = useState<any[]>(localStorage?.getItem(`${title}`) ? JSON.parse(localStorage?.getItem(`${title}`) as string) : [])
    const { channel, tableDate, date_range, start, end, tableId, book, order_by, order, location, stage, type, platform, pitcher, tableValue = '1' } = state
    const [showZj, setShowZj] = useState<boolean>(false)
    const [value, setValue] = useState<string>('');
    const [searchValue, setSearchValue] = useState<any>([])
    const ref = useRef(null)

    useEffect(() => {
        return () => {
            console.log('卸载。。。');
            dispatch({ type: 'dataSource', params: { dataSource: [] } })
        }
    }, [])
    /**点击书名搜索书名 */
    useEffect(() => {
        let bookName = history?.location?.query?.bookName
        if (bookName) {
            dispatch({ type: 'book', params: { book: bookName } })
            tableSubmut({ bookName })
        }
    }, [history.location])
    const handleSearch = useCallback((value: string) => {
        setValue(value)
    }, [])
    const debouncedValue = useDebounce(value, { wait: 300 });
    useEffect(() => {
        if (debouncedValue) {
            getAccAjax.run({ user_id: userState?.selectdUserId, name: debouncedValue })
        }
    }, [debouncedValue, isSelctAcc, userState?.selectdUserId])
    useEffect(() => {
        if (isDataSelectPitcher) {
            getUserAjax.run({ user_id: userState?.selectdUserId }).then((res: any) => {
                setSearchValue(res?.data || [])
            })
        }
    }, [isDataSelectPitcher, userState?.selectdUserId])
    /**table搜索事件 */
    const tableSubmut = useCallback(
        (props: {
            pagination?: { current?: number, pageSize?: number, gzh?: string },
            filters?: any,
            sortData?: {
                column: { dataIndex: string },
                order?: "ascend" | "descend"
            },
            bookName?: any,
            download?: boolean,
        }) => {
            let { pagination, filters, sortData, bookName, download, } = props
            let data = {}
            if (isCPitcher) {
                data = { pitcher: isPitcher ? pitcher : selectdName }//'潘晨虹'||
            }
            if (isDataSelectPitcher) {
                data = { pitcher: pitcher }//'潘晨虹'||
            }
            if (isUserId) {
                if (currentUser.userId === 1) {
                    data['user_id'] = userState.selectdUserId || 1
                } else {
                    data['user_id'] = currentUser.userId || 1
                }
            }
            if (isLoginId) {
                data['user_id'] = currentUser.userId || 1
            }
            !download && (data['page'] = pagination?.current || 1)
            !download && (data['page_size'] = pagination?.pageSize || 100)
            // console.log(sortData)
            setPageSize(pagination?.pageSize || 100)
            setPage(pagination?.current || 1)
            let gzh = pagination?.gzh || channel //'寒龙书海'||
            isBook && (book || bookName) && (data['book'] = bookName || book)
            isQs && stage && (data['stage'] = stage)
            isTableName && gzh && (data['channel'] = gzh)
            isInputName && (data['channel'] = channel)
            isSelctAcc && (data['channel'] = channel)
            // data['channel'] = '龙鳞文学'
            isTableId && tableId && (data['state'] = tableId === '2' ? '在投' : '停投')
            isTableDate && tableDate && (data['date'] = tableDate)
            isTableDay && date_range && (data['date_range'] = date_range)
            isTableDateArr && start && (data['start'] = start)
            isTableDateArr && end && (data['end'] = end)
            sortData?.order && (data['order'] = sortData?.order === 'ascend' ? 'asc' : 'desc');
            sortData?.column?.dataIndex && (data['order_by'] = sortData?.column?.dataIndex)
            isLocation && location && (data['location'] = location)
            isType && type && (data['type'] = type)
            isPlatform && platform && (data['platform'] = platform)
            isDownload && download && (data['download'] = 1)
            if (ajax) {
                ajax.run(data).then((res: any) => {
                    if (res?.data) {
                        let dateArr: string[] = []
                        let arr = []
                        if (isTdColor) {
                            arr = res?.data?.map((item: any, index: number) => {
                                item['id'] = (pagination?.current || 1) + index + + Math.random()*100
                                if (dateArr.indexOf(item.date) !== -1) {//假如日期在dateArr中存在
                                    item['color'] = `color${dateArr.indexOf(item.date)}`//那么颜色等于dateArr的位置
                                } else {//假如不存在dateArr中
                                    dateArr.push(item.date)//向dateArr添加日期以备相同日期对比
                                    item['color'] = `color${dateArr.length - 1}`//颜色的值等于dateArr的长度-1
                                }
                                return item
                            })
                        } else {
                            arr = res?.data?.map((item: any, index: number) => {
                                item['id'] = (pagination?.current || 1) + index + Math.random()*100
                                return item
                            })
                        }
                        setStatistical(res?.total_data)
                        dispatch({ type: 'dataSource', params: { dataSource: arr } })
                        setTotal(res?.total)
                    } else {
                        setStatistical({})
                        dispatch({ type: 'dataSource', params: { dataSource: [] } })
                    }
                })
            }
        }, [tableDate, channel, start, end, tableId, book, date_range, selectdName, ajax, order, order_by, isTdColor, location, stage, platform, type])
    /**tableName事件 */
    const tableNameChange = useCallback((value: SelectValue) => {
        // let value = e.target.value
        // setChannel(value)
        dispatch({ type: 'channel', params: { channel: value as string } })
    }, [])
    /**tableBook事件 */
    const tableBookChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let value = e.target.value
        // setBook(value)
        dispatch({ type: 'book', params: { book: value } })
    }, [])
    /**书城*/
    const platformChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let value = e.target.value
        // setPlatform(value)
        dispatch({ type: 'setState', params: { platform: value } })
    }, [])
    const platformChangeInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let value = e.target.value
        console.log(value);

        dispatch({ type: 'setState', params: { platform: value } })
    }, [])
    /**投手名称*/
    const pitcherChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let value = e.target.value
        // setPitcher(value)
        dispatch({ type: 'setState', params: { pitcher: value } })
    }, [])
    /**tableQs事件 */
    const tableQsChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let value = e.target.value
        // setStage(value)
        dispatch({ type: 'setState', params: { stage: value } })
    }, [])
    /**table单日期事件 */
    const tableDateChange = useCallback((arr: Moment[], formatString: string | string[]) => {
        // setTableDate(formatString)
        dispatch({ type: 'tableDate', params: { tableDate: formatString as string } })
    }, [])
    /**table双日期事件 */
    const tableDateArrChange = useCallback((arr: Moment[], formatString: string | string[]) => {
        // setStart((formatString as string[])[0])
        // setEnd((formatString as string[])[1])
        dispatch({ type: 'tableDateArr', params: { start: (formatString as string[])[0], end: (formatString as string[])[1] } })
    }, [])
    /**tableDay事件 */
    const tableDayChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let value = e.target.value
        // setDate_range(value)
        dispatch({ type: 'date_range', params: { date_range: value } })
    }, [])
    /**tableId事件 */
    const tableIdChange = useCallback((value: string) => {
        // setTableId(value)
        dispatch({ type: 'tableId', params: { tableId: value } })
    }, [])
    /**排序选择 */
    const sortChange = useCallback((value: SelectValue) => {
        // setOrder_by(value)
        dispatch({ type: 'setState', params: { order_by: value as string } })
    }, [])
    /**投放位置1 */
    const locationChange = useCallback((value: SelectValue) => {
        // setLocation(value)
        dispatch({ type: 'setState', params: { location: value as 'MP' | 'GDT' } })
    }, [])
    /**投放位置2 */
    const typeChange = useCallback((value: SelectValue) => {
        // setType(value)
        dispatch({ type: 'setState', params: { type: value as 'MP' | 'GDT' } })
    }, [])
    const orderChange = useCallback((value: SelectValue) => {
        // setOrder(value)
        dispatch({ type: 'setState', params: { order: value as 'asc' | 'desc' } })
    }, [])
    /**table字段设置 */
    const handleChange = useCallback((nextTargetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
        setTargetKeys(nextTargetKeys)
    }, [])
    const handleSelectChange = useCallback((sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys])
    }, [])
    const handleScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement, Event>) => {
        // console.log('direction:', direction);
        // console.log('target:', e.target);
    };
    /**table切换事件 */
    const tableChange = useCallback((e: RadioChangeEvent) => {
        dispatch({ type: 'dataSource', params: { dataSource: [] } })
        let value = e.target.value
        dispatch({ type: 'setState', params: { tableValue: value } })
    }, [])
    /**卸载组件清空数据 */
    useEffect(() => {
        return () => {
            dispatch({ type: 'dataSource', params: { dataSource: [] } })
            // setPitcher('')
            setTargetKeys([])
            // setOrder_by(undefined)
            dispatch({ type: 'setState', params: { order_by: undefined, targetKeys: [], pitcher: '' } })
            // setTargetKeys([])
        }
    }, [])
    /**首次加载请求or投手名称变化 */
    useEffect(() => {
        let { channel } = history?.location?.query as any//假如路径中带公众号号名称
        tableSubmut({ pagination: { current: 1, pageSize: 100, gzh: channel, }, download: isdownload })
    }, [selectdName])
    /**重组选中的字段 */
    const newColumns = useMemo(() => {
        console.log(123)
        let arr: any[] = []
        if (targetKeys && targetKeys.length > 0) {
            let column: any[] = columns()
            targetKeys?.forEach((v: string, index: number) => {
                column?.forEach((item: { dataIndex: string, fixed: any }) => {
                    if (item.dataIndex === v) {
                        if (index < fixedNum) {
                            item.fixed = true
                        } else {
                            item.fixed = false
                        }
                        arr.push(item)
                    }
                })
            })
            localStorage.setItem(`${title}`, JSON.stringify(targetKeys))//保存至本地浏览器
            return arr
        }
        return arr
    }, [targetKeys, fixedNum])
    useEffect(() => {
        if (visible) {
            let ul: any = document.getElementsByClassName('ant-transfer-list-content-show-remove')[0]
            if (ul) {
                new Sortable(ul, {
                    animation: 150,
                    dragClass: style.blue,
                    onEnd: (evt: any) => {
                        let newTargetKeys: any[] = []
                        for (let item of ul?.children) {
                            sortArr?.forEach((arr: any) => {
                                if (item?.title === arr?.title) {
                                    newTargetKeys.push(arr?.key)
                                }
                            })
                        }
                        setTargetKeys(newTargetKeys)
                    }
                });
            }
        }
    }, [visible, targetKeys])
    const header = <Col span={24}>
        <Row gutter={[0, 10]}>
            {
                isGroup && <Col span={24}>
                    <Radio.Group onChange={tableChange} value={tableValue}>
                        <Radio.Button value={'1'}>日期汇总</Radio.Button>
                        <Radio.Button value={'2'}>公众号汇总</Radio.Button>
                    </Radio.Group>
                </Col>
            }
            <Col span={24}>
                <Space>
                    {
                        isPitcher && <Input placeholder='请输投手名称' onChange={pitcherChange} allowClear style={{ width: 140 }} value={pitcher} />
                    }
                    {
                        isDataSelectPitcher && <Select
                            style={{ width: 150 }}
                            placeholder='请输投手名称'
                            onChange={(value: any) => { dispatch({ type: 'setState', params: { pitcher: value } }) }}
                            showArrow
                            showSearch
                            allowClear
                            value={pitcher || null}
                        >
                            {
                                searchValue?.map((list: any, eq: number) => {
                                    return <Select.Option key={list?.user_id} value={list?.nick_name}>
                                        {list?.nick_name}
                                    </Select.Option>
                                })
                            })
                    </Select>
                    }
                    {
                        isBook && <Input placeholder='请输入小说名称' onChange={tableBookChange} allowClear style={{ width: 140 }} value={book} />
                    }
                    {
                        isQs && <Input placeholder='请输入期数名称' onChange={tableQsChange} allowClear style={{ width: 140 }} value={stage} />
                    }
                    {
                        isPlatform && <Input placeholder='请输入书城' onChange={platformChange} allowClear style={{ width: 140 }} value={platform} />
                    }
                    {
                        isTableName && <Select
                            style={{ width: 150 }}
                            placeholder="输入搜索公众号"
                            onChange={(value: any) => { tableNameChange(value) }}
                            showSearch
                            allowClear
                            value={channel}
                        >
                            {
                                groupActionWx?.map((list: any, eq: number) => {
                                    return <Select.Option key={list?.id} value={list?.nickName}>
                                        <img src={list?.headImg || localStorage?.bookImg} className={style.item_img} /> {list?.nickName}
                                    </Select.Option>
                                })
                            })
                    </Select>
                    }
                    {
                        isSelctAcc && <Select
                            style={{ width: 150 }}
                            placeholder="输入搜索公众号"
                            onChange={(value: any) => { tableNameChange(value) }}
                            showSearch
                            allowClear
                            defaultActiveFirstOption={false}
                            showArrow={false}
                            filterOption={false}
                            onSearch={handleSearch}
                            value={channel}
                            notFoundContent={null}
                        >
                            {
                                getAccAjax?.data?.data?.map((list: any, eq: number) => {
                                    return <Select.Option key={list?.id} value={list?.nick_name}>
                                        {list?.nick_name}
                                    </Select.Option>
                                })
                            })
                    </Select>
                    }
                    {
                        isInputName && <Input onChange={(event: React.ChangeEvent<HTMLInputElement>) => { tableNameChange(event.target.value) }} placeholder='请输入公众号' allowClear />
                    }
                    {
                        isTableId && <Select value={tableId} placeholder='状态' onChange={tableIdChange} allowClear style={{ minWidth: 100 }}>
                            <Select.Option value='1'>停投</Select.Option>
                            <Select.Option value='2'>在投</Select.Option>
                        </Select>
                    }
                    {
                        isLocation && <Select value={location} placeholder='投放位置' onChange={locationChange} allowClear style={{ minWidth: 100 }}>
                            <Select.Option value='MP'>MP</Select.Option>
                            <Select.Option value='GDT'>GDT</Select.Option>
                        </Select>
                    }
                    {
                        isType && <Select value={type} placeholder='投放位置' onChange={typeChange} allowClear style={{ minWidth: 100 }}>
                            <Select.Option value='MP'>MP</Select.Option>
                            <Select.Option value='GDT'>GDT</Select.Option>
                        </Select>
                    }
                    {
                        isTableDate && <DatePickePage model='DatePicker' DatePickerChange={tableDateChange} allowClear date={tableDate} />
                    }
                    {
                        isTableDateArr && <DatePickePage model='RangePicker' DatePickerChange={tableDateArrChange} allowClear date={start ? [start, end] : undefined} />
                    }
                    {
                        isTableDay && <Input
                            style={{ width: 120 }}
                            value={date_range}
                            onChange={tableDayChange}
                            allowClear
                            placeholder='过去N天'
                        >
                        </Input>
                    }
                    <Button type='primary' onClick={() => tableSubmut({})}><SearchOutlined />搜索</Button>
                    {isDownload && <Button type='primary' onClick={() => tableSubmut({ download: true })}><CloudDownloadOutlined />下载EXCEL</Button>}
                </Space>
                {/*紧凑*/}
                <Space style={{ float: 'right' }}>
                    <Button
                        size='small'
                        type='text'
                        onClick={() => {
                            setVisible(true)
                        }}>
                        <SettingOutlined />
                    </Button>
                    <Button
                        type='text'
                        size='small'
                        onClick={() => {
                            if (ref?.current) {
                                quanpin(ref?.current)
                            }
                        }}>
                        {
                            <Tooltip title={!isFell ? '全屏' : '退出全屏'}>{!isFell ? <FullscreenOutlined /> : <FullscreenExitOutlined />}</Tooltip>
                        }
                    </Button>
                    <Drawer
                        title="table字段设置"
                        width={420}
                        visible={visible}
                        getContainer={ref?.current || false}
                        onClose={() => {
                            setVisible(false)
                        }}
                    >
                        <div>
                            <span>请输入固定列数值：</span>
                            <InputNumber
                                size="small"
                                min={1}
                                max={100000}
                                onChange={(v) => {
                                    setFixedNum(v as number)
                                    localStorage.setItem(`${title}fixedNum`, `${v}`)
                                }}
                                value={fixedNum}
                                style={{ marginBottom: 10 }}
                                placeholder='请输入固定列数值'
                            />
                        </div>
                        <Transfer
                            dataSource={sortArr || []}
                            titles={['不展示', '展示']}
                            showSearch
                            targetKeys={targetKeys || []}
                            selectedKeys={selectedKeys || []}
                            onChange={handleChange}
                            onSelectChange={handleSelectChange}
                            onScroll={handleScroll}
                            render={(item: any) => item?.title}
                            oneWay
                            style={{ marginBottom: 16 }}
                            listStyle={{
                                height: 'calc(100vh - 140px)',
                            }}
                        />
                    </Drawer>
                </Space>
            </Col>
        </Row>
    </Col>
    const content = <Row gutter={[0, 20]} ref={ref} style={isFell ? { background: '#fff' } : {}}>
        {/**table */}
        <Col span={24}>
            <Row gutter={[0, 20]}>
                {header}
                <Tab {...{ size, className, isZj, newColumns, columns, statistical, scroll, isFell, showZj, page, pageSize, dataSource, tableSubmut, expandedRowRender, total, ajax }} />
            </Row>
        </Col>
    </Row >
    return <>
        {
            content
        }
    </>
}
/**表格 */
const Tab = React.memo((props: any) => {
    const { size, className, isZj, newColumns, columns, statistical, scroll, isFell, showZj, page, pageSize, dataSource, tableSubmut, expandedRowRender, total, ajax } = props
    return < Col span={24} >
        <div className={`${style[size]} ${className ? style[className] : ''} `}>
            {
                isZj && <Tables
                    bordered
                    columns={newColumns?.length > 0 ? newColumns : columns()}
                    dataSource={[{ ...statistical, id: 1 }]}
                    scroll={scroll ? isFell ? { ...scroll, y: document.body.clientHeight - 300 } : scroll : {}}
                    size={size}
                    pagination={false}
                    hideOnSinglePage
                    className='total_table'
                />
            }
            <Tables
                className={`all_table ${className ? className : ''}`}
                bordered
                current={showZj ? 1 : page}
                pageSize={pageSize}
                columns={newColumns?.length > 0 ? newColumns : columns()}
                dataSource={showZj ? [{ ...statistical, id: 1 }] : dataSource}
                scroll={scroll ? isFell ? { ...scroll, y: document.body.clientHeight - 300 } : scroll : {}}
                onChange={(pagination: any, filters: any, sorter: any) => tableSubmut({ pagination, filters, sortData: sorter })}
                rowClassName={(record: { color: string }) => style[record['color']]}
                expandedRowRender={expandedRowRender ? expandedRowRender : undefined}
                size={size}
                total={showZj ? 1 : total}
                loading={ajax?.loading}
                defaultPageSize={100}
            />
        </div>
    </Col >
}, (a, b) => {
    if (JSON.stringify(a) === JSON.stringify(b)) {
        return true
    } else {
        return false
    }
})
export default Page