import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
import { FileWordOutlined, FilePdfOutlined, FileZipOutlined, PaperClipOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import ModalForm from './form';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
import { httpgetExport } from '../../../utils/request';
import { exportFile } from '../../../utils/tools';
import dayjs from 'dayjs';

const obj = { 1: "防洪调度", 2: "兴利调度", 3: "生态调度", 4: "应急调度", 5: "其他" }
const sobj = {0:'已废弃',1:'生效中'}
const Page = () => {
    
    const refModal = useRef();
    const [searchVal, setSearchVal] = useState(false)
    const columns = [
        { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
        { title: '方案名称', key: 'name', dataIndex: 'name',  ellipsis: true },
        { title: '调度类型', key: 'type', dataIndex: 'type',render:(v)=><>{obj[v]}</>},
        { title: '简介', key: 'content', dataIndex: 'content'},
        { title: '编制时间', key: 'tm', dataIndex: 'tm'},
        { title: '附件数', key: 'fileCount', dataIndex: 'fileCount'},
        { title: '状态', key: 'status', dataIndex: 'status',render:(v)=><>{sobj[v]}</>},
        { title: '创建人', key: 'createUser', dataIndex: 'createUser'},
        { title: '最后更新时间', key: 'updateTm', dataIndex: 'updateTm'},
        {
            title: '操作', key: 'operation', fixed: 'right', align: 'center',
            render: (value, row, index) => (
                <CrudOpRender_text
                    edit={true}
                    del={true}
                    view={true}
                    command={(cmd) => () => command(cmd)(row)} 
                />
            )
        },
    ];

    const command = (type) => (params) => {
        if (type === 'save') {
            refModal.current.showSave();
        } else if (type === 'edit') {
            refModal.current.showEdit({ ...params });
        } else if (type === 'view') {
            refModal.current.showView(params);
        } else if (type === 'del') {
            refModal.current.onDeleteGet(apiurl.zsk.ddfa.del + `/${params.id}`);
        }
    }


    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.zsk.ddfa.page).find_noCode);


    useEffect(() => {
        const params = {
            search: {
                ...searchVal,
            }
        };
        search(params)
    }, [searchVal])


    return (
        <>
            <div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
                <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
                    <Card className='nonebox'>
                        <ToolBar
                            setSearchVal={setSearchVal}
                            onSave={command('save')}
                        />
                    </Card>
                    <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
                        <Table columns={columns} rowKey="inx" {...tableProps} />
                    </div>
                </div>

                <BasicCrudModal
                    width={1000}
                    ref={refModal}
                    title=""
                    component={ModalForm}
                    onCrudSuccess={refresh}
                />
            </div>
        </>
    );
}

export default Page;