import { isNotEmpty } from '@/utils/CommonUtils';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { Button, Spin, message } from 'antd';
import React, { useRef, useState } from 'react';
import { useHistory } from 'umi';
import ViewModal from '../ViewModal';
import { getPage } from '../service';

/**
 * 事后监督列表
 * @returns 
 */
const PostSupervision: React.FC<{}> = () => {
    const [spin, spinSet] = useState<boolean>(false);
    const [visible, setVisible] = useState<boolean>(false);
    //查询分页数据
    const [pageData, pageDataSet] = useState<any>({
        pageNo: 1,
        pageSize: 10
    });
    const history = useHistory();
    const viewModalRef = useRef(null);

    //查看详情
    const viewDetails = (record: any) => {
        setVisible(true);
        viewModalRef.current?.InitData(record.id);
    }

    //关闭
    const closeViewDetails = () => {
        setVisible(false);
    }

    //评标监控回看
    function reviewMonitor(record: any): void {
        window.open("/MonitorScreen/ProjectMonitorRoom?monitorId=" + record.id);
    }

    const columns: ProColumns<any>[] = [
        {
            valueType: 'index',
            align: 'center',
            hideInSearch: true,
        },
        {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectName',
            width: '20%',
            hideInSearch: false,
        },
        {
            title: '项目编号',
            align: 'center',
            dataIndex: 'projectNum',
            hideInSearch: true,
        },
        {
            title: '标段',
            align: 'center',
            dataIndex: 'packageNames',
            hideInSearch: true,
        },
        {
            title: '评审室名称',
            align: 'center',
            dataIndex: 'areaName',
            hideInSearch: false,
            width: '10%',
        },
        {
            title: '预计评标开始时间',
            align: 'center',
            dataIndex: 'reserveStartDate',
            hideInSearch: true,
            width: '15%',
        },
        {
            title: '预计评标结束时间',
            align: 'center',
            dataIndex: 'reserveEndDate',
            hideInSearch: true,
            width: '9.5%',
        },
        {
            title: '状态',
            align: 'center',
            dataIndex: 'status',
            hideInSearch: true,
            width: '4.5%',
            valueEnum: {
                '-1': {
                    text: '待确认'
                },
                '0': {
                    text: '未开启'
                },
                '1': {
                    text: '进行中'
                },
                '2': {
                    text: '已结束'
                },
                '3': {
                    text: '已取消'
                },
                '4': {
                    text: '结束未使用'
                },
            }
        },
        {
            title: '操作',
            align: 'center',
            valueType: 'option',
            width: '10%',
            render: (_: any, record: any) =>
            (
                <>
                    <Button
                        key="viewDetails"
                        type="text"
                        onClick={() =>
                            viewDetails(record)
                        }
                    >
                        查看详情
                    </Button>
                    <Button
                        key="reviewMonitor"
                        type="text"
                        onClick={() =>
                            reviewMonitor(record)
                        }
                    >
                        评标监控回看
                    </Button>
                </>
            )
        },
    ]

    return (
        <Spin spinning={spin}>
            <div className="zjl-entrust confirm">
                <ProTable
                    columns={columns}
                    options={false}
                    bordered={false}
                    size='small'
                    search={{ labelWidth: 'auto', span: 6 }}
                    loading={false}
                    request={async (params) => {
                        spinSet(true);
                        return await getPage({
                            ...params,
                            basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
                            queryType: 2,
                            areaRoomName: params.areaName
                        }).then((res) => {
                            const result = {
                                data: res.data.records,
                                total: res.data.total,
                                success: res.success,
                                pageSize: res.data.size,
                                current: res.data.current
                            }
                            return result;
                        }).finally(() => {
                            isNotEmpty(window.location.search) && history.push(window.location.pathname);
                            spinSet(false);
                        })      
                        }
                    }
                    pagination={{
                        defaultPageSize: 10,
                        pageSizeOptions: [10, 20, 30, 50],
                        defaultCurrent: 1,
                        size: "small",
                        showSizeChanger: true,
                        onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
                        onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
                    }}
                    onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
                    rowKey={"id"}
                />
            </div>
            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} ref = {viewModalRef}/>
        </Spin>
    )
}
export default PostSupervision;