import Tables from "@/components/Tables";
import { DatePicker, Input, Modal, Space } from "antd";
import React, { useCallback, useEffect, useState } from "react";
const { Search } = Input
import columns from './tableConfig'
import style from './index.less'
import { useModel } from "umi"
const { RangePicker } = DatePicker

interface Props {
    visible: boolean,
    hideModel: () => void,
    onChange?: (value: any) => void
}
function ExtensionPage(props: Props) {
    const { visible, hideModel, onChange } = props
    const [selectClerk, setSelectClerk] = useState<any>([])
    const [pageNum, setPageNum] = useState<number>(1)
    const [pageSize, setPageSize] = useState<number>(20)
    const [name, setName] = useState<string | undefined>(undefined)
    const [updateStartDate, setUpdateStartDate] = useState<string | undefined>(undefined)
    const [updateEndDate, setUpdateEndDate] = useState<string | undefined>(undefined)

    const { getLayoutLocal } = useModel('useLaunch.useWeChat')

    const hideHandle = useCallback(() => {
        hideModel()
    }, [hideModel])

    const handleOk = useCallback(() => {
        if(selectClerk?.length > 0 && Object.keys(selectClerk[0])?.indexOf('typesetting') !== -1) {
            let typesetting = JSON.parse(selectClerk[0]?.typesetting)
            onChange && onChange({ layout_name: selectClerk[0]?.name, img_url: typesetting?.topContent?.content?.url })
            hideModel()
        }
    }, [selectClerk])

    /**分页 */
    const pageChange = useCallback((page: string | number, pageSize?: string | number) => {
        setPageNum(page as number)
        setPageSize(pageSize as number)
    }, [pageNum, pageSize])

    /** 搜索 */
    const onSearch = useCallback((value: string) => {
        setName(value || undefined)
    }, [name])

    // 处理时间
    const rangePickerHandle = useCallback((values: any, formatString: [string, string]) => {
        setUpdateStartDate(formatString[0] || undefined)
        setUpdateEndDate(formatString[1] || undefined)
    }, [updateStartDate, updateEndDate])

    useEffect(() => {
        getLayoutLocal?.run({pageNum, pageSize, name, updateStartDate, updateEndDate})
    }, [pageNum, pageSize, name, updateStartDate, updateEndDate])

    return <Modal
        title="选择原生推广页"
        visible={visible}
        onCancel={hideHandle}
        onOk={handleOk}
        width="80%"
    >
        <div className={style.header} style={{ marginBottom: 10 }}>
            <Space >
                <RangePicker onChange={rangePickerHandle}/>
                <Search style={{ width: 160 }} placeholder="请输入落地页名称" onSearch={onSearch} allowClear />
            </Space>
        </div>
        <Tables
            columns={columns()}
            dataSource={getLayoutLocal?.data?.data?.records}
            total={getLayoutLocal?.data?.data?.total}
            loading={getLayoutLocal?.loading}
            pageChange={pageChange}
            sizeChange={pageChange}
            size="small"
            bordered
            scroll={{ y: 400 }}
            rowSelection={{
                type: 'radio',
                onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
                    selectedRows[0] && setSelectClerk(selectedRows)
                }
            }}
        />
    </Modal>
}

export default React.memo(ExtensionPage)