PMS_Frontend_v1.0.0/src/pages/OperationCenter/CustomerServieMgm/CallbackSuggestion/loadable.jsx

import React, { useState, useRef, useEffect } from "react";
import { ResultFlowResult, QuickMenu } from "@/components"
import { Select, Button, Table, message, Pagination, Input, Modal, Image, DatePicker, Space, Upload } from 'antd'
import {
    pageSizeOptions
} from '@/config/character.config.js'
import "./index.scss";
import { SearchOutlined, DeleteOutlined, PlusOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
import ajax from '@/services'
import moment from 'moment'
import copy from 'copy-to-clipboard';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
function CallbackSuggestion(props) {
    const [ajaxLoading, setAjaxLoading] = useState(false)
    const [resultData, setResultData] = useState({
        data: [],
        total_records: 0,
        export_url: '',
        process_url: ""
    })
    const parameter = {
        carAppealId: '', //意见ID
        mobile: '',//手机号
        content: '',//标题
        adviseType: 0,//意见类型
        operateType: 0,//意见状态
        start_time: moment().subtract(30, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        end_time: moment().format('YYYY-MM-DD 23:59:59'),
        pn: 1,
        page_size: Number(pageSizeOptions[0]),  // 每页条数
    }
    const [formData, setFormData] = useState(parameter)
    const [lastFormData, setLastFormData] = useState(formData)
    const lastFormDataRef = useRef(formData)
    const [imgVisible, setImgVisible] = useState(false)
    const [orderVisible, setOrderVisible] = useState(false)
    const [evidenceVisible, setEvidenceVisible] = useState(false)

    //物品型号
    const handleAdviseType = (value) => {
        setFormData({ ...formData, adviseType: value })
    }
    //申诉ID
    const handleCarAppealId = (v) => {
        setFormData({ ...formData, carAppealId: v.target.value })
    }
    //手机号
    const handleMobile = (v) => {
        setFormData({ ...formData, mobile: v.target.value })
    }
    //车牌号
    const handleContent = (v) => {
        setFormData({ ...formData, content: v.target.value })
    }
    const onChange = (value, dateString) => {
        setFormData({
            ...formData,
            start_time: dateString[0],
            end_time: dateString[1]
        })
    };
    //审核状态
    const handleStatus = (value) => {
        setFormData({ ...formData, operateType: value })
    }
    const addChild = (child, res) => {
        if (child.children) {
            child.children.forEach((item) => {
                addChild(item, res);
            });
        } else {
            res.push(child.id);
        }
    };
    //列表
    const handleColumns = (tab) => {
        let result = [...deployListColumns];
        switch (tab) {
            case '1':
                result.splice(5, 1)
                break;

        }
        return result;
    }
    const handleDealData = (tab) => {
        let result = [...dealListColumns];
        switch (tab) {
            case '1':
                result.splice(5, 1)
                break;

        }
        return result;
    }
    const [rotate, setRotate] = useState(false)
    const dealListColumns = [
        {
            title: '停车订单ID',
            dataIndex: 'parkRecordId',
            key: 'parkRecordId',
            render: (text, record) => {
                return <>
                    <div>
                        <span className="iconLined" onClick={handleTrans}>{rotate === false ? <DownOutlined /> : <UpOutlined />} </span>
                        <a onClick={() => { navigator.clipboard.writeText(`${record.park_id}`).then(() => { message.success("已复制到剪切板") }); }}>{record.park_id}</a>
                    </div>
                </>
            }
        },
        {
            title: '车牌号',
            dataIndex: 'plateNumber',
            key: 'plateNumber',
        },
        {
            title: '停车场名称',
            dataIndex: 'parkName',
            key: 'parkName',
        },
        {
            title: '入场时间',
            dataIndex: 'strEntryTime',
            key: 'strEntryTime',
        },
        {
            title: '出场时间',
            dataIndex: 'strExitTime',
            key: 'strExitTime',
        },
    ]
    //列表
    const deployListColumns = [
        {
            title: '意见ID',
            dataIndex: 'memberAdviseId',
            key: 'memberAdviseId',
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
            key: 'mobile',
        },
        {
            title: '标题',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '意见状态',
            dataIndex: 'adviseStatus',
            key: 'adviseStatus',
        },
        {
            title: '意见类型',
            dataIndex: 'adviseType',
            key: 'adviseType',
        },
        {
            title: '停车订单ID',
            dataIndex: 'parkRecordsId',
            key: 'parkRecordsId',
        },
        {
            title: '最后信息时间',
            dataIndex: 'updatedTime',
            key: 'updatedTime',
        },
        {
            title: '操作',
            render: (text, record) => {
                return <>
                    <a onClick={() => { CheckImg(record) }}>查看详情</a>
                </>
            }
        }]
    //图片   
    const [getImg, setGetImg] = useState({})
    const [getImgList, setGetImgList] = useState([])
    const [getId, setGetId] = useState({})
    const CheckImg = (record) => {
        setGetId(record.id)
        let data = {
            id: record.id
        }
        ajax.checkFeedData(data).then(res => {
            if (res.status === 20000) {
                setImgVisible(true)
                setGetImg(res.data)
                setGetImgList(res.data.dialogueDetail)

            } else {
                message.error(res.message)
            }
        })
    }
    const imgModal = () => {
        setImgVisible(false)
        setRepairData({
            content: '',
            image: []
        })
        setFileList([])
    }
    const cancelImg = () => {
        setImgVisible(false)
        setRepairData({
            content: '',
            image: []
        })
        setFileList([])
    }
    const getParkId = (record) => {
        if (copy(record.parkRecordId)) {
            message.success("复制成功");
        } else message.error("复制失败，请手动复制");
    }
    // 获取列表数据
    const getData = (data = formData) => {
        if (moment(data.end_time) - moment(data.start_time) > 180 * 3600 * 24000) {
            if (!(data.carAppealId || data.mobile)) {
                message.error('查询时间范围大于半年，需填写手机号或意见ID！')
                return
            }
        }
        setAjaxLoading(true)
        ajax.getFeedbackList(data).then(res => {
            setAjaxLoading(false)
            if (res.status === 20000) {
                let resDataArr = res.data.list.map((item) => {
                    item.key = item.id
                    return item
                })
                setResultData({
                    ...resultData,
                    data: resDataArr,
                    total_records: res.data.total_records
                })
            } else {
                setResultData({
                    data: [],
                    total_records: 0,
                    export_url: '',
                    process_url: ""
                })
                message.error(res.message)
            }
        }, err => {
            console.log(err)
        })
    }
    //切换分页
    const changePn = (pn, length) => {
        if (lastFormData.page_size === length) {
            setFormData(Object.assign({}, formData, { pn: pn, page_size: length }))
            setLastFormData(Object.assign({}, lastFormData, { pn: pn, page_size: length }))
            lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn, page_size: length })
            getData(Object.assign({}, formData, { pn: pn, page_size: length }))
        }
    }
    //切换每页条数
    const changeLength = (pn, length) => {
        setFormData(Object.assign({}, formData, { pn: 1, page_size: length }))
        setLastFormData(Object.assign({}, lastFormData, { pn: 1, page_size: length }))
        lastFormDataRef.current = Object.assign({}, lastFormData, { pn: 1, page_size: length })
        getData(Object.assign({}, formData, { pn: 1, page_size: length }))
    }
    //检索数据
    const getSearchData = (data = formData) => {
        // getData(data)
        setFormData({ ...formData, pn: 1 })
        getData(Object.assign({}, formData, { pn: 1 }))
    }
    //重置数据
    const getResetData = () => {
        setFormData({
            ...parameter
        })
        getData({ ...parameter, pn: 1 })
    }

    //详情回复
    const onChangeText = (value) => {
        setRepairData({ ...repairData, content: value.target.value })
    }
    const getBase64 = (file) =>
        new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = (error) => reject(error);
        });
    const [previewOpen, setPreviewOpen] = useState(false);
    const [previewImage, setPreviewImage] = useState('');
    const [previewTitle, setPreviewTitle] = useState('');
    const [repairData, setRepairData] = useState({})
    const handleCancel = () => setPreviewOpen(false);
    const [fileList, setFileList] = useState([])
    console.log(fileList);
    const imgData = () => {
        let imgUrl = []
        fileList.map(res => {
            imgUrl.push(res.response?.data)
        })
        setRepairData(
            Object.assign({}, repairData, { image: imgUrl })
        );
    }
    //撤回
    const handleReject = (res) => {
        let data = {
            dialogueId: res.dialogueId,
            id: getId
        }
        ajax.getRejectData(data).then(res => {
            if (res.status === 20000) {
                console.log(res.data);
                setGetImgList(res.data.dialogueDetail)
            } else {
                message.error(res.message)
            }
        })
    }
    // 日期转换
    const parseDate = (val, format) => {
        if (val) {
            return moment(val, format ? format : "YYYY-MM-DD HH:mm:ss");
        } else {
            return null;
        }
    };
    const handleAgain = (res) => {
        setRepairData({ content: res.replyContent })
    }
    const handleRepair = () => {
        let data = {
            ...repairData,
            id: getId
        }
        let dataId = {
            id: getId
        }
        ajax.replyData(data).then(res => {
            if (res.status === 20000) {
                ajax.checkFeedData(dataId).then(res => {
                    if (res.status === 20000) {
                        setGetImg(res.data)
                        setGetImgList(res.data.dialogueDetail)
                        setRepairData({
                            content: '',
                            image: []
                        })
                        setFileList([])
                    } else {
                        message.error(res.message)
                    }
                })
            } else {
                message.error(res.message)
            }
        })
    }
    useEffect(() => {
        imgData()
    }, [fileList])
    // 在上传前进行文件类型检查
    const beforeUpload = (file) => {
        const isValidType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
        if (!isValidType) {
            message.error(`请上传png，jpeg，jpg类型图片`);
        }
        return isValidType || Upload.LIST_IGNORE;
    };
    const handlePreview = async (file) => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        setPreviewImage(file.url || file.preview);
        setPreviewOpen(true);
        setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
    };
    const handleChange = ({ fileList: newFileList }) => setFileList(newFileList);
    const uploadButton = (
        <div>
            <PlusOutlined />
            <div
                style={{
                    marginTop: 8,
                }}
            >
                点击上传
            </div>
        </div>
    );
    const handleTrans = () => {
        if (rotate === false) {
            setRotate(true)
        }
        if (rotate === true) {
            setRotate(false)
        }
        console.log(rotate);
    }
    //去处理
    const orderModal = () => {
        setOrderVisible(false)
        setSubmitDeploy({ change_content: '', update_value: '', plate_type: '', deal_reason: '' })
        setGetAdjustTimeValue(1)
        setGetValueList({})
    }
    const [getDealData, setGetDealData] = useState({
        data: []
    })
    const [getOrderData, setGetOrderData] = useState({})
    const handleDeal = () => {
        let data = {
            id: getImg.parkRecordId
        }
        ajax.dealData(data).then(res => {
            if (res.status === 20000) {
                let resDataArr = res.data.map((item) => {
                    setGetOrderData(item)
                    item.key = item.id
                    return item
                })
                setOrderVisible(true)
                setGetDealData({
                    ...getDealData,
                    data: resDataArr
                })
            } else {
                message.error(res.message)
            }
        })
    }
    const [submitDeploy, setSubmitDeploy] = useState({
        change_content: '',
        update_value: '',
        plate_type: '',
        deal_reason: '',
        adjustTime:1
    })
    //提交审核
    const onChangeReason = (value) => {
        setSubmitDeploy({ ...submitDeploy, deal_reason: value.target.value })
    }
    const [getValueList, setGetValueList] = useState({})
    const handleChoose = (value) => {
        setGetValueList(value)
        // setSubmitDeploy({ ...submitDeploy, change_content: value })
        if (value) {
            setSubmitDeploy({
                ...submitDeploy,
                update_value: '',
                plate_type: '',
                change_content: value
            })
        }
    }
    const [getAdjustTimeValue, setGetAdjustTimeValue] = useState(1)
    const handleAdjust = (value) => {
        setGetAdjustTimeValue(value)
        submitDeploy.update_value = ''
    }
    const handleAdjustTime = (v, dateString) => {
        setSubmitDeploy({ ...submitDeploy, update_value: dateString })
    }
    const handlePlateColor = (v) => {
        setSubmitDeploy({ ...submitDeploy, plate_type: v })
    }
    const handlePlateNumber = (v) => {
        setSubmitDeploy({ ...submitDeploy, update_value: v.target.value })
    }
    const handleAdd = (v) => {
        setSubmitDeploy({ ...submitDeploy, add: v })
    }
    const handleAddCount = (v) => {
        setSubmitDeploy({ ...submitDeploy, update_value: v.target.value })
    }
    const handleComeTime = (v) => {
        setSubmitDeploy({ ...submitDeploy, update_value: v.target.value })
    }
    const cancelBtn = () => {
        setOrderVisible(false)
        setSubmitDeploy({ change_content: '', update_value: '', plate_type: '', deal_reason: '' })
        setGetAdjustTimeValue(1)
        setGetValueList({})
    }
    const submitBtn = () => {
        let data = {
            ...submitDeploy,
            id: [getImg.parkRecordId],
            examine_reason_id: submitDeploy.change_content,
            examine_reason: submitDeploy.deal_reason
        }
        if (submitDeploy.deal_reason === '') {
            message.error('请输入处理理由')
        } else if (submitDeploy.change_content === '') {
            message.error('请选择对应的更改项')
        }else if (submitDeploy.update_value === '') {
            message.error('请输入对应的更改项')
        }else {
            ajax.submitData(data).then(res => {
                if (res.status === 20000) {
                    setOrderVisible(false)
                    setImgVisible(false)
                    setSubmitDeploy({ change_content: '', update_value: '', plate_type: '', deal_reason: '' })
                    setGetAdjustTimeValue(1)
                    setGetValueList({})
                } else {
                    message.error(res.message)
                }
            })
        }

    }
    const exportData = () => {
        let data = {
            ...formData
        }
        ajax.exportDataList(data).then(res => {
            window.open(res.data.export_url)
        })
    }
    const checkPic = () => {
        setEvidenceVisible(true)
    }
    const evidenceModal = () => {
        setEvidenceVisible(false)
    }
    const closePic = () => {
        setEvidenceVisible(false)
    }
    useEffect(() => {
        getData()
    }, [])
    return <>
        <div className="paid-CallbackSuggestion">
            <div className="paid-search">
                <label className="search">查询条件</label>
                <div className="yisa-search">
                    <label>意见ID</label>
                    <Input
                        placeholder="请输入准确信息"
                        value={formData.carAppealId}
                        style={{ width: 270, marginLeft: 14 }}
                        onChange={handleCarAppealId}
                    />
                </div>
                <div className="yisa-search">
                    <label>手机号</label>
                    <Input
                        placeholder="请输入准确信息"
                        value={formData.mobile}
                        style={{ width: 270, marginLeft: 14 }}
                        onChange={handleMobile}
                    />
                </div>
                <div className="yisa-search">
                    <label>标题</label>
                    <Input
                        placeholder="请输入准确信息"
                        value={formData.content}
                        style={{ width: 270, marginLeft: 28 }}
                        onChange={handleContent}
                    />
                </div>
                <div className="yisa-search">
                    <label>意见状态</label>
                    <Select
                        style={{ width: 270 }}
                        placeholder="请选择"
                        value={formData.operateType}
                        options={[
                            {
                                value: 0,
                                label: '全部'
                            },
                            {
                                value: 1,
                                label: '待回复'
                            }, {
                                value: 2,
                                label: '已回复'
                            }
                        ]}
                        onChange={handleStatus}
                    />
                </div>
                <div className="yisa-search">
                    <label>意见类型</label>
                    <Select
                        style={{ width: 270 }}
                        placeholder="请选择"
                        value={formData.adviseType}
                        options={sysConfig.feedbackType}
                        onChange={handleAdviseType}
                    />
                </div>
                <div className="yisa-time">
                    <label>最后信息时间</label>
                    <Space direction="vertical" size={12}>
                        <RangePicker
                            value={[moment(formData.start_time), moment(formData.end_time)]}
                            showTime={{
                                format: 'HH:mm:ss',
                            }}
                            allowClear={false}
                            style={{ width: 344 }}
                            format="YYYY-MM-DD HH:mm:ss"
                            onChange={onChange}
                        />
                    </Space>
                    <QuickMenu
                        dropdownData={[
                            { text: '昨日', value: 1 },
                            { text: '今日', value: 0 },
                            { text: '近三日', value: 2 },
                            { text: '近一周', value: 6 },
                            { text: '近一月', value: 29 },
                            { text: '近半年', value: 180 },
                            { text: '近一年', value: 365 },
                            { text: '近两年', value: 730 },
                        ]}
                        onChange={(v) => {
                            setFormData({ ...formData, start_time: v.startDateTime, end_time: v.endDateTime })
                        }} />
                </div>
                <div className="timePicker ">
                    <div className="btnBox">
                         <Button className="yisa-btn colorReset reset" onClick={() => { getResetData() }}>
                            重置
                        </Button>
                        <Button type="primary" className="yisa-btn colorBtn submit" onClick={() => { getSearchData() }}>
                            查询
                        </Button>
                        
                        
                    </div>
                </div>
            </div>
            <div className="paid-result">
                <div className="result">
                    <div className="result-info-row">
                        <span className="font">共检索到<em>{resultData.total_records}</em>条结果</span>
                        <Button type="primary" className="yisa-btn colorBtn" onClick={() => { exportData() }}>
                            导出
                        </Button>
                    </div>
                    <ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}>
                        <Table
                            bordered
                            // className='yisa-table'
                            dataSource={resultData.data}
                            columns={
                                handleColumns()
                            }
                            pagination={false}
                            loading={ajaxLoading}
                        />
                        <Pagination
                            className="pagination-common"
                            showSizeChanger
                            showQuickJumper
                            showTotal={() => `共 ${resultData.total_records} 条`}
                            total={resultData.total_records}
                            current={formData.pn}
                            pageSize={formData.page_size}
                            pageSizeOptions={pageSizeOptions}
                            onChange={changePn}
                            onShowSizeChange={changeLength}
                        />
                    </ResultFlowResult>
                </div>
            </div>

        </div>
        <Modal
            visible={imgVisible}
            onCancel={imgModal}
            footer={null}
            className="checkMsg"
            title='查看详情'
        >
            <div className="car-error">
                <div className="car-msg">
                    <div className="plate">
                        意见ID：<span className="font">{getImg.memberAdviseId}</span>
                    </div>
                    <div className="plate">
                        停车订单ID：<span className="font">{getImg.parkRecordId}</span>
                    </div>
                    <div className="plate">
                        出场时间：<span className="font">{getImg.strExitTime}</span>
                    </div>
                </div>
                <div className="car-msg">
                    <div className="plate">
                        手机号：<span className="font">{getImg.memberName}</span>
                    </div>
                    <div className="plate">
                        车牌号：<span className="font">{getImg.plateNumber}</span>
                    </div>
                </div>
                <div className="car-msg">
                    <div className="plate">
                        类型：<span className="font">{getImg.adviseType}</span>
                    </div>
                    <div className="plate">
                        停车场名称：<span className="font">{getImg.parkName}</span>
                    </div>
                </div>
                <div className="car-msg">
                    <div className="plate">
                        状态：<span className="font">{getImg.adviseStatus}</span>
                    </div>
                    <div className="plate">
                        入场时间：<span className="font">{getImg.strEntryTime}</span>
                    </div>
                </div>
            </div>
            <div className="deal"><button onClick={handleDeal}>去处理</button></div>
            <div className="id-msg">
                <div className="feedback">
                    <div className="title"><span>意见反馈</span></div>
                    <div className="message">
                        {
                            getImgList.map((res, index) => {
                                console.log(res);
                                return (
                                    <div className="content">
                                        {res.type == '1' ?
                                            <div className="feedbackMsg">
                                                <div className="margin-msg">
                                                    <div className="time">{res.adviseTime}</div>
                                                    <div className="concent">意见内容：<span>{res.content}</span></div>
                                                    <div className="picFlex">
                                                        <div className="pic">
                                                            {res.answerImgMap.length ?
                                                                res.answerImgMap.map(res => {
                                                                    return (

                                                                        <Image src={res} />
                                                                    )
                                                                }) : ''
                                                            }
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            :
                                            <div className="reject">
                                                {
                                                    res.status == 0 ? <div className="content">
                                                        <div className="reply">
                                                            <div className="margin-msg">
                                                                <div className="time">{res.replyTime}</div>
                                                                <div className="concent">{res.sysUserName}回复：<span>{res.replyContent}</span>
                                                                </div>
                                                                <div className="picFlex">
                                                                    {res.answerImgMap.length ?
                                                                        res.answerImgMap.map(res => {
                                                                            return (
                                                                                <div className="pic"><Image src={res} /></div>
                                                                            )
                                                                        })
                                                                        : ''
                                                                    }
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className="rejectContent" onClick={() => { handleReject(res) }}>撤回</div>
                                                    </div>
                                                        :
                                                        <div className="reapir">你撤回了一条消息
                                                            <span className="again" onClick={() => { handleAgain(res) }}>重新编辑</span>
                                                        </div>
                                                }

                                            </div>

                                        }

                                    </div>
                                )
                            })
                        }
                        <TextArea showCount maxLength={200} value={repairData.content} className="text" onChange={onChangeText} />
                        <div className="uploadBtn">
                            <div className="upload">
                                <Upload
                                    action="/PMS/api/com/common/file_upload"
                                    listType="picture-card"
                                    fileList={fileList}
                                    // accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                    onPreview={handlePreview}
                                    beforeUpload={beforeUpload}
                                    onChange={handleChange}
                                >
                                    {fileList.length >= 8 ? null : uploadButton}
                                </Upload>
                                <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
                                    <img
                                        alt="example"
                                        style={{
                                            width: '100%',
                                        }}
                                        src={previewImage}
                                    />
                                </Modal>
                            </div>
                            <div className="repairBtn">
                                <button onClick={handleRepair}>回复</button>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <div className="btn"><button className="passBtn" onClick={cancelImg}>返回</button></div>
        </Modal>
        <Modal
            visible={orderVisible}
            onCancel={orderModal}
            footer={null}
            className="checkOrder"
            title='异常订单处理记录审核'
        >
            <div className="error-order">
                <div className="carTitle">
                    <span className="font">停车订单列表</span>
                </div>
                <Table
                    bordered
                    // className='yisa-table'
                    dataSource={getDealData.data}
                    columns={
                        handleDealData()
                    }
                    pagination={false}
                    loading={ajaxLoading}
                />
                {
                    rotate === false ? <div className="order-detail">
                        <div className="park-detail">
                            <div className="title">车场详情</div>
                            <div className="park-area">
                                <div className="car-msg">
                                    <div className="plate">
                                        停车车名称：<span className="font">{getOrderData.parkName}</span>
                                    </div>
                                    <div className="plate">
                                        商户名称：<span className="font">{getOrderData.operationName}</span>
                                    </div>
                                    <div className="plate">
                                        车场类型:：<span className="font">{getOrderData.parkTypeName}</span>
                                    </div>
                                </div>
                                <div className="car-msg">
                                    <div className="plate">
                                        区域：<span className="font">{getOrderData.areaName}</span>
                                    </div>
                                    <div className="plate">
                                        泊位号：<span className="font">{getOrderData.berthCode}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="park-detail">
                            <div className="title">车场详情</div>
                            <div className="park-area">
                                <div className="car-msg">
                                    <div className="plate">
                                        车牌号：<span className="font">{getOrderData.plateNumber}</span>
                                    </div>
                                    <div className="plate">
                                        入场时间：<span className="font">{getOrderData.strEntryTime}</span>
                                    </div>
                                    <div className="plate">
                                        入场记录来源:：<span className="font">{getOrderData.entryDataSourceName}</span>
                                    </div>
                                    <div className="plate">
                                        出入场图像:：<span className="font"><a onClick={checkPic}>查看</a></span>
                                    </div>
                                </div>
                                <div className="car-msg">
                                    <div className="plate">
                                        停车时长：<span className="font">{getOrderData.parkTime}</span>
                                    </div>
                                    <div className="plate">
                                        出场时间：<span className="font">{getOrderData.strExitTime}</span>
                                    </div>
                                    <div className="plate">
                                        出场记录来源：<span className="font">{getOrderData.exitDataSourceName}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="park-detail">
                            <div className="title">车辆详情</div>
                            <div className="park-area">
                                <div className="car-msg">
                                    <div className="plate">
                                        应收金额：<span className="font">{getOrderData.shouldPayMoney}</span>
                                    </div>
                                    <div className="plate">
                                        优惠券：<span className="font">{getOrderData.coupon}</span>
                                    </div>
                                </div>
                                <div className="car-msg">
                                    <div className="plate">
                                        优惠总计：<span className="font">{getOrderData.totalCoupon}</span>
                                    </div>
                                    <div className="plate">
                                        实付总计：<span className="font">{getOrderData.totalPreMoney}</span>
                                    </div>
                                    <div className="plate">
                                        欠费总计：<span className="font">{getOrderData.sumActualPay}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> : ''
                }
                <div className="carTitle">
                    <span className="font">异常停车处理信息</span>
                </div>
                <div className="deal-reason">
                    <div className="logpTip">
                        <div className="redLogo">*</div>
                        <div className="title">处理理由</div>
                    </div>
                    <TextArea showCount maxLength={30} value={submitDeploy.deal_reason} className="text" onChange={onChangeReason} />
                </div>
                <div className="deal-style">
                    <div className="title">处理方式</div>
                    <div className="yisa-search">
                        <div className="redLogo">*</div>
                        <label style={{width:56}}> 更改项</label>
                        <Select
                            style={{ width: 200 }}
                            placeholder="请选择"
                            placement='topRight'
                            value={submitDeploy.change_content}
                            options={[
                                {
                                    value: 1,
                                    label: '调整出场时间'
                                },
                                {
                                    value: 2,
                                    label: '变更车牌号'
                                },
                                {
                                    value: 3,
                                    label: '变更订单金额'
                                },
                                {
                                    value: 4,
                                    label: '免费该订单'
                                },
                                // {
                                //     value: 5,
                                //     label: '作废该订单'
                                // }
                            ]}
                            onChange={handleChoose}
                        />
                        {getValueList === 1 ?
                            <>
                                <label  style={{width:76,marginLeft: 30 }}>调整基于：</label>
                                <Select
                                    style={{ width: 200 }}
                                    placeholder="请选择"
                                    placement='topRight'
                                    value={submitDeploy.adjustTime}
                                    options={[
                                        {
                                            value: 1,
                                            label: '具体时间日期'
                                        },
                                        {
                                            value: 2,
                                            label: '记录入场时间'
                                        }
                                    ]}
                                    onChange={handleAdjust}
                                />
                                <div className="redLogo" style={{ marginLeft: 30 }}>*</div>
                                <label  style={{width:60}}>调整为：</label>
                                {
                                    getAdjustTimeValue === 1 ?
                                        <DatePicker
                                            format="YYYY-MM-DD HH:mm:ss"
                                            placement='topRight'
                                            value={parseDate(submitDeploy?.update_value, 'YYYY-MM-DD HH:mm:ss')}
                                            style={{ width: 300 }}
                                            showTime
                                            onChange={handleAdjustTime}
                                        /> : ''
                                }
                                {
                                    getAdjustTimeValue === 2 ?
                                        <div className="comeTime" style={{ display: "contents" }}>
                                            <label>入场时间+</label>
                                            <Input
                                                placeholder="请输入数字"
                                                value={submitDeploy.update_value}
                                                style={{ width: 150 }}
                                                onChange={handleComeTime}
                                            />
                                            <label>秒</label>
                                        </div> : ''
                                }
                            </> : ''
                        }
                        {
                            getValueList === 2 ?
                                <>
                                    <div className="redLogo" style={{ marginLeft: 30 }}>*</div>
                                    <label >车牌号:</label>
                                    <Select
                                        style={{ width: 100 }}
                                        placeholder="请选择"
                                        placement='topRight'
                                        value={submitDeploy.plate_type}
                                        options={sysConfig.plateColor}
                                        onChange={handlePlateColor}
                                    />
                                    <Input
                                        placeholder="请输入内容"
                                        value={submitDeploy.update_value}
                                        style={{ width: 150 }}
                                        onChange={handlePlateNumber}
                                    />
                                </> : ''
                        }
                        {
                            getValueList === 3 ? <>
                                <div className="redLogo" style={{ marginLeft: 30 }}>*</div>
                                <label >增/减:</label>
                                <Select
                                    style={{ width: 100 }}
                                    placeholder="请选择"
                                    value={1}
                                    disabled={true}
                                    options={[
                                        {
                                            value: 1,
                                            label: '减'
                                        },
                                        {
                                            value: 2,
                                            label: '增'
                                        }
                                    ]}
                                    onChange={handleAdd}
                                />
                                <div className="redLogo" style={{ marginLeft: 30 }}>*</div>
                                <label>金额-</label>
                                <Input
                                    placeholder="请输入内容"
                                    value={submitDeploy.update_value}
                                    style={{ width: 150 }}
                                    onChange={handleAddCount}
                                />
                            </> : ''
                        }

                    </div>
                </div>
                <div className="deal-btn">
                    <button className="submit" onClick={submitBtn}>提交审核</button>
                    <button className="cancel" onClick={cancelBtn}>关闭窗口</button>
                </div>
            </div>
        </Modal>
        <Modal
            visible={evidenceVisible}
            onCancel={evidenceModal}
            footer={null}
            className="checkevidence"
            title='证据图像查看'
        >
            <div className="admissionPic">
                <div className="pic">
                    <div className="carTitle">
                        <span className="font">入场图像</span>
                    </div>
                    <div className="car-plate">
                        <div className="carPic">
                            <div className="name">车辆照片</div>
                            <div className="pic">
                                {
                                    getOrderData.admissionPic === '' ? <div className="nodate">暂无数据</div> : <Image src={getOrderData.admissionPic} />
                                }

                            </div>
                        </div>
                        <div className="plate">
                            <div className="name">车牌照片</div>
                            <div className="pic">
                                {
                                    getOrderData.admissionPicPlate === '' ? <div className="nodate">暂无数据</div> : <Image src={getOrderData.admissionPicPlate} />
                                }

                            </div>
                        </div>
                    </div>
                </div>
                <div className="exitPic">
                    <div className="carTitle">
                        <span className="font">出场图像</span>
                    </div>
                    <div className="car-plate">
                        <div className="carPic">
                            <div className="name">车辆照片</div>
                            <div className="pic">
                                {
                                    getOrderData.exitionPic === '' ? <div className="nodate">暂无数据</div> : <Image src={getOrderData.exitionPic} />
                                }
                            </div>
                        </div>
                        <div className="plate">
                            <div className="name">车牌照片</div>
                            <div className="pic">
                                {
                                    getOrderData.exitionPicPlate === '' ? <div className="nodate">暂无数据</div> : <Image src={getOrderData.exitionPicPlate} />
                                }
                            </div>
                        </div>
                    </div>
                </div>
                <div className="btn">
                    <button onClick={closePic}>关闭窗口</button>
                </div>
            </div>
        </Modal>
    </>
}

export default CallbackSuggestion;