import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Carousel, Tooltip, Image } from 'antd'
import AutoRollComponent from '../build/AutoRollComponent'
import VideoMonitor from '../build/videoMonitor'
import Module from '../../public/module'
import moment from 'moment'
import LeftItem from './LeftItem'
import { getjiandmanage, getjiandetail } from '../../../actions/example'
import { getRoadadministration } from '../../../../fillion/actions/luzheng'
import './style.less'
import NoData from '../../public/noData';
import { stubString } from 'lodash';
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,'嘿嘿嘿')
   }

   const roadManagement = async () => {
      await dispatch(getRoadadministration({})).then(res => {
         if (res.success) {
            setrightitemlist(res.payload.data?.rows || [])
         }
      })



   }


   useEffect(() => {
      requestleftDatas();
      // requestRightDatas()

      roadManagement()
   }, [])

   // const renderContent = () => {
   //    console.log('rightitemlist', rightitemlist)
   //    return <div style={{ height: "100%" }}>
   //       {rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ enforcementdate, enforcementreslt, roadname, picfile }, 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", paddingBottom: 20, display: "flex" }}>
   //                      {picfile?.length > 0 ? <Carousel autoplay style={{ width: 200, height: 200, margin: "20px 0px 0px 20px" }}>
   //                         {picfile?.map(v => <img className='picfileimg'
   //                            style={{ width: 200, height: 200, display: 'inline-block', }}
   //                            // src={`/_file-server/${v.storageUrl}`}
   //                            src={v.url}
   //                            width={`200px`}
   //                         />)}
   //                      </Carousel>
   //                         : <div style={{
   //                            width: 200, height: 200, margin: "20px 0px 0px 20px",
   //                         }} />
   //                      }


   //                      <div style={{ width: 240, marginLeft: 20, marginTop: 20, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
   //                         <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
   //                            执法日期:<span style={{
   //                               color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
   //                               overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
   //                            }}>
   //                               {enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
   //                            </span></p>
   //                         <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
   //                            执法道路:<span title={roadname} style={{
   //                               color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
   //                               overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
   //                            }}>
   //                               {roadname}
   //                            </span></p>
   //                         <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
   //                            执法成果:<span title={enforcementreslt} style={{
   //                               color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
   //                               overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
   //                            }}>
   //                               {enforcementreslt}</span></p>
   //                      </div>
   //                   </div>

   //                </div>}
   //                   placement="leftTop"
   //                   overlayStyle={{ minWidth: 500, minHeight: 200, paddingTop: 10, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }}
   //                   overlayClassName='popover'

   //                >
   //                   <div style={{ width: '100%', height: '100%', display: 'flex', color: "rgba(216, 240, 255, 0.8)" }}>
   //                      <div style={{ width: '50%', textAlign: "center", }}>{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}</div>
   //                      <div title={enforcementreslt} style={{ width: '50%', textAlign: "center", overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis" }}>{enforcementreslt}</div>
   //                   </div>
   //                </Tooltip>
   //             </div>
   //          }
   //       }) : ""}
   //    </div>
   // }
   const renderContent = rightitemlist.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => {
      return (
         <div key={index} style={{}} className='carCardRight'>
            {picfile?.length > 0 ? <Carousel autoplay style={{ width: 200, height: 200, margin: "20px 10px" }}>
               {picfile?.map(v => <div style={{ width: 200, height: 200 }}>
                  <img className='picfileimg'
                     style={{ width: 200, height: 150, display: 'inline-block', }}
                     // src={`/_file-server/${v.storageUrl}`}
                     src={v.url}
                     width={`200px`}
                  />
               </div>)}
            </Carousel>
               : <div style={{
                  width: 200, height: 200, margin: "20px 0px 0px 20px",
               }} />
            }
            <div style={{ width: 240, marginLeft: 10, marginTop: 20, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
               <p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
                  执法日期:<span style={{
                     color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
                     overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
                  }}>
                     {enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
                  </span></p>
               <p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
                  执法道路:<span title={roadname} style={{
                     color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
                     overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
                  }}>
                     {roadname.length > 2 ? <Tooltip title={roadname}>{roadname.substring(0, 5) + '...'} </Tooltip> : roadname}
                  </span></p>
               <p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
                  执法成果:<span title={enforcementreslt} style={{
                     color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
                     overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
                  }}>
                     {enforcementreslt.length > 2 ? <Tooltip title={enforcementreslt}><span>{enforcementreslt.substring(0, 5) + '...'}</span> </Tooltip> : enforcementreslt}

                  </span></p>
            </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()
   // console.log(' renderContent.length', renderContent.length)
   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> */}
            <Module style={{ height: "100%" }} title="视频监控" customize={true}>
               <VideoMonitor />
            </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> */}
               {/* <div style={{ width: "90%", margin: "auto", display: "flex", color: "#FFF" }}>
                  <div style={{ width: '50%', textAlign: "center" }}>执法日期</div>
                  <div style={{ width: '50%', textAlign: "center", }}>执法成果</div>
               </div> */}
               {rightitemlist && rightitemlist.length !== 0 ? <AutoRollComponent content={renderContent}
                  containerStyle={{ position: "relative", height: "100%", margin: "20px" }}
                  divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "20%" }} />}

               {/* {
                  renderContent.length > 3 ? <Carousel
                     autoplay
                     infinite
                     // autoplaySpeed={300000}
                     autoplaySpeed={1000 * 3}
                     vertical={true}
                  //slidesToShow={3}
                  >

                     {renderContent}
                  </Carousel> : renderContent
               } */}
            </Module>
         </div >
      </>
   )
}
function mapStateToProps(state) {
   const { auth, depMessage, global } = 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);