import { connect } from 'react-redux';
import React, { useEffect, useState } from 'react';
import { Button, Modal, Form, Input, Divider, Spin, Image, DatePicker, Descriptions, Table } from 'antd'
import ProTable from '@ant-design/pro-table';
import { getReportSpotPrepare, getSpotCheck, getSpotCheckDetail } from '../actions/extract'
import { getReportDetail } from '../actions/patrol';
import moment from 'moment'
import '../components/maintenanceTable.less'


const DetailForm = (props) => {
    const { visible, data, handleClose, loading } = props
    //console.log('data1', data)
    const [qndmn] = useState(localStorage.getItem('qndmn'))
    const changeBoolean = (bool) => {
        // console.log('bool', bool)
        return bool ? '无异常' : '有异常'
    }
    const reportTypeText = (text) => {
        switch (text) {
            case 'road': return '道路';
            //
            case 'countyRoad': return '县道';
            case 'villageRoad': return '乡道';
            case 'rusticRoad': return '村道';
            //
            case 'bridge': return '桥梁';
            case 'culvert': return '涵洞';
            case 'other': return '其他';
            //
            case 'conserve': return '养护';
            case 'patrol': return '巡查';
            case 'construction': return '在建';
            default: return text;
        }
    }
    const keyList = [
        { key: '路线代码', name: 'codeRoad' },
        { key: '其他', name: 'projectType' },
        { key: '道路类型', name: 'reportType' },
        { key: '路线名称', name: 'road' },
        { key: '路线代码', name: 'codeRoad' },
        { key: '养护路段', name: 'roadSectionStart' },
        { key: '具体位置', name: 'address' },
        { key: '路面类型', name: 'roadType' },
        { key: '路面宽度(米)', name: 'roadWidth' },
        { key: '错车道（个）', name: 'wrongLane' },
        { key: '行道树（棵）', name: 'roadsideTrees' },
        { key: '边沟（米）', name: 'roadsideDitch' },
        { key: '护栏（米）', name: 'guardrail' },
        { key: '标线（米）', name: 'roadMarking' },
        { key: '养护人员人数（人）', name: 'maintenanceStaffCount' },
        { key: '修整路肩（平方米）', name: 'shoulderRepair' },
        { key: '清理边沟（米）', name: 'ditchCleaning' },
        { key: '修补沥青路面（平方米）', name: 'asphaltRepair' },
        { key: '修补水泥路面（平方米）', name: 'concreteRepair' },
        { key: '除草（米）', name: 'grassMowing' },
        { key: '树刷白（株/公里）', name: 'treeWhitening' },
        { key: '桩刷白（个）', name: 'pileWhitening' },
        { key: '维护护栏（个）', name: 'guardrailMaintenance' },
        { key: '修复端头（块）', name: 'endHeadRepair' },
        { key: '其他养护内容', name: 'otherDescription' },
        { key: '养护前图片', name: 'conserveBeforePic' },
        { key: '养护中图片', name: 'conserveUnderwayPic' },
        { key: '养护后图片', name: 'conserveAfterPic' },
        { key: '上报视频', name: 'videoUrl' },

    ];
    const keyListOld = [
        // { key: '编号', name: 'id' },
        { key: '工程类型', name: 'projectType' },
        { key: '所在路段', name: 'road' },
        { key: '具体位置', name: 'address' },
        { key: '巡查内容', name: 'content' },
        { key: '路线代码', name: 'codeRoad' },
        // { key: '病害照片', name: 'scenePic' },
        { key: '养护前', name: 'conserveBeforePic' },
        { key: '养护中', name: 'conserveUnderwayPic' },
        { key: '养护后', name: 'conserveAfterPic' },

    ];
    const roadInfo = [
        { key: '路面类型', name: 'roadType' },
        { key: '路面宽度/米', name: 'roadWidth' },
        { key: '错车道/个', name: 'wrongLane' },
        { key: '行道树/棵', name: 'roadsideTrees' },
        { key: '边沟/米', name: 'roadsideDitch' },
        { key: '护栏/米', name: 'guardrail' },
        { key: '标线/米', name: 'roadMarking' },
    ];
    const mantenanceInfo = [
        { key: '养护人员人数/人', name: 'maintenanceStaffCount' },
        { key: '修整路肩/平方米', name: 'shoulderRepair' },
        { key: '开挖、清理边沟/米', name: 'ditchCleaning' },
        { key: '修补沥青路面/平米', name: 'asphaltRepair' },
        { key: '修补水泥路面/平米', name: 'concreteRepair' },
        { key: '除草/米', name: 'grassMowing' },
        { key: '行道树刷白/株/公里', name: 'treeWhitening' },
        { key: '公里桩/百米桩刷漆/个', name: 'pileWhitening' },
        { key: '维修护栏/米', name: 'guardrailMaintenance' },
        { key: '修复端头/块', name: 'endHeadRepair' },
        { key: '其他', name: 'otherDescription' },
    ];
    const mantenancePic = [
        { key: '养护前图片', name: 'conserveBeforePic' },
        { key: '养护中图片', name: 'conserveUnderwayPic' },
        { key: '养护后图片', name: 'conserveAfterPic' },
    ];
    const renderContent = (data) => {
        if (data) {
            console.log('data1111', data)
            if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) {
                return <div className='maintenanceNew'>
                    <Descriptions title="基础信息" bordered style={{ marginBottom: 20 }}>
                        <Descriptions.Item label="道路类型">{data['codeRoad'] && data['codeRoad'].length ? data['codeRoad'][0] === 'X' ? '县道' : data['codeRoad'][0] === 'Y' ? '乡道' : '村道' : ''}</Descriptions.Item>
                        <Descriptions.item label="其他">{reportTypeText(data['projectType']) || ''}</Descriptions.item>
                        <Descriptions.item label="路线代码">{data['codeRoad'] || ''}</Descriptions.item>
                        <Descriptions.item label="路线名称">{data['code'] || ''}</Descriptions.item>
                        <Descriptions.item label="养护路段" span={2}>{data['roadSectionStart'] + '-' + data['roadSectionEnd'] || ''}</Descriptions.item>
                        <Descriptions.Item label="具体位置" span={3} >{data['address'] || ''}</Descriptions.Item>
                    </Descriptions>
                    <Descriptions title="道路信息" bordered style={{ marginBottom: 20 }}>
                        {roadInfo.map(item => (
                            <Descriptions.Item label={item.key}>
                                {data[item.name] || ''}
                            </Descriptions.Item>
                        ))}
                    </Descriptions>
                    <Descriptions title="道路信息" bordered style={{ marginBottom: 20 }}>
                        {mantenanceInfo.map(item => (
                            <Descriptions.Item label={item.key}>
                                {data[item.name] || ''}
                            </Descriptions.Item>
                        ))}
                    </Descriptions>
                    <Descriptions title="养护图片" bordered style={{ marginBottom: 20 }} >
                        {mantenancePic.map(item => (
                            <Descriptions.Item label={item.key} span={3} >
                                <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                                    {data[item.name]?.map(imgSrc => {
                                        return <div style={{ width: '50px', margin: 6, display: 'flex' }}>
                                            <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
                                        </div>
                                    }) || '暂无图片'}
                                </div>
                            </Descriptions.Item>
                        ))}
                    </Descriptions>
                    <Descriptions title="养护视频" bordered style={{ marginBottom: 20 }} >
                        <Descriptions.Item label={'养护视频'} span={3}>
                            <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                                {data['videoUrl']?.map(videoSrc => {
                                    return <div style={{ width: '44%', margin: 6, display: 'flex' }}>
                                        <video src={qndmn + '/' + videoSrc} width={'100%'} style={{ marginBottom: 4 }} controls />
                                    </div>
                                }) || '暂无视频'}
                            </div>
                        </Descriptions.Item>
                    </Descriptions>
                </div>
                // if (data) {
                //     if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) {
                //         return keyList.map(obj => {
                //             return <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}>
                //                 <span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span>
                //                 {
                //                     obj.name != 'conserveBeforePic' && obj.name != 'conserveAfterPic' && obj.name != 'roadSectionStart' && obj.name != 'videoUrl' && obj.name.indexOf('conserve') == -1 ?
                //                         <Input
                //                             style={{ width: '60%' }}
                //                             value={
                //                                 obj.name == 'id' ?
                //                                     moment(data.time).format("YYYYMMDD") * 10000 + data.id
                //                                     :
                //                                     obj.name == 'projectType' ?
                //                                         reportTypeText(data[obj.name])
                //                                         : obj.name == 'reportType' && data['codeRoad'] ? data['codeRoad'][0] === 'X' ? '县道'
                //                                             : data['codeRoad'][0] === 'Y' ? '乡道' : '村道' :
                //                                             data[obj.name]
                //                             }
                //                             disabled
                //                         />
                //                         : obj.name != 'roadSectionStart' && obj.name != 'videoUrl' ?
                //                             <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                //                                 {
                //                                     data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => {
                //                                         return <div style={{ width: '44%', margin: 6 }}>
                //                                             <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
                //                                         </div>
                //                                     }) : '暂无图片'
                //                                 }
                //                             </div> : obj.name != 'videoUrl' ? <div style={{ width: '60%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                //                                 <Input style={{ width: '100%' }} disabled value={data[obj.name] + '-' + data['roadSectionEnd']} />

                //                             </div> : <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                //                                 {
                //                                     data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(videoUrl => {
                //                                         return <div style={{ width: '44%', margin: 6 }}>
                //                                             <video width={'100%'} style={{ marginBottom: 4 }} >
                //                                                 <source src={qndmn + '/' + videoUrl} type="video/mp4" controls />
                //                                             </video>
                //                                         </div>
                //                                     }) : '暂无视频'
                //                                 }
                //                             </div>
                //                 }

                //             </div>
                //         })

                //     } else {
                //         return keyListOld.map(obj => {
                //             return <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}>
                //                 <span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span>
                //                 {
                //                     obj.name != 'scenePic' && obj.name.indexOf('conserve') == -1 ?
                //                         <Input
                //                             style={{ width: '70%' }}
                //                             value={
                //                                 obj.name == 'id' ?
                //                                     moment(data.time).format("YYYYMMDD") * 10000 + data.id
                //                                     :
                //                                     obj.name == 'projectType' ?
                //                                         reportTypeText(data[obj.name]) :
                //                                         data[obj.name]
                //                             }
                //                             disabled
                //                         />
                //                         :
                //                         <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                //                             {
                //                                 data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => {
                //                                     return <div style={{ width: '44%', margin: 6 }}>
                //                                         <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
                //                                     </div>
                //                                 }) : '暂无图片'
                //                             }
                //                         </div>

                //                 }
                //             </div>
                //         })

                //     }

            } else {
                return <div className='maintenanceNew'>
                    <Descriptions title="养护信息" bordered style={{ marginBottom: 20 }} column={3}>
                        <Descriptions.Item label="道路类型">{data['codeRoad'] && data['codeRoad'].length ? data['codeRoad'][0] === 'X' ? '县道' : data['codeRoad'][0] === 'Y' ? '乡道' : '村道' : ''}</Descriptions.Item>
                        <Descriptions.item label="养护路段" >{data['roadSectionStart'] && data['roadSectionEnd'] ? (data['roadSectionStart'] + '-' + data['roadSectionEnd']) : ''}</Descriptions.item>
                        <Descriptions.item label="路线代码">{data['codeRoad'] || ''}</Descriptions.item>
                        {/* <Descriptions.item label="路线名称">{data['code'] || ''}</Descriptions.item> */}
                        <Descriptions.Item label="具体位置" span={3} >{data['address'] || ''}</Descriptions.Item>
                        <Descriptions.Item label="养护内容" span={3} >{data['content'] || ''}</Descriptions.Item>
                    </Descriptions>
                    <Descriptions title="养护图片" bordered style={{ marginBottom: 20 }} >
                        {mantenancePic.map(item => (
                            <Descriptions.Item label={item.key} className="custom-item" span={3}>
                                <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                                    {data[item.name]?.map(imgSrc => {
                                        return <div style={{ width: '50px', margin: 6, display: 'flex' }}>
                                            <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
                                        </div>
                                    }) || '暂无图片'}
                                </div>
                            </Descriptions.Item>
                        ))}
                    </Descriptions>
                    <Descriptions title="养护视频" bordered style={{ marginBottom: 20 }} >
                        <Descriptions.Item label={'养护视频'} className="custom-item" >
                            <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                                {data['videoUrl']?.map(videoSrc => {
                                    return <div style={{ width: '44%', margin: 6, display: 'flex' }}>
                                        <video src={qndmn + '/' + videoSrc} width={'100%'} style={{ marginBottom: 4 }} controls />
                                    </div>
                                }) || '暂无视频'}
                            </div>
                        </Descriptions.Item>
                    </Descriptions>
                </div>
            }
        } else {
            return '暂无数据'
        }
    }
    // const renderContent = (data) => {
    //     if (data) {
    //         if (data['inspectionNoException']) {
    //             // 当'无异常'字段为true时，显示'无异常'和其他非异常相关字段
    //             return keyList.map(obj => {
    //                 if (obj.name === 'inspectionNoException' || obj.name === 'reportType' || obj.name === 'projectType' || obj.name === 'road' || obj.name === 'roadSectionStart' || obj.name === 'address' || obj.name === 'codeRoad' || obj.name === 'scenePic' || obj.name === 'videoUrl') {
    //                     return (
    //                         <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}>
    //                             <span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span>
    //                             {
    //                                 obj.name === 'scenePic' && data[obj.name] instanceof Array ?
    //                                     <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
    //                                         {
    //                                             data[obj.name].map(imgSrc => {
    //                                                 return <div style={{ width: '44%', margin: 6 }}>
    //                                                     <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
    //                                                 </div>
    //                                             })
    //                                         }
    //                                     </div>
    //                                     : obj.name === 'roadSectionStart' ?
    //                                         <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
    //                                             <Input style={{ width: '100%' }} disabled value={data[obj.name] + '-' + data['roadSectionEnd']} />
    //                                         </div>
    //                                         :
    //                                         <Input
    //                                             style={{ width: '70%' }}
    //                                             value={
    //                                                 obj.name === 'inspectionNoException' ?
    //                                                     '无异常'
    //                                                     :
    //                                                     obj.name === 'id'
    //                                                         ? moment(data.time).format("YYYYMMDD") * 10000 + data.id
    //                                                         : obj.name === 'projectType' || obj.name === 'reportType'
    //                                                             ? reportTypeText(data[obj.name])
    //                                                             : data[obj.name]
    //                                             }
    //                                             disabled
    //                                         />
    //                             }
    //                         </div>
    //                     );
    //                 } else {
    //                     return null; // 不渲染异常相关字段
    //                 }
    //             });
    //         } else {
    //             // 当'无异常'字段为false或未定义时，显示其他异常相关字段
    //             return keyList.map(obj => {
    //                 if (obj.name !== 'inspectionNoException') {
    //                     return (
    //                         <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}>
    //                             <span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span>
    //                             {
    //                                 obj.name !== 'scenePic' && obj.name !== 'roadSectionStart' && obj.name.indexOf('conserve') === -1 ?
    //                                     <Input
    //                                         style={{ width: '70%' }}
    //                                         value={
    //                                             obj.name === 'id'
    //                                                 ? moment(data.time).format("YYYYMMDD") * 10000 + data.id
    //                                                 : obj.name === 'projectType' || obj.name === 'reportType'
    //                                                     ? reportTypeText(data[obj.name])
    //                                                     : data[obj.name]
    //                                         }
    //                                         disabled
    //                                     />
    //                                     : obj.name !== 'roadSectionStart' ?
    //                                         <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
    //                                             {
    //                                                 data[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => {
    //                                                     return <div style={{ width: '44%', margin: 6 }}>
    //                                                         <Image src={qndmn + '/' + imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
    //                                                     </div>
    //                                                 }) : '暂无图片'
    //                                             }
    //                                         </div>
    //                                         : <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
    //                                             <Input style={{ width: '100%' }} disabled value={data[obj.name] + '-' + data['roadSectionEnd']} />
    //                                         </div>
    //                             }
    //                         </div>
    //                     );
    //                 } else {
    //                     return null; // 不渲染其他异常字段
    //                 }
    //             });
    //         }
    //     } else {
    //         return '暂无数据';
    //     }
    // }
    return (
        <Modal
            width={'60%'}
            visible={visible}
            footer={null}
            onCancel={handleClose}
            title={'养护管理详情'}
        >
            <Spin spinning={loading}>
                {renderContent(data)}
            </Spin>
        </Modal>
    )
}
const MaintenanceSpotCheck = (props) => {
    const { dispatch, user, loading, reportDetail, reportDetailLoading } = props
    const [data, setData] = useState()//外层表格的数据
    const [vis, setVis] = useState(false)//模态框的显示与隐藏变量
    const [count, setCount] = useState(0)
    const [depId, setDepId] = useState(0)
    const [depName, setDepName] = useState('')
    const [total, setTotal] = useState(0)
    const [previewId, setPreviewId] = useState(0)
    const [reportData, setReportData] = useState([])
    const [detailVisible, setDetailVisible] = useState(false)
    const [dateRange, setDateRange] = useState(['1970-1-1', '2099-12-31']);
    const { RangePicker } = DatePicker
    const [expandedRowKeys, setExpandedRowKeys] = useState([]);

    //console.log('reportData', reportData)
    const checkDetail = (record) => {
        dispatch(getReportDetail(record?.id))
    }
    const handleOpen = () => {
        setDetailVisible(true)
    }
    const handleClose = () => {
        setDetailVisible(false)
    }

    //里层列名
    const columns = [
        {
            title: '抽查日期',
            key: 'spotDate',
            dataIndex: 'spotDate',
            align: 'center',
            // render: (_, record) => {
            //     return 
            // }
        },
        {
            title: '抽查乡镇',
            key: 'projectType',
            dataIndex: 'depName',
            align: 'center',

        },
        {
            title: '抽查数量',
            key: 'count',
            dataIndex: 'count',
            align: 'center',

        },
        {
            title: '抽查总数',
            key: 'reportCount',
            dataIndex: 'reportCount',
            align: 'center',

        },

    ]
    const queryData = (query = { startTime: '1970-1-1', endTime: '2099-12-31' }) => {
        dispatch(getSpotCheckDetail(query)).then(res => {
            if (res.success) {
                const data = res?.payload.data?.map(item => {
                    return {
                        spotDate: moment(item.date).format('YYYY-MM-DD'),
                        depName: item.department?.name,
                        reportCount: item.reportCount,
                        count: Math.ceil((item.reportCount * item.percentage) / 100),
                        reportDetail: item.reportSpotChecks?.map(child => {
                            return child.report
                        }),
                        id: item.id
                    }
                })
                //console.log('data1', data)
                setReportData(data)
            }
        })
    }

    useEffect(() => {
        queryData()
    }, [])
    const [form] = Form.useForm()
    const addHanler = () => {
        setVis(true)
    }
    const extractHandler = () => {
        form.validateFields(['percentValue']).then(async (values) => {
            if (Number(values.percentValue) > 0) {
                const res = await dispatch(getReportSpotPrepare({ percentage: Number(values.percentValue) }))
                // setCount(res?.payload.data?.reportCount)
                // setDepId(res?.payload.data?.lukyDepartment?.id)
                // setDepName(res?.payload.data?.lukyDepartment?.name)
                setPreviewId(res?.payload.data?.previewId)
                // setTotal(Math.ceil((res?.payload.data?.reportCount) * (Number(values.percentValue) / 100)))

                form.setFieldsValue({
                    'result': res?.payload.data?.reportCount,
                    'village': res?.payload.data?.lukyDepartment?.name,
                    'total': Math.ceil((res?.payload.data?.reportCount) * (Number(values.percentValue) / 100))
                })
            }
        })
    }
    const cancelHandler = () => {
        setVis(false)
        form.resetFields()
    }
    const okHandler = async () => {
        if (previewId !== 0) {
            const res = await dispatch(getSpotCheck({ previewId }))
            const rslt = res.payload.data.map(item => {
                return {
                    spotDate: moment(item.date).format('YYYY-MM-DD'),
                    depName: item.department?.name,
                    reportCount: item.reportCount,
                    count: Math.ceil((item.reportCount * item.percentage) / 100),
                    reportDetail: item.reportSpotChecks?.map(child => {
                        return child.report
                    }),
                    id: item.id
                }
            }) || []
            setReportData(rslt)
            form.resetFields()
            setVis(false)
        }
    }
    //console.log('setReportData', reportData)

    const lookhandler = () => {
        if ((dateRange && dateRange instanceof Array && dateRange[0] != '')) {
            queryData({ startTime: moment(dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'), endTime: moment(dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss') })
        }
    }

    return (
        <div>
            <Button onClick={addHanler} type='primary' style={{ marginRight: '50px' }}> 新增 </Button>
            <RangePicker onChange={(date, dateString) => { setDateRange(dateString) }} style={{ marginRight: '50px' }} />
            <Button onClick={lookhandler} > 查询 </Button>
            <Divider />
            <ProTable
                columns={columns}
                dataSource={reportData}
                loading={loading}
                expandable={{
                    //expandedRowKeys, // 控制哪些行展开，这里需要通过 state 管理
                    defaultExpandedRowKeys: ['0'],
                    // onExpand: handleExpand,
                    expandedRowRender: (record) => (
                        < Table
                            pagination={false}
                            dataSource={record?.reportDetail}
                            columns={
                                [
                                    { title: '所属道路', dataIndex: 'road' },
                                    {
                                        title: '所在路段',
                                        key: 'address',
                                        dataIndex: 'address',
                                        align: 'center',
                                        render: (_, r) => {
                                            return `${r?.roadSectionStart || ''}-${r?.roadSectionEnd || ''}`
                                        }
                                    },
                                    { title: '具体位置', dataIndex: 'address' },
                                    {
                                        title: '上报人',
                                        width: 100,
                                        key: 'userName',
                                        dataIndex: 'userName',
                                        align: 'center',
                                        render: (text, r) => {
                                            return r?.user?.name || ''
                                        }
                                    },
                                    {
                                        title: '上报时间',
                                        key: 'time',
                                        dataIndex: 'time',
                                        valueType: 'dateTime',
                                        align: 'center',
                                        render: (_, r) => {
                                            return moment(r?.time).format('YYYY-MM-DD HH:mm:ss')
                                        }
                                    },
                                    {
                                        title: '操作',
                                        key: 'caozuo',
                                        align: 'center',
                                        render: (_, r) => {
                                            return <Button
                                                onClick={() => { checkDetail(r); handleOpen() }}
                                                style={{ marginRight: 10 }}>查看</Button>
                                        }
                                    }
                                    // { title: '', dataIndex: 'subColumn1' },
                                    // { title: '', dataIndex: 'subColumn2' },
                                    // ... 其他子表格列配置
                                ]}
                        />
                    ),
                }}
                pagination={{
                    pageSize: 10,
                    defaultPageSize: 10,
                    showSizeChanger: false,
                }}
                rowKey={(record) => { return record.id }}
                toolBarRender={false}
                search={false}
            />
            <Modal visible={vis} onCancel={cancelHandler} title='养护抽查' onOk={okHandler}>
                <Form form={form}>
                    <Form.Item
                        label="抽取比例(%)"
                        // name="percent"
                        rules={[{ required: true, message: '请填写抽取比例' }]}
                    >
                        <Input.Group compact>
                            <Form.Item
                                name="percentValue"
                                noStyle
                                rules={[
                                    { required: true, message: '请填写抽取比例' },
                                    {
                                        pattern: /^(100|\d{1,2})(\.\d{1,2})?$/,
                                        message: '请输入有效的比例',
                                    },
                                ]}
                            >
                                <Input style={{ width: '80%' }} placeholder="请输入抽取比例" />
                            </Form.Item>
                            {/* <Form.Item
                                // name="percentSign"
                                noStyle
                                style={{ width: '20%', textAlign: 'center' }}
                            >
                                %
                            </Form.Item> */}
                        </Input.Group>
                    </Form.Item>
                    <Form.Item className="ant-row" >

                        <Button style={{ marginLeft: '200%' }} type='primary' onClick={extractHandler}>开始抽取</Button>
                    </Form.Item>
                    <Form.Item label='抽查总数' name='result'>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item label='抽查乡镇' name='village'>
                        <Input disabled />
                    </Form.Item>
                    <Form.Item label='抽查条数' name='total'>
                        <Input disabled />
                    </Form.Item>
                </Form>
            </Modal>
            <DetailForm visible={detailVisible}
                handleClose={handleClose}
                data={reportDetail}
                loading={reportDetailLoading} />
        </div>
    )
}
function mapStateToProps(state) {
    const { auth, spotCheckDetail, reportDetail } = state
    //('state1', state)
    return {
        user: auth.user,
        loading: spotCheckDetail?.isRequesting,
        reportDetailLoading: reportDetail.isRequesting,
        reportDetail: reportDetail.data,

    }
}
export default connect(mapStateToProps)(MaintenanceSpotCheck);