import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Carousel } 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 renderContent = () => {
        return <div style={{height:"100%"}}>
          {rightitemlist && rightitemlist.length!==0?rightitemlist?.map(({ id, licensePlate, overrunRate,fine,processingTime,deductPoints }, index) => {
           if(index<120){
            return <div key={index} className='guanli-right-item'>
            <span>{licensePlate}</span>
            <span>{overrunRate}%</span>
            <span>{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}</span>
            <span>{processingTime}</span>
        </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);