import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Carousel, Tooltip } from 'antd'
import AutoRollComponent from '../build/AutoRollComponent'
import Module from '../../public/module'
import LeftItem from './LeftItem'
import { getjiandmanage, getjiandetail } from '../../../actions/example'
import './style.less'
import NoData from '../../public/noData';
const Guanli = (props) => {
    const { dispatch } = props
    const [leftDatas, setleftDatas] = useState([])
    const [rightDatas, setrightDatas] = useState([])
    const [rightitemlist, setrightitemlist] = useState()
    const requestleftDatas = async () => {
        const res = await dispatch(getjiandmanage())
        res.payload.data?.sort((a, b) => {
            return parseInt(b.total) - parseInt(a.total)
        })
        setleftDatas(res.payload.data)
        // console.log(res.payload.data,'哈哈哈')
    }
    const data_string = (str) => {
        str.match('/([^.]*)$/g')


    }
    const requestRightDatas = async () => {
        const res = await dispatch(getjiandetail())
        // let d = res.payload.data?.overSpeedList.sort((a,b)=>b.processingTime < a.processingTime ?-1:1)

        var pattern = /[\u4e00-\u9fa5]*/;
        // console.log(res.payload.data,'好的号的')
        let d = res.payload.data?.overSpeedList?.filter((item, index) => {
            return /.*[\u4e00-\u9fa5_a-zA-Z]+.*$/.test(item.processingTime) == false
        })

        d.map((item, index) => {
            if (parseInt(item.processingTime.match(/([^.]*)$/)[0]) < 10) {
                return item.processingTime = `${(item.processingTime.match(/^([^.]*)(.[^.]*)/)[0])}.0${parseInt(item.processingTime.match(/([^.]*)$/)[0])}`
            }
            // console.log(d3,'好评')
            // console.log(item.processingTime.match(/([^.]*)$/)[0],'kk')
        })
        d.sort((a, b) => b.processingTime.localeCompare(a.processingTime))
        setrightDatas(res.payload.data)
        setrightitemlist(d)
        // console.log(d,'对比的数据')
        // console.log(d2,'完美')
        // console.log(res.payload.data,'嘿嘿嘿')
    }
    useEffect(() => {
        requestleftDatas();
        requestRightDatas()
    }, [])
    // let datalist = newArry(30)
    // datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"})
    // const content = (

    //   );
    const renderContent = () => {
        // console.log(rightitemlist);
        return <div style={{ height: "100%" }}>
            {rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ id, licensePlate, overrunRate, fine, processingTime, deductPoints, nameOfInspectionPoint }, index) => {
                if (index < 120) {
                    return <div key={index} className='guanli-right-item'>
                        <Tooltip title={<div className='popover-content'>
                            <div style={{ width: "100%", height: "100%", marginTop: "0" }}>

                                {/* <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} /> */}
                                <div style={{ position: "absolute", top: "0", width: "50%", padding: "20px" }}>
                                    <img src='/assets/images/leadership/yuanxing.png' style={{ width: "100%", height: "100%" }} />
                                    <p style={{ color: "#09BAFF", position: "absolute", top: "42%", left: "27%", fontSize: "29px", fontFamily: "YouSheBiaoTiHei" }}>{overrunRate ? overrunRate.toFixed(2) : 0}%{/* {item.overrunRate ? item.overrunRate + "%" : "--"} */}</p>
                                    <p style={{ color: "rgba(216,240,255,0.8)", position: "absolute", top: "60%", left: "43%", fontSize: "14px" }}>超限</p>
                                </div>
                                <div style={{ position: "absolute", top: "0", width: "50%", left: "50%", top: '5px' }}>
                                    <p style={{ color: "rgba(216,240,255,0.8)", marginTop: "30px", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>车牌号<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{licensePlate}{/* {item.licensePlate} */}</span></p>
                                    <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>检测点<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{nameOfInspectionPoint}</span></p>
                                    <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>处罚<span style={{ color: "#FF0001", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""}{/* {item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"} */}</span></p>
                                    <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>日期<span style={{ color: "#EEF4FF", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{processingTime}{/* {item.processingTime ? item.processingTime : "--"} */}</span></p>
                                </div>
                            </div>
                        </div>}
                            placement="leftTop"
                            overlayStyle={{ minWidth: 400, minHeight: 212, padding: 0, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }}
                            overlayClassName='popover'

                        >
                            <div style={{ width: '100%', height: '100%', display: 'flex' }}>
                                <span>{licensePlate}</span>
                                <span>{overrunRate}%</span>
                                <span>{deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""}</span>
                                <span>{processingTime}</span>
                            </div>
                        </Tooltip>
                    </div>
                }
            }) : ""}
        </div>
    }
    const renderLeftContent = () => {
        // setleftDatas(leftDatas=>leftDatas.sort((a,b)=>b.total - a.total))

        return leftDatas && leftDatas.length !== 0 ? leftDatas.map((item, index) =>
            <LeftItem key={index} datas={item}></LeftItem>
        ) : ""

    }
    //   renderContent()
    return (
        <>
            <div className='guanli-left'>
                <Module style={{ height: "100%" }} title="检测点治超处理占比" customize={true}>
                    {leftDatas && leftDatas.length !== 0 ? <AutoRollComponent content={renderLeftContent()}
                        containerStyle={{ position: "relative", height: "90%", }}
                        divHeight={"100%"} divId={"chart-overview-left"} /> : <NoData />}
                </Module>
            </div>
            <div className='guanli-right'>
                <Module style={{ height: "100%" }} title="治超详情" customize={true}>
                    <div className="guanli-right-top">
                        <img src="/assets/images/quanju/zhicaolog.png"></img>
                        <span>已处理</span>
                        <span>{rightDatas?.processed || 0}</span>
                        <span>件</span>
                    </div>
                    <div className='guanli-right-title'>
                        <span>车牌号</span>
                        <span>超限</span>
                        <span>处罚</span>
                        <span>处理日期</span>
                    </div>
                    {rightitemlist && rightitemlist.length !== 0 ? <AutoRollComponent content={renderContent()}
                        containerStyle={{ position: "relative", height: "90%", }}
                        divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "70%" }} />}
                </Module>
            </div>
        </>
    )
}
function mapStateToProps (state) {
    const { auth, depMessage } = state;
    const pakData = (dep) => {
        return dep.map((d) => {
            return {
                title: d.name,
                value: d.id,
                // children: d.type >= 2 ? [] : pakData(d.subordinate)
                children: pakData(d.subordinate)
            }
        })
    }
    let depData = pakData(depMessage.data || [])
    return {
        user: auth.user,
        depMessage: depMessage.data || [],
        depLoading: depMessage.isRequesting,
        depData,
    };
}
export default connect(mapStateToProps)(Guanli);