PMS_Frontend_v1.0.0/src/pages/OperationCenter/CarMgm/CarInfo/loadable.jsx

import React, { useState, useRef, useEffect } from "react";
import {
    message,
    Pagination,
    Table,
    Input,
    Space,
    Modal,
    Button,
    Select,
    Tabs,
    Descriptions,
    Timeline
} from "antd";
const { TextArea } = Input;
import moment from "moment";
import errorImg from '@/assets/images/error-img-new.png'
import ajax from '@/config/ajax.js'
import { TableModule, QuickMenu } from "@/components";
import {
    bindColumns,
    modiColumns,
    formRefundColumns
} from "./dataSource";
import { dictionary } from "@/config/common.js";
import "./index.scss";
import { useSessionStorageState } from 'ahooks';
function CarInfo() {
    const [carId, setCarId] = useState()
    const columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            fixed: "left",
            render: (text, record, index) => index + 1,
            width: 100,
        },
        {
            title: "车牌号",
            dataIndex: "plate_number",
            key: "plate_number",
            fixed: "right",
            align: "center",
        },
        {
            title: "会员姓名",
            dataIndex: "name",
            key: "name",
            fixed: "right",
            align: "center",
        },
        {
            title: "会员手机号",
            dataIndex: "mobile",
            key: "mobile",
            fixed: "right",
            align: "center",
        },
        {
            title: "PDA录入号码",
            dataIndex: "pda_mobile",
            key: "pda_mobile",
            fixed: "right",
            align: "center",
        },
        {
            title: "行驶本认证",
            dataIndex: "authStateName",
            key: "authStateName",
            fixed: "right",
            align: "center",
        },
        {
            title: "欠费金额",
            dataIndex: "arrears_money",
            key: "arrears_money",
            fixed: "right",
            align: "center",
        },
        {
            title: "创建时间",
            dataIndex: "create_time",
            key: "create_time",
            fixed: "right",
            align: "center",
        },
        {
            title: "操作",
            dataIndex: "operation",
            key: "operation",
            fixed: "right",
            align: "center",
            render: (text, record) => (
                <>
                    <span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
                        setCarId(record.carId);
                        searchDetail(record);
                    }}>
                        <a>详情</a>
                    </span>
                </>
            ),
        },
    ];
    //构建表头
    const createCol = (label, name, type) => {
        label.length == name.length ? null : console.log('参数缺失', label, label.length, name.length)
        var arr = []
        label?.map((item, index) => {
            let cm = {
                title: item,
                dataIndex: name[index],
                key: name[index],
                align: "center",
            }
            switch (item) {
                case "序号":
                    cm.render = (text, record, index) => index + 1
                    break
                case "退款订单ID":
                case "业务订单ID":
                case "支付订单ID":
                    cm.render = (text) => (
                        <>
                            <a onClick={() => {
                                navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") });
                            }}>{text}</a>
                        </>
                    )
                    break
                default: break
            }
            arr.push(cm)
        })
        var obj = {
            title: "操作",
            dataIndex: "operation",
            key: "operation",
            fixed: "right",
            align: "center",
        }
        switch (type) {
            case 2:
                obj.render = (text, record) => (<>
                    <span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
                        setYcddData(record)
                        setDetailVisible(true)
                    }}>
                        <a>详情</a>
                    </span>
                </>)
                arr.push(obj)
                break
            case 5:
                obj.render = (text, record) => (<>
                    <span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
                        refundSearch(record)
                        setTkddVisible(true)
                    }}>
                        <a>详情</a>
                    </span>
                </>)
                arr.push(obj)
                break
            case 6:
                obj.render = (text, record) => (<>
                    <span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
                        setTkddVisible(true)
                    }}>
                        <a>详情</a>
                    </span>
                </>)
                arr.push(obj)
                break
            case 7:
                obj.render = (text, record) => (<>
                    <span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
                        setTkddVisible(true)
                    }}>
                        <a>详情</a>
                    </span>
                </>)
                arr.push(obj)
                break
            case 8:
                obj.render = (text, record) => (<>
                    <span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {

                    }}>
                        <a>详情</a>
                    </span>
                </>)
                arr.push(obj)
                break
            default: break
        }
        return arr
    }
    //基本信息检索条件
    const formSearch = [
        {
            name: "carId",
            type: "PlateSelect",
            label: "车牌号",
            placeholder: "请输入车牌号",
        },
        {
            name: "mobile",
            type: "Input",
            label: "会员手机号",
            placeholder: "请输入会员手机号",
        },
        {
            name: "authState",
            type: "Select",
            label: "认证状态",
            options: [
                {
                    label: "已认证",
                    value: 2,
                },
                {
                    label: "未认证",
                    value: 1,
                },

            ],
        },
        {
            name: "bingState",
            type: "Select",
            label: "绑定状态",
            options: [
                {
                    label: "已绑定",
                    value: 0,
                },
                {
                    label: "未绑定",
                    value: 1,
                },

            ],
        },
        {
            name: "timePeriod",
            type: "RangePicker",
            label: "时间段",
            defaultValue: [moment().subtract(89, "day"), moment()],
        },
    ];
    //退费记录检索条件
    const formRefundSearch = [
        {
            name: "refund_id",
            type: "Input",
            label: "退款订单号",
            placeholder: "请输入退款订单号",
        },
        {
            name: "type",
            type: "Select",
            label: "业务订单类型",
            options: sysConfig.businessOrderType,
        },
        {
            name: "park_id",
            type: "Input",
            label: "业务订单ID",
            placeholder: "请输入业务订单ID",
        },
        {
            name: "order_id",
            type: "Input",
            label: "支付订单ID",
            placeholder: "请输入支付订单ID",
        },
        {
            name: "state",
            type: "Select",
            label: "退款状态",
            options: [
                {
                    label: "全部",
                    value: 0,
                },
                {
                    label: "待确认",
                    value: 1,
                },
                {
                    label: "退款中",
                    value: 2,
                },
                {
                    label: "已完成",
                    value: 3,
                },
                {
                    label: "退款失败",
                    value: 4,
                },
            ],
        },
        {
            name: "reason",
            type: "Select",
            label: "退款原因",
            options: [
                {
                    label: "全部",
                    value: 0,
                },
                {
                    label: "异常订单处理",
                    value: 1,
                },
                {
                    label: "自动平单退款",
                    value: 2,
                },
            ],
        },
        {
            name: "flow_id",
            type: "Input",
            label: "渠道流水号",
            placeholder: "请输入渠道流水号",
        },
        {
            name: "timePeriod",
            type: "RangePicker",
            label: "时间段",
            defaultTitle: ['退款时间', '至'],
            defaultValue: [moment().subtract(1, "month"), moment()],
        },
    ];
    //所有检索条件
    const ash = [
        {//1
            name: "region",
            type: "TreeSelect",
            label: "区域",
        },
        {//2
            name: "operator",
            type: "Select",
            label: "商户名称",
            options: dictionary.MerchantName,
        },
        {//3
            name: "road",
            type: "SearchSelect",
            label: "停车场名称",
            id: 2,
            placeholder: "请输入停车场名称",
        },
        {//4
            name: "road_type",
            type: "Select",
            label: "车场类型",
            options: [
                {
                    label: "全部",
                    value: 0,
                },
                {
                    label: "路侧平行",
                    value: 1,
                },
                {
                    label: "路侧垂停",
                    value: 2,
                },
                {
                    label: "封闭车场",
                    value: 3,
                },
                {
                    label: "半封闭车场",
                    value: 4,
                },
            ],
        },
        {//5
            name: "phone",
            type: "Input",
            label: "手机号",
            placeholder: "请输入手机号",
        },
        {//6
            name: "type",
            type: "Select",
            label: "出入场类型",
            placeholder: "请选择出入场类型",
            defaultValue: 1,
            options: [
                {
                    label: "入场",
                    value: 1,
                },
                {
                    label: "出场",
                    value: 2,
                },
            ],
        },

        {//7
            name: "b",
            type: "Input",
            label: "商品名称",
            placeholder: "请输入商品名称",
        },
        {//8
            name: "b",
            type: "Select",
            label: "购买渠道",
            placeholder: "请选择购买渠道",
            options: [
                {
                    label: "全部",
                    value: 0,
                },
                {
                    label: "线上渠道",
                    value: 1,
                },
                {
                    label: "后台录入",
                    value: 2,
                },
            ],
        },
        {//9
            name: "b",
            type: "Select",
            label: "订单状态",
            placeholder: "请选择订单状态",
            options: [
                {
                    label: "全部",
                    value: 0,
                },
                {
                    label: "未生效",
                    value: 1,
                },
                {
                    label: "生效中",
                    value: 2,
                },
                {
                    label: "已失效",
                    value: 3,
                },
            ],
        },
        {//10
            name: "PayChannel",
            type: "Select",
            label: "支付渠道",
            placeholder: "请选择支付渠道",
            options: dictionary.PayChannel,
        },
        {//11
            name: "payment_equipment",
            type: "Select",
            label: "支付设备",
            placeholder: "请选择支付设备",
            options: dictionary.PayDevice
        },
        {//12
            name: "pay_type",
            type: "Select",
            label: "支付方式",
            placeholder: "请选择支付方式",
            options: dictionary.PaydMethod,
        },
        {//13
            name: "timePeriod",
            type: "RangePicker",
            label: "时间段",
            defaultValue: [moment().subtract(1, "month"), moment()],
        },
        {//14
            name: "b",
            type: "Select",
            label: "退款方式",
            placeholder: "请选择退款方式",
            options: dictionary.PaydMethod,
        },
        {//15
            name: "b",
            type: "Input",
            label: "第三方流水号",
            placeholder: "请输入第三方流水号",
        },
        {//16
            name: "timePeriod",
            type: "RangePicker",
            label: "时间段",
            defaultTitle: ['支付时间', '至']
            // defaultValue: [moment().startOf("day"), moment()],
        },
        {//17
            name: "timePeriod",
            type: "RangePicker",
            label: "时间段",
            defaultTitle: ['订购时间', '至']
            // defaultValue: [moment().startOf("day"), moment()],
        },
        {//18
            name: "timePeriod",
            type: "RangePicker",
            label: "时间段",
            defaultTitle: ['预约到场时间', '至']
            // defaultValue: [moment().startOf("day"), moment()],
        },
        {//19
            name: "plate",
            type: "Input",
            label: "车牌号",
            placeholder: "请输入车牌号",
        },
    ];
    const [sessionTabList, setSessionTablist] = useSessionStorageState('carInfo', {
        value: ''
    })

    const [tag, setTag] = useState('1');
    const [edit, setEdit] = useState(true);
    const [resultData, setResultData] = useState([])
    const [baseData, setBaseData] = useState({
        //car_type:2
    })
    const [bindData, setBindData] = useState([])//绑定
    const [modiData, setModiData] = useState([])//修改
    const [detailData, setDetailData] = useState([])//
    const [ycddData, setYcddData] = useState([])//异常订单数据
    const [detailVisible, setDetailVisible] = useState(false);
    const [ltcVisible, setLtcVisible] = useState(false);
    const [timesVisible, setTimesVisible] = useState(false); //退款尝试次数展开
    const [ycddVisible, setYcddVisible] = useState(false);
    const [tkddVisible, setTkddVisible] = useState(false);
    const [cardVisible, setCardVisible] = useState(false);
    const [eaeVisible, setEaeVisible] = useState(false);//出入场图片
    const [bigpicVisible, setBigpicVisible] = useState(false);//大图展示
    const [bigPic, setBigPic] = useState();
    const [total, setTotal] = useState(0);
    const [tabKey, setTabKey] = useState("1");
    const [stopCarTab,setStopCarTop]=useState("1")
    function openModal(params) {
        setDetailVisible(true);
    }
    function changeKey(key) {
        setTabKey(key);
    }

    //基本信息查询
    function search(e) {
        // if (!e.type) {
        //     e.type = 1
        // }
        ajax({
            url: "/api/ope/car/list",
            type: "post",
            data: { ...e },
        }).then((res) => {
            let { status, data, total } = res
            if (status == 20000) {
                setResultData(data)
                setTotal(total)
            } else {
                message.error(res.message)
            }
        })
    }
    //基本信息详情
    function searchDetail(e) {
        ajax({
            url: "/api/ope/car/get_base_info",
            type: "get",
            data: { carId: e?.carId || carId },
        }).then((res) => {
            let { status, data, total } = res
            if (status == 20000) {
                setBaseData(data)
                setTag('2')
            } else {
                message.error(res.message)
            }
        })
        ajax({//绑定
            url: "/api/ope/car/get_bind_records",
            type: "get",
            data: { carId: e?.carId || carId },
        }).then((res) => {
            let { status, data, total } = res
            if (status == 20000) {
                setBindData(data)
            } else {
                message.error(res.message)
            }
        })
        ajax({//修改数据
            url: "/api/ope/car/get_edit_records",
            type: "get",
            data: { carId: e?.carId || carId },
        }).then((res) => {
            let { status, data, total } = res
            if (status == 20000) {
                setModiData(data)
            } else {
                message.error(res.message)
            }
        })
    }
    //编辑车辆外观信息
    function editDetail() {
        ajax({
            url: "/api/ope/car/edit_car",
            type: "post",
            data: {
                carId: baseData.carId,
                car_brand: baseData.car_brand,
                car_model: baseData.car_model,
                car_color: baseData.car_color,
                car_type: baseData.car_type,
                plate_type: baseData.plate_type,
            },
        }).then((res) => {
            let { status, data } = res
            if (status == 20000) {
                setEdit(true)
                //window.location.reload()
                //setTag('2')
                searchDetail()
            } else {
                message.error(res.message)
            }
        })

    }
    //详情其他模块查询
    function searchOther(e) {
        var url = ''
        switch (tabKey) {
            case "1":
                url = ""
                break
            case "2":
                url = "/api/bpm/record/get_record_list"//停车记录
                break
            case "3":
                url = "/api/bpm/record/get_parking_arrears_list"//欠费记录
                break
            case "4":
                url = "/api/bpm/record/get_payment_list"//支付记录
                break
            case "5":
                url = "/api/ope/record/get_refund_list"//退费订单
                break
            case "6":
                url = ""
                break
            case "7":
                url = ""
                break
            case "8":
                url = ""
                break
            default: break
        }
        if (tabKey == '3' && e && !e?.type) {
            e.type = 1
        }
        ajax({
            url: url,
            type: "post",
            data: { ...e, carId: carId, startTime: e?.start_time, endTime: e?.end_time },
        }).then((res) => {
            let { status, data, total } = res
            if (status == 20000) {
                if (data.list) {
                    setResultData(data.list)
                    setTotal(data.total)
                } else {
                    setResultData(data)
                    setTotal(total)
                }
            } else {
                setResultData([])
                message.error(res.message)
            }
        })
    }
    //退款订单详情
    function refundSearch(e) {
        ajax({
            url: "/api/ope/record/get_refund_info",
            type: "get",
            data: { id: e.refund_id },
        }).then((res) => {
            let { status, data } = res
            if (status == 20000) {
                //setResultData(data)
                setYcddData(data)
            } else {
                message.error(res.message)
            }
        })
    }
    //停车记录信息渲染
    function renderParkRecord(params) {
        return (
            <div className="ltc-box">
                <div className="ltc-box-title"><div className="text">停车场信息</div><div className="line"></div></div>
                <div className="ltc-content">
                    <div className="ltc-item">
                        <div className="new-item">停车场名称</div><div className="new-value">{params?.road || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">泊位号</div><div className="new-value">{params.berth_id || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">区域</div><div className="new-value">{params.region || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">商户</div><div className="new-value">{params.operator || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">车场类型</div><div className="new-value">{params.road_type || "--"}</div>
                    </div>
                </div>
                <div className="ltc-box-title"><div className="text">停车信息</div><div className="line"></div></div>
                <div className="ltc-content">
                    <div className="ltc-item">
                        <div className="new-item">车牌号</div><div className="new-value">{params.plate || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">会员手机号</div><div className="new-value">{params.phone || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">入场时间</div><div className="new-value">{params.in_time || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">出场时间</div><div className="new-value">{params.out_time || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">停车时长</div><div className="new-value">{params.admission_time || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">订单金额</div><div className="new-value">{params.order_amount || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">停车卡折扣</div><div className="new-value">{params.parking_card_discount || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">车场折扣</div><div className="new-value">{params.road_discount || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">应收金额</div><div className="new-value">{params.receivable_amount || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">优惠券</div><div className="new-value">{params.preferential_amount || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">优惠总计</div><div className="new-value">{params.preferential_total || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">实付金额</div><div className="new-value">{params.actual_amount || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">优惠退款</div><div className="new-value">{params.refund_discount || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">实付退款</div><div className="new-value">{params.actual_refund || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">退款总计</div><div className="new-value">{params.refund_total || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">入场收费员</div><div className="new-value">{params.in_person || "--"}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">出场收费员</div><div className="new-value">{params.out_person || "--"}</div>
                    </div>
                </div>
                <div className="ltc-box-title"><div className="text">入场照片</div><div className="line"></div></div>
                <div className="ltc-content">
                    <div className="ltc-item ltc-item-img ">
                        <img src={params.in_veh_pic} onError={handleImgError} onClick={() => { setBigPic(params.in_veh_pic); setBigpicVisible(true) }} />
                    </div>
                    <div className="ltc-item ltc-item-img ">
                        <img src={params.in_plate_pic} onError={handleImgError} onClick={() => { setBigPic(params.in_plate_pic); setBigpicVisible(true) }} />
                    </div>
                </div>
            </div>
        );
    }
    //基本信息渲染
    function renderRecord(params) {
        return (
            <div style={{ padding: '18px' }}>
                <div className="base-ltc">
                    <div className="ltc-img">
                        <img src={baseData.car_img || require("../../../../../src/assets/images/error-img.png")} onError={handleImgError} width={600} />
                    </div>
                    <div className="ltc-box">
                        <div className="ltc-box-title"><div className="ltc-icon"></div>车辆归属信息</div>
                        <div className="ltc-content">
                            <div className="ltc-item">
                                <div className="new-item">车牌颜色：</div>
                                <div className="new-value">{baseData.plate_color || "--"}</div>
                            </div>
                            <div className="ltc-item">
                                <div className="new-item">车牌号:</div>
                                <div className="new-value">{baseData.plate_number || "--"}</div>
                            </div>
                            <div className="ltc-item">
                                <div className="new-item">绑定会员账户:</div>
                                <div className="new-value">{baseData.mobile || "--"}</div>
                            </div>
                            <div className="ltc-item">
                                <div className="new-item">认证状态:</div>
                                <div className="new-value"> {baseData.authStateName || "--"}</div>
                            </div>
                            <div className="ltc-item">
                                <div className="new-item">车牌归属地:</div>
                                <div className="new-value"> {baseData.home_location || "--"}</div>
                            </div>
                            <div className="ltc-item">
                                <div className="new-item">创建时间:</div>
                                <div className="new-value">{baseData.create_time || "--"}</div>
                            </div>
                        </div>
                        <div className="ltc-box-title">
                            <div className="ltc-icon"></div>车辆外观信息
                            {
                                edit ? <div className="ltc-btn" onClick={() => { setEdit(false) }}>编辑</div> :
                                    <>
                                        <div className="ltc-btn" onClick={() => { editDetail(); }}>保存</div>
                                        <div className="ltc-btn ltc-cancel" onClick={() => { setEdit(true) }}>取消</div>
                                    </>
                            }
                        </div>
                        <div className="ltc-content">
                            <div className="ltc-item">
                                <div className="new-item">车辆品牌：</div>
                                <Input className="ltc-item-input" value={baseData.car_brand} onChange={(e) => { setBaseData({ ...baseData, car_brand: e.target.value }) }} placeholder="请输入车辆品牌" disabled={edit}></Input>
                            </div>
                            <div className="ltc-item">
                                <div className="new-item">车辆型号：</div>
                                <Input className="ltc-item-input" value={baseData.car_model} onChange={(e) => { setBaseData({ ...baseData, car_model: e.target.value }) }} placeholder="请输入车辆型号" disabled={edit}></Input>
                            </div>
                            <div className="ltc-item">
                                <div className="new-item">车身颜色：</div>
                                <Input className="ltc-item-input" value={baseData.car_color} onChange={(e) => { setBaseData({ ...baseData, car_color: e.target.value }) }} placeholder="请输入车身颜色" disabled={edit}></Input>
                            </div>
                            <div className="ltc-item">
                                <div className="new-item"> 车辆类型：</div>
                                <Select
                                    disabled={edit}
                                    defaultValue={baseData.car_type}
                                    onChange={(v) => setBaseData({ ...baseData, car_type: v })}
                                    options={sysConfig.vehicleTypeNOAll}
                                    placeholder={''}
                                />
                            </div>
                            <div className="ltc-item">
                                <div className="new-item">号牌类型：</div>
                                <Select
                                    disabled={edit}
                                    options={sysConfig.plateType}
                                    onChange={(v) => setBaseData({ ...baseData, plate_type: v })}
                                    defaultValue={baseData?.plate_type}
                                    placeholder={''}
                                />

                            </div>
                        </div>
                    </div>
                </div>
                <div className="ltc-box">
                    <div className="ltc-box-title"><div className="ltc-icon"></div>车辆绑定记录</div>
                    <div className="table-wrap">
                        <Table
                            columns={bindColumns}
                            dataSource={bindData}
                            scroll={{ x: 1000 }}
                            // className="yisa-table"
                            pagination={false}
                            rowKey={(record) => record.id}
                        />
                    </div>
                    <div className="ltc-box-title"><div className="ltc-icon"></div>车辆信息修改记录</div>
                    <Table
                        columns={modiColumns}
                        dataSource={modiData}
                        scroll={{ x: 1000 }}
                        // className="yisa-table"
                        pagination={false}
                        rowKey={(record) => record.id}
                    />
                </div>
            </div>
        );
    }

    //其他页面渲染
    function renderTable(columns, arr, dataSource, exportUrl ) {
        return (
            <TableModule
                columns={columns}
                tableData={dataSource}
                formSearch={arr}
                total={total}
                search={searchOther}
                isExport={exportUrl ? true : false}
                exportUrl={exportUrl}
                export_other={{carId:carId}}
                rowKey={(record) => record.id}
            />
        );
    }


    const handleImgError = (e) => {
        let evn = e || event
        let img = evn.srcElement ? evn.srcElement : evn.target
        img.src = errorImg
    }

    //退款订单详情
    const tkddModal = <div className="ltc-box">
        <div className="ltc-box-title"><div className="text">退款订单:{ycddData?.refund_id}</div><div className="line"></div></div>
        <div className="ltc-content">
            <div className="ltc-item">
                <div className="new-item">生成时间</div><div className="new-value">{ycddData?.refund_time || "--"}</div>
            </div>
            <div className="ltc-item">
                <div className="new-item">退款状态</div><div className="new-value">{ycddData.refund_state || "--"}</div>
            </div>
            <div className="ltc-item">
                <div className="new-item">支付渠道</div><div className="new-value">{ycddData.payment_channels || "--"}</div>
            </div>
            <div className="ltc-item">
                <div className="new-item">退款方式</div><div className="new-value">{ycddData.refund_type || "--"}</div>
            </div>
            <div className="ltc-item">
                <div className="new-item">应退实付金额</div><div className="new-value">{ycddData.refund_actual_amount || "--"}</div>
            </div>
            <div className="ltc-item">
                <div className="new-item">已退实付金额</div><div className="new-value">{ycddData.has_refund_actual_amount || "--"}</div>
            </div>
            <div className="ltc-item">
                <div className="new-item">应退优惠金额</div><div className="new-value">{ycddData.refund_discount_amount || "--"}</div>
            </div>
            <div className="ltc-item">
                <div className="new-item">已退优惠金额</div><div className="new-value">{ycddData.has_refund_discount_amount || "--"}</div>
            </div>
            <div className="ltc-item">
                <div className="new-item">退款尝试次数</div><div className="new-value">{ycddData.try_count || "--"}
                    {timesVisible ?
                        <a onClick={() => { setTimesVisible(false) }}>收起</a> :
                        <a onClick={() => { setTimesVisible(true) }}>查看</a>}
                </div>
            </div>
            <div className="ltc-item">
                <div className="new-item">最近尝试时间</div><div className="new-value">{ycddData.latest_try_time || "--"}</div>
            </div>
        </div>


        {timesVisible ? <>
            <div className="ltc-box-title"><div className="text">退款尝试详情</div><div className="line"></div></div>
            <Table
                columns={formRefundColumns}
                dataSource={ycddData.try_list}
                scroll={{ x: 1000 }}
                // className="yisa-table"
                pagination={false}
                rowKey={(record) => record.id}
            /> </> :
            <>
                <div className="ltc-box-title"><div className="text">支付订单:{ycddData.order_id}</div><div className="line"></div></div>
                <div className="ltc-content">
                    <div className="ltc-item">
                        <div className="new-item">平台商户</div><div className="new-value">{ycddData.payment_operator_name}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">生成时间</div><div className="new-value">{ycddData.payment_create_time}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">支付时间</div><div className="new-value">{ycddData.pay_time}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">支付渠道</div><div className="new-value">{ycddData.payment_equipment}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">优惠金额</div><div className="new-value">{ycddData.discount_amount}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">支付应用</div><div className="new-value">{ycddData.payment_equipment}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">实付金额</div><div className="new-value">{ycddData.paid_in_money}</div>
                    </div>
                </div>
                <div className="ltc-box-title"><div className="text">停车订单:{ycddData.park_record_id}</div><div className="line"></div></div>
                <div className="ltc-box-title"><div className="text">车厂详情</div></div>
                <div className="ltc-content">
                    <div className="ltc-item">
                        <div className="new-item">平台商户</div><div className="new-value">{ycddData.payment_operator_name}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">停车场名称</div><div className="new-value">{ycddData?.road_name}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">区域</div><div className="new-value">{ycddData.area_name}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">商户名称</div><div className="new-value">{ycddData.park_operator_name}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">泊位号</div><div className="new-value">{ycddData.berth_code}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">车场类型</div><div className="new-value">{ycddData.road_type}</div>
                    </div>
                </div>
                <div className="ltc-box-title"><div className="text">车辆详情</div></div>
                <div className="ltc-content">
                    <div className="ltc-item">
                        <div className="new-item">车牌号</div><div className="new-value">{ycddData.plate_number}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">停车时长</div><div className="new-value">{ycddData.parking_duration}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">入场时间</div><div className="new-value">{ycddData.in_time}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">出场时间</div><div className="new-value">{ycddData.out_time}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">入场记录来源</div><div className="new-value">{ycddData.inSource}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">出场记录来源</div><div className="new-value">{ycddData.outSource}</div>
                    </div>
                    <div className="ltc-item">
                        <div className="new-item">证据图像</div><div className="new-value"><a onClick={() => { setEaeVisible(true) }}>查看</a></div>
                    </div>
                </div>
            </>}



    </div>

    //停车卡详情
    const tckModal = <div className="ltc-box">
        <div className="ltc-box-title">订单信息:</div>
        <div className="ltc-box-line"></div>
        <Descriptions title="">
            <Descriptions.Item label="订单状态">{ycddData?.t || "--"}</Descriptions.Item>
            <Descriptions.Item label="支付时间">{ycddData.r || "--"}</Descriptions.Item>
            <Descriptions.Item label="车牌号">{ycddData.o || "--"}</Descriptions.Item>
            <Descriptions.Item label="车牌颜色">{ycddData.r || "--"}</Descriptions.Item>
            <Descriptions.Item label="手机号">{ycddData.mobile || "--"}</Descriptions.Item>
            <Descriptions.Item label="购买渠道">{ycddData.r || "--"}</Descriptions.Item>
            <Descriptions.Item label="实付金额">{ycddData.r || "--"}</Descriptions.Item>
            <Descriptions.Item label="支付渠道">{ycddData.r || "--"}</Descriptions.Item>
            <Descriptions.Item label="支付设备">{ycddData.r || "--"}</Descriptions.Item>
        </Descriptions>
        <div className="ltc-box-title">商品信息:</div>
        <div className="ltc-box-line"></div>
        <Descriptions title="">
            <Descriptions.Item label="商品名称">{ycddData.plate}</Descriptions.Item>
            <Descriptions.Item label="商户名称">{ycddData.admission_time}</Descriptions.Item>
            <Descriptions.Item label="适用范围">{ycddData.in_time}</Descriptions.Item>
            <Descriptions.Item label="生效开始日期">{ycddData.out_time}</Descriptions.Item>
            <Descriptions.Item label="有效天数">{ycddData.in_source}</Descriptions.Item>
            <Descriptions.Item label="生效结束日期">{ycddData.out_source}</Descriptions.Item>
            <Descriptions.Item label="实付金额"></Descriptions.Item>
        </Descriptions>
    </div>

    //错峰卡详情
    const cfkModal = <div className="ltc-box">
        <div className="ltc-box-title">订单信息:</div>
        <div className="ltc-box-line"></div>
        <Descriptions title="">
            <Descriptions.Item label="停车场名称">{ycddData?.road || "--"}</Descriptions.Item>
            <Descriptions.Item label="手机号">{ycddData.mobile || "--"}</Descriptions.Item>
            <Descriptions.Item label="车牌号">{ycddData.plate_number || "--"}</Descriptions.Item>
            <Descriptions.Item label="同步MS状态">{ycddData.r || "--"}</Descriptions.Item>
            <Descriptions.Item label="订购时间">{ycddData.r || "--"}</Descriptions.Item>
            <Descriptions.Item label="支付方式">{ycddData.r || "--"}</Descriptions.Item>
            <Descriptions.Item label="订单金额">{ycddData.r || "--"}</Descriptions.Item>
        </Descriptions>
        <div className="ltc-box-title">商品信息:</div>
        <div className="ltc-box-line"></div>
        <Descriptions title="">
            <Descriptions.Item label="销售金额">{ycddData.plate}</Descriptions.Item>
            <Descriptions.Item label="有效时间">{ycddData.admission_time}</Descriptions.Item>
        </Descriptions>
    </div>
    // useEffect(() => {
    //     searchOther()
    // }, [tabKey])

    //车辆信息，列表 限制条件
    const limitCon = (e) => {
        if (e && moment(e.end_time) - moment(e.start_time) > 90 * 24 * 1000 * 3600) {
            //console.log(typeof e.order_mount_down, e.order_mount_up, e.order_mount_down > e.order_mount_up)
            message.error('查询范围不超过90天！')
            return 1
        }
    }
    return (
        <div className="carinfo-box">
            {tag == 1 ?
                <TableModule
                    columns={columns}
                    tableData={resultData}
                    formSearch={formSearch}
                    total={total}
                    search={search}
                    limitCon={limitCon}
                    exportUrl={'/api/ope/car/export'}
                    // mandatory={'plate'}
                    // mandatory_name={'车牌号'}
                    isQuickMenu={[{ text: '昨日', value: 1 },
                    { text: '今日', value: 0 },
                    { text: '近三日', value: 2 },
                    { text: '近一周', value: 6 },
                    { text: '近一月', value: 29 },
                    { text: '近三月', value: 89 },]}
                    rowKey={(record) => record.carId}
                    pageName={'carInfo'}
                /> :
                <>
                    <div className="back-btn" onClick={() => { setTag('1'); setTabKey('1') }}>返回</div>
                    <Tabs activeKey={tabKey} onChange={changeKey}>
                        <Tabs.TabPane tab="基本信息" key="1">
                            {renderRecord(detailData)}
                        </Tabs.TabPane>
                        <Tabs.TabPane tab="停车记录" key="2">
                            {tabKey == 2 ?
                                renderTable(
                                    createCol(['序号', '区域', '商户名称', '停车场名称', '车场类型', '车牌号', '泊位号', '入场时间', '离场时间', '停车时长', '应收金额', '优惠金额', '实收金额'],
                                        ['index', 'region', 'operator', 'road', 'road_type', 'plate', 'berth_id', 'in_time', 'out_time', 'admission_time', 'receivable_amount', 'preferential_amount', 'actual_amount'], 2),
                                    [ash[0], ash[1], ash[2], ash[3], ash[4], ash[5], ash[12]],
                                    resultData,
                                    "/api/bpm/record/get_record_export"
                                ) : null}
                        </Tabs.TabPane>
                        <Tabs.TabPane tab="欠费记录" key="3">
                            {tabKey == 3 ?
                                renderTable(
                                    createCol(['商户名称', '区域', '停车场名称', '车牌号', '入场时间', '出场时间', '欠费金额'],
                                        ['merchantName', 'area', 'sectionName', 'licensePlateNumber', 'entryTime', 'exitTime', 'arrearsAmount'], 3),
                                    [ash[0], ash[1], ash[2], ash[3], ash[5], ash[12]],
                                    resultData
                                ) : null}
                        </Tabs.TabPane>
                        <Tabs.TabPane tab="支付记录" key="4">
                            {tabKey == 4 ?
                                renderTable(
                                    createCol(['订单ID', '停车场名称', '车牌号', '泊位号', '入场时间', '计费时间', '停车时长', '应收金额', '优惠金额', '实收金额', '支付渠道', '支付设备', '操作人', '付款车场', '支付时间', '第三方流水ID'],
                                        ['order_id', 'road', 'plate', 'berth_id', 'admission_time', 'charging_time', 'parking_duration', 'receivable_amount', 'discount_amount', 'paid_in_money', 'payment_channels', 'payment_equipment', 'dealer', 'pay_road', 'pay_time', 'third_party_flow_id'], 4),
                                    [ash[2], ash[9], ash[10], ash[15]],
                                    resultData, 
                                    '/api/bpm/record/get_payment_export'
                                ) : null}
                        </Tabs.TabPane>
                        <Tabs.TabPane tab="退费订单" key="5">
                            {tabKey == 5 ?
                                renderTable(
                                    createCol(['序号', '最近尝试时间', '支付渠道', '应退实付（元）', '应退优惠（元）', '退款原因', '退款申请时间', '退款订单ID', '业务订单类型', '业务订单ID', '支付订单类型', '支付订单ID', '渠道流水号', '状态'],
                                        ['index', 'latest_try_time', 'payment_channels_name', 'refund_actual_amount', 'refund_discount_amount', 'reason', 'refund_time', 'id', 'parking_type_name', 'park_record_id', 'payment_type_name', 'payment_order_id', 'flow_id', 'state_name'], 5),
                                    formRefundSearch,
                                    resultData
                                ) : null}
                        </Tabs.TabPane>
                        <Tabs.TabPane tab="停车卡购买记录" key="6">
                            {tabKey == 6 ?
                                renderTable(
                                    createCol(['车牌号', '车辆颜色', '手机号', '商户名称', '实付金额', '支付渠道', '支付设备', '购买渠道', '支付时间', '订单状态'],
                                        ['plate', '', 'phone', 'operator', 'actual_amount', '', '', '', '', ''], 6),
                                    [ash[4], ash[6], ash[7], ash[8], ash[9], ash[10], ash[15]],
                                    resultData
                                ) : null}
                        </Tabs.TabPane>
                        <Tabs.TabPane tab="错峰卡购买记录" key="7">
                            {tabKey == 7 ?
                                renderTable(
                                    createCol(['序号', '停车场名称', '车牌号', '手机号', '订单金额', '支付方式', '同步MS状态', '订购状态'],
                                        ['index', 'road', 'plate', 'phone', 'order_amount', '', '', ''], 7),
                                    [ash[2], ash[4], ash[11], ash[16]],
                                    resultData
                                ) : null}
                        </Tabs.TabPane>
                        <Tabs.TabPane tab="预约处理" key="8">
                            <Tabs defaultActiveKey="1">
                                <Tabs.TabPane tab="预约订单" key="1">
                                    {
                                        renderTable(
                                            createCol(['序号', '车牌号', '手机号', '停车场名称', '实付金额', '支付方式', '下单时间', '订单状态', '第三方流水号'],
                                                ['index', 'plate', 'phone', 'road', 'actual_amount', '', '', '',''], 8),
                                            [ash[4], ash[2], ash[17], ash[11], ash[14], ash[15], ash[8]],
                                            resultData
                                        )}
                                </Tabs.TabPane>
                                <Tabs.TabPane tab="预约订单退款" key="2">
                                    {
                                        renderTable(
                                            createCol(['序号', '车牌号', '手机号', '停车场名称', '预约到场时间', '实付金额', '退款金额', '退款方式', '退款时间', '第三方流水号'],
                                                ['index', 'plate', 'phone', 'road', '', 'actual_amount', 'refund_total', '', '', ''], 9),
                                            [ash[4], ash[2], ash[12], ash[13], ash[12], ash[14]],
                                            resultData
                                        )}
                                </Tabs.TabPane>
                            </Tabs>
                        </Tabs.TabPane>
                    </Tabs>

                </>
            }
            <Modal
                open={detailVisible}
                width={1500}
                onCancel={() => {
                    setDetailVisible(false);
                    setStopCarTop("1")
                }}
                footer={null}
            >
                <Tabs activeKey={stopCarTab} onChange={(e)=>{
                    setStopCarTop(e)
                }}>
                    <Tabs.TabPane tab="停车记录信息" key="1">
                        {/* {renderParkRecord(detailData)} */}
                        {renderParkRecord(ycddData)}
                    </Tabs.TabPane>
                    <Tabs.TabPane tab="历史处理" key="2">
                        {/* {renderModalTable(payRecordColumns, payRecord)} */}
                    </Tabs.TabPane>
                </Tabs>
            </Modal>
            <Modal
                open={bigpicVisible}
                width={1600}
                title={'图片展示'}
                className="eae-modal"
                onCancel={() => {
                    setBigpicVisible(false);
                }}
                footer={false}
            >
                <div>
                    <div className="eae-modal-item">
                        <img src={bigPic} width={1550} onError={handleImgError}/>
                    </div>
                </div>
            </Modal>
            <Modal
                open={tkddVisible}
                width={1500}
                title={'订单详情'}
                onCancel={() => {
                    setTkddVisible(false);
                }}
                footer={[
                    <Button key="back" onClick={() => {
                        setTkddVisible(false);
                    }}>
                        关闭窗口
                    </Button>]}
            >
                {/* {tkddModal} */}
                {tabKey == '5' ? tkddModal : tabKey == '6' ? tckModal : tabKey == '7' ? cfkModal : null}

            </Modal>
            <Modal
                open={eaeVisible}
                width={1600}
                title={'证据图像'}
                className="eae-modal"
                onCancel={() => {
                    setEaeVisible(false);
                }}
                footer={false}
            >
                <div>
                    <div className="eae-modal-title"><div className="ltc-icon"></div>入场图片</div>
                    <div className="eae-modal-item">
                        <div>车辆照片</div>
                        <img src={ycddData.in_veh_pic} width={750} onError={handleImgError}/>
                    </div>
                    <div className="eae-modal-item">
                        <div>车牌照片</div>
                        <img src={ycddData.in_plate_pic} width={750} onError={handleImgError}/>
                    </div>
                </div>
            </Modal>
        </div>
    );
}

export default CarInfo;