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 { render } from 'react-dom';
import { httpgetExport } from '../../../utils/request';
import { exportFile } from '../../../utils/tools';

const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const typeOb={0:'宪法',1:'法律',2:'行政法规',3:'督察法规',4:'司法解释',5:'地方性法规'}
const timelinessOb = {0:'尚未生效',1:'有效',2:'已修改',3:'已废止'}
const Page = () => {
    const role = useSelector(state => state.auth.role);
    const editBtn = role?.rule?.find(item => item.menuName == "编辑");
    const viewBtn = role?.rule?.find(item => item.menuName == "查看");
    const delBtn = role?.rule?.find(item => item.menuName == "删除");
    const refModal = useRef();
    const [searchVal, setSearchVal] = useState(false)
    const [iframeSrc, setIframeSrc] = useState('')
    const [pdfViewOPen, setPdfViewOPen] = useState(false)
    const [isFetch, setIsFetch] = useState(false)
    const columns = [
        { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
        { title: '标题', key: 'name', dataIndex: 'name', ellipsis: true },
        {
            title: '制定机关', key: 'fillUnit', dataIndex: 'fillUnit',
        },
        {
            title: '法律性质', key: 'type', dataIndex: 'type', 
            render: (value) => <span>{typeOb[value]}</span>,
        },
        {
            title: '时效性', key: 'timeliness', dataIndex: 'timeliness', render:(v)=><>
            {timelinessOb[v]}
            </>
        },
        {
            title: '公布日期', key: 'announcementDate', dataIndex: 'announcementDate'
        },
        {
            title: '施行日期', key: 'implementationDate', dataIndex: 'implementationDate'
        },
        {
            title: '上传时间', key: 'eventsDesc', dataIndex: 'eventsDesc'
        },
        {
            title: '附件', key: 'files', dataIndex: 'files',render:(v,r)=><a onClick={()=>download(v[0].fileId,v[0]?.fileName)}><PaperClipOutlined />{v[0]?.fileName}</a>
        },
        {
            title: '操作', key: 'operation',
            render: (value, row, index) => (
                <CrudOpRender_text
                    edit={true}
                    del={true}
                    // view={true}
                    command={(cmd) => () => command(cmd)(row)} />)
        },
    ];


    const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);

    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.flfg.del + `/${params.id}`);
        }
    }


    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.flfg.list).find_noCode);

    /**
      * @description 处理成功的回调
      */
    const successCallback = () => {
        refresh()
        setIsFetch(!isFetch)
    }
    /**
 * @description 文件下载
 * @param {String} params 文件fileId
 */
    const download = async(id, name) => {
        var extension = name?.split('.').pop().toLowerCase();
        httpgetExport(apiurl.zdgl.download+id).then(res => {
            exportFile(name,res.data)
        })
    }
    const viewPdf = (params) => {
        setIframeSrc(params)
        setPdfViewOPen(true)
      }
    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')}
                            role={role}
                        />
                    </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={successCallback}
                // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
                />
            </div>

            <Modal
                open={pdfViewOPen}
                width={1000}
                title=""
                footer={null}
                style={{ marginTop: "-5%" }}
                onCancel={() => {
                    setPdfViewOPen(false)
                }}
            >
                <iframe
                    style={{
                        height: '80vh',
                        width: '100%',
                        border: 0,
                        marginTop: 20,
                    }}
                    src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
                />
            </Modal>
        </>
    );
}

export default Page;