import { useModel } from "umi";
import Tables from "@/components/Tables";
import columns from './tableConfig'
import { DatePicker, Input, Modal, Select, Space } from "antd";
import { SelectValue } from "antd/es/select";
import React, { useCallback, useEffect, useState } from "react";
import moment from "moment";
const { Search } = Input
const { Option } = Select

interface Props {
    visible: boolean,
    hideModel: () => void,
    onChange?: (value1: string, value2?: string) => void,
    fieldType?: 'one' | 'two'
}
function ClerkAide(props: Props) {
    const { visible, hideModel, onChange, fieldType = 'one' } = props
    const { getLabels, getContentList } = useModel('useLaunch.useMaterial')
    const [queryFrom, setQueryFrom] = useState<any>({ isCollect: false, type: '', content: '', labelIds: [], upOrder: false, pageNum: 1, pageSize: 20, dataType: 'personal' })
    const { isCollect, labelIds, type, beginDate, endDate, dataType } = queryFrom

    const [selectClerk, setSelectClerk] = useState<string>('')
    const [selectClerk1, setSelectClerk1] = useState<string>('')

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

    const handleOk = useCallback(() => {
        onChange && onChange(selectClerk, selectClerk1)
        hideModel()
    }, [selectClerk, selectClerk1])

    useEffect(() => {
        getContentList.run({ ...queryFrom, labelIds })
    }, [queryFrom])
    /** 获取标签 */
    useEffect(() => {
        getLabels.run({ pageNum: 1, pageSize: 200 })
    }, [])
    /**分页 */
    const pageChange = useCallback((page: string | number, pageSize?: string | number) => {
        setQueryFrom({ ...queryFrom, pageNum: page, pageSize })
    }, [])
    return <Modal
        title="创意文案"
        visible={visible}
        onCancel={hideHandle}
        onOk={handleOk}
        width={1100}
    >
        <Space style={{ marginBottom: 10 }} wrap>
            <Select style={{ width: 150 }} value={dataType} onChange={(value: SelectValue) => { setQueryFrom({ ...queryFrom, dataType: value }) }}>
                <Option value="personal">个人</Option>
                <Option value="all">公司全员共享</Option>
                <Option value="group">组内共享</Option>
            </Select>
            <DatePicker style={{ width: 120 }} value={beginDate ? moment(beginDate) : null} onChange={(e: moment.Moment | null) => { setQueryFrom({ ...queryFrom, beginDate: e ? moment(e).format('YYYY-MM-DD') : null }) }} placeholder='开始时间' />
            <DatePicker style={{ width: 120 }} value={endDate ? moment(endDate) : null} onChange={(e: moment.Moment | null) => { setQueryFrom({ ...queryFrom, endDate: e ? moment(e).format('YYYY-MM-DD') : null }) }} placeholder='结束时间' />
            <Select style={{ width: 100 }} value={isCollect ? 'true' : 'false'} onChange={(value: SelectValue) => { setQueryFrom({ ...queryFrom, isCollect: value === 'true' ? true : false }) }}>
                <Option value="false">全部</Option>
                <Option value="true">我的收藏</Option>
            </Select>
            {/* <Search style={{ width: 150 }} placeholder="请输入小说" onSearch={(e)=>{setQueryFrom({...queryFrom, novels: e})}} allowClear/> */}
            <Select style={{ width: 160 }} value={labelIds} onChange={(value: SelectValue) => { setQueryFrom({ ...queryFrom, labelIds: value }) }} placeholder="选择标签" allowClear mode="multiple">
                {getLabels?.data?.records.map((item: any) => (<Option value={item?.id} key={item?.id}>{item?.label}</Option>))}
            </Select>
            <Search
                style={{ width: 300 }}
                placeholder="请输入关键字"
                onSearch={(e) => { setQueryFrom({ ...queryFrom, content: e }) }}
                allowClear
                addonBefore={
                    <Select
                        style={{ width: 70 }}
                        value={type ? type : 0}
                        onChange={(value: SelectValue) => { setQueryFrom({ ...queryFrom, type: value ? value : '' }) }}
                        placeholder="请选择素材类型">
                        <Option value={0}>全部</Option>
                        <Option value={1}>标题</Option>
                        <Option value={2}>文案</Option>
                    </Select>
                }
            />
        </Space>
        <Tables
            columns={columns()}
            dataSource={getContentList?.data?.records}
            total={getContentList?.data?.total}
            pageChange={pageChange}
            sizeChange={pageChange}
            size="small"
            bordered
            loading={getContentList?.loading}
            scroll={{ x: 1000, y: 450 }}
            rowSelection={{
                type: 'radio',
                onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
                    if (fieldType === 'one') {
                        selectedRows[0]?.content && setSelectClerk(selectedRows[0]?.content)
                    } else {
                        selectedRows[0]?.title && setSelectClerk(selectedRows[0]?.title)
                        selectedRows[0]?.content && setSelectClerk1(selectedRows[0]?.content)
                    }
                }
            }}
        />
    </Modal>
}

export default React.memo(ClerkAide)