import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'react-redux';
import { Button } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getPatrolReport } from '../actions/report';
import { getProjectList } from '../actions/plan';
import moment from 'moment';

function patrolReport(props) {
    const { dispatch } = props;
    const tableRef = useRef();
    const [selectOpts, setSelectOpts] = useState([]);
    const [date, setDate] = useState([moment().subtract(1, 'days'), moment()]);
    const [dataSource, setDataSource] = useState([]);

    const qnDomain = localStorage.getItem('qnDomain');

    useEffect(() => {
        dispatch(getProjectList()).then(res => {
            if (res.success) {
                const nextSelectOpts = res.payload?.data?.rows.map(d => {
                    return { label: d.name, value: d.id }
                })
                setSelectOpts(nextSelectOpts)
            }
        });
    }, [])

    const columns = [{
        title: '结构物名称',
        dataIndex: 'projectName',
        key: 'projectName',
        valueType: 'select',
        fieldProps: {
            showSearch: true,
            defaultValue: '',
            options: [{ label: '全部', value: '' }, ...selectOpts],
        },
        ellipsis: true,
        width: 150,
        render: (_, record) => <div>{record.project.name}</div>
    }, {
        title: '巡检报告名称',
        dataIndex: 'groupName',
        key: 'groupName',
        ellipsis: true,
        search: false,
        width: 250,
        render: (_, record) => {
            const fileName = record?.excelPath?.substring(record?.excelPath?.lastIndexOf('/') + 1);
            return <div>{fileName}</div>
        }
    }, {
        title: '巡检日期',
        dataIndex: 'date',
        key: 'date',
        valueType: 'dateRange',
        fieldProps: {
            value: date,
            onChange: e => { setDate(e) }
        },
        ellipsis: true,
        width: 150,
        render: (_, record) => {
            return <div>{moment(record?.inspectTm).format('YYYY-MM-DD')}</div>
        }
    }, {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        search: false,
        width: 200,
        render: (_, record) => {
            return <>
                <Button type="link" onClick={() => {
                    window.open(`https://view.officeapps.live.com/op/view.aspx?src=${qnDomain}/${record?.excelPath}`)
                }}>预览</Button>
                <Button type="link" onClick={() => { window.open(qnDomain + '/' + record?.excelPath) }}>下载</Button>
            </>
        },
    }];

    return (
        <>
            <ProTable
                columns={columns}
                actionRef={tableRef}
                options={false}
                dataSource={dataSource || []}
                rowKey='id'
                pagination={{ pageSize: 10 }}
                request={async (params = {}) => {
                    const res = await dispatch(getPatrolReport({
                        limit: params?.pageSize,
                        page: params?.current - 1,
                        projectId: params?.projectName,
                        startTime: date ? date[0].format('YYYY-MM-DD') + ' 00:00:00' : '',
                        endTime: date ? date[1].format('YYYY-MM-DD') + ' 23:59:59' : '',
                    }));
                    setDataSource(res?.payload.data?.rows);
                    return {
                        ...res,
                        total: res.payload.data.count ? res.payload.data.count : 0,
                    };
                }}
                onReset={() => { setDate([moment().subtract(1, 'days'), moment()]) }}
            />
        </>
    )
}

function mapStateToProps(state) {
    const { auth, structureList } = state
    return {
        user: auth.user,
        struList: structureList.data || [],
        struLoading: structureList.isRequesting,
    }
}
export default connect(mapStateToProps)(patrolReport);