import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
import { Box, YSIframePlayer } from '$components';
import { Select } from 'antd';
import PerfectScrollbar from "perfect-scrollbar";
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import './style.less';

let roadScrollbar
let describeScrollbar
const DataTop5 = ({ dispatch, actions, longitudeLatitude }) => {
   const [videoList, setVideoList] = useState([])
   const [roadData, setRoadData] = useState({})
   const [traffic, setTraffic] = useState({})
   let weeks = { 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六', 7: '周日' }

   useEffect(() => {
      dispatch(actions.firecontrol.getDetails()).then(res => {
         if (res.success) {
            setTraffic(res.payload.data?.data?.detail || {});
         }
      })
      const dom1 = document.getElementById("road");
      if (dom1) {
         roadScrollbar = new PerfectScrollbar("#road", {
            suppressScrollX: true,
         });
      }
      const dom2 = document.getElementById("describe");
      if (dom2) {
         describeScrollbar = new PerfectScrollbar("#describe", {
            suppressScrollX: true,
         });
      }
   }, [])

   useEffect(() => {
      const dom1 = document.getElementById("road");
      if (dom1) {
         roadScrollbar = new PerfectScrollbar("#road", {
            suppressScrollX: true,
         });
      }
      const dom2 = document.getElementById("describe");
      if (dom2) {
         describeScrollbar = new PerfectScrollbar("#describe", {
            suppressScrollX: true,
         });
      }
   }, [roadData])

   useEffect(() => {

      const dom1 = document.getElementById("road");
      if (dom1 && roadScrollbar) {
         roadScrollbar.update();
      }
      const dom2 = document.getElementById("describe");
      if (dom2 && describeScrollbar) {
         describeScrollbar.update();
      }
   })

   useEffect(() => {
      if (longitudeLatitude?.latitude && longitudeLatitude?.longitude) {
         dispatch(actions.firecontrol.getSurroundingConditions({
            // center: `30.576279,104.071216`
            center: `${longitudeLatitude?.latitude},${longitudeLatitude?.longitude}`
         })).then(res => {
            if (res.success) {
               setRoadData(res.payload.data || {})
            }
         })
      }

   }, [longitudeLatitude])

   let evaluation = { 0: '未知路况', 1: '畅通', 2: '缓行', 3: '拥堵', 4: '严重拥堵' }
   let evaluationColor = { 0: 'rgb(151 175 164)', 1: '#00FF87', 2: '#FFCC00', 3: '#DE0102', 4: '#8E0E0B' }

   let trend = { SAME: '持平', BETTER: '缓解', WORSE: '加重' }

   return <div style={{ height: '100%', width: '100%', margin: "0px 0px 28px" }}>
      <div style={{
         height: "100%", listStyle: 'none',

      }}>
         <div className='box_header_bg'  >
            <span className='card-title'>周边路况实时数据</span>
         </div>
         <div className='children-container' style={{ padding: '20px', height: 'calc(100% - 40px)', widthF: 'calc(100% - 40px)' }}>
            {longitudeLatitude?.longitude ?
               <>
                  {
                     (roadData?.description || roadData?.road_traffic?.length > 0 || roadData?.evaluation?.status_desc) ? <>
                        <div style={{ display: "flex", justifyContent: "space-between" }}>
                           <div style={{ fontFamily: 'SourceHanSansCN-Bold', fontWeight: 700, fontSize: 18, display: "flex", alignItems: "center" }}>
                              <img src='/assets/images/homepage/bigscreen/road.png' style={{ width: 20 }} />
                              路况描述：</div>
                           <div style={{ display: 'flex', alignItems: "center" }}>
                              <div style={{ fontSize: 14, color: "#C0E2FF", marginRight: 10 }}>路况整体评价</div>
                              <div style={{
                                 fontFamily: "YouSheBiaoTiHei", fontSize: 28, letterSpacing: 2,
                                 color: evaluationColor[roadData?.evaluation?.status]
                              }}>{evaluation[roadData?.evaluation?.status] || '--'}</div>
                           </div>
                        </div>
                        <div id="describe" style={{ height: "25%", width: "90%", color: " C3E6FF", margin: '0 aut0', position: 'relative', textIndent: 20, }}>
                           {roadData?.description || '暂无描述'}
                        </div>
                        <div id='road' style={{ width: "100%", height: "calc(75% - 60px)", position: 'relative', marginTop: 20 }}>
                           {roadData.road_traffic?.find(f => f.congestion_sections?.length > 0) ?
                              roadData?.road_traffic?.map(v => (v.congestion_sections?.length > 0) ?
                                 <>
                                    <div style={{ fontFamily: 'SourceHanSansCN-Bold', fontWeight: 700, fontSize: 18, display: "flex", alignItems: "center" }}>
                                       <img src='/assets/images/homepage/bigscreen/road.png' style={{ width: 20 }} />
                                       {v.road_name}：</div>
                                    {
                                       v.congestion_sections?.map(s => <>
                                          <div style={{ color: " C3E6FF", margin: "4px 0" }}>{s.section_desc || "暂无路段拥堵语义化描述"}</div>
                                          <div style={{
                                             height: 140, display: "flex", marginBottom: 10,
                                             background: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)'
                                          }}>
                                             <div style={{ width: "34%", display: 'flex', flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
                                                <div style={{
                                                   fontFamily: "YouSheBiaoTiHei", fontSize: 28, letterSpacing: 2,
                                                   color: (traffic?.index >= 1 && traffic?.index < 1.5) ?
                                                      "#00FF87" : (traffic?.index >= 1.5 && traffic?.index < 1.8) ?
                                                         "#FFCC00;" : (traffic?.index >= 1.8 && traffic?.index < 2) ?
                                                            "#DE0102;" : (traffic?.index >= 2) ? "#8E0E0B;" : ""
                                                }}>{trend[s.congestion_trend] || "--"}</div>
                                                <div style={{ fontSize: 14, color: "#C0E2FF", textAlign: 'center' }}>
                                                   {
                                                      s.congestion_trend == "SAME" ? '与10分钟前变化不大'
                                                         : s.congestion_trend == 'BETTER' ? '较10分钟前拥堵有所缓解'
                                                            : s.congestion_trend == 'WORSE' ? '较10分钟前拥堵加重' : '--'
                                                   }
                                                </div>
                                             </div>
                                             <div style={{ width: "62%", display: 'flex', }}>
                                                <div style={{ width: "50%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", alignItems: "center" }}>
                                                   <div style={{ height: 22, background: "rgb(0 88 204 / 50%)", width: '90%', textAlign: 'center' }}>平均通行速度</div>
                                                   <div ><div style={{ display: 'inline-block', transform: 'skewX(-8deg)', fontSize: 20, fontFamily: "D-DINExp-Italic", }}>{s.speed || '--'}</div> <span style={{ color: '#00FF87', marginLeft: 6 }}>km/h</span></div>
                                                </div>
                                                <div style={{ width: "50%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", alignItems: "center" }}>
                                                   <div style={{ height: 22, background: "rgb(0 88 204 / 50%)", width: '90%', textAlign: 'center' }}>拥堵距离</div>
                                                   <div ><div style={{ display: 'inline-block', transform: 'skewX(-8deg)', fontSize: 20, fontFamily: "D-DINExp-Italic", }}>{s.congestion_distance || '--'}</div><span style={{ color: '#00FF87', marginLeft: 6 }}>m</span> </div>
                                                </div>
                                             </div>
                                          </div>
                                       </>)
                                    }

                                 </>
                                 : <></>)
                              :
                              <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 28, lineHeight: "100px", textAlign: 'center', color: '#afa2a2cf' }}>
                                 暂无具体道路信息
                              </div>
                           }

                        </div>
                     </>
                        :
                        <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 28, lineHeight: "100px", textAlign: 'center', color: '#afa2a2cf' }}>
                           暂无数据
                        </div>}
               </>
               : <>
                  <div style={{
                     background: 'url(/assets/images/homepage/bigscreen/background_n.png)',
                     backgroundSize: '100% 20px', backgroundPosition: '0 14px', backgroundRepeat: 'no-repeat',
                     display: 'flex', alignItems: 'center', justifyContent: "space-between", padding: '0 6px',
                  }}>
                     <div style={{
                        fontFamily: 'YouSheBiaoTiHei', fontSize: 20
                     }}
                     >
                        南昌市</div>
                     <div style={{
                        fontFamily: 'YouSheBiaoTiHei', fontSize: 14
                     }}
                     >NANCHANG CITY</div>
                  </div>
                  <div style={{
                     height: "calc(100% - 38px)", marginTop: 20, display: 'flex', flexDirection: 'column', justifyContent: 'space-around',

                  }}>
                     <div style={{
                        height: "23%", display: "flex",
                        background: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)'
                     }}>
                        <div style={{ width: "34%", display: 'flex', flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
                           <div style={{
                              fontFamily: "YouSheBiaoTiHei", fontSize: 28, letterSpacing: 2,
                              color: (traffic?.index >= 1 && traffic?.index < 1.5) ?
                                 "#00FF87" : (traffic?.index >= 1.5 && traffic?.index < 1.8) ?
                                    "#FFCC00;" : (traffic?.index >= 1.8 && traffic?.index < 2) ?
                                       "#DE0102;" : (traffic?.index >= 2) ? "#8E0E0B;" : ""
                           }}>{
                                 (traffic?.index >= 1 && traffic?.index < 1.5) ?
                                    "畅通" : (traffic?.index >= 1.5 && traffic?.index < 1.8) ?
                                       "缓行" : (traffic?.index >= 1.8 && traffic?.index < 2) ?
                                          "拥堵" : (traffic?.index >= 2) ? "严重拥堵" : ""
                              }</div>
                           <div style={{ fontSize: 14, color: "#C0E2FF;" }}>路况整体评价</div>
                        </div>
                        <div style={{ width: "62%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", }}>
                           <div style={{ height: 22, background: "rgb(0 88 204 / 50%)", textIndent: 20 }}>实时拥堵指数</div>
                           <div style={{ display: "flex", alignItems: 'center' }}>
                              <div style={{ fontSize: 28, transform: 'skewX(-8deg)', fontFamily: "D-DINExp-Italic", fontWeight: 'Italic', color: '#ECF7FF', marginRight: 4 }}>{traffic?.index || '--'}</div>
                              <div style={{ color: '#C3E6FF' }}>
                                 较上周同期{traffic?.last_index > traffic?.index ? "下降" : '上升'}
                                 {((traffic?.last_index > traffic?.index ? (traffic?.last_index - traffic?.index) / traffic?.last_index : (traffic?.index - traffic?.last_index) / traffic?.last_index) * 100).toFixed(2)}%
                              </div>
                              {traffic?.last_index > traffic?.index ?
                                 <ArrowDownOutlined style={{ color: '#06FF07', fontSize: 18 }} />
                                 : <ArrowUpOutlined style={{ color: '#06FF07', fontSize: 18 }} />}
                           </div>
                        </div>
                     </div>
                     <div style={{
                        height: "23%", display: "flex",
                        background: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)'
                     }}>
                        <div style={{ width: "34%", display: 'flex', flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
                           <img src='/assets/images/homepage/bigscreen/seniority.png' style={{ width: "80%" }} />
                        </div>
                        <div style={{ width: "62%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", }}>
                           <div style={{ height: 22, background: "rgb(0 88 204 / 50%)", textIndent: 20 }}>实时拥堵排行</div>
                           <div style={{ display: "flex", alignItems: 'center' }}>
                              <div style={{ fontSize: 28, fontFamily: "D-DINExp-Italic", transform: 'skewX(-8deg)', fontWeight: 'Italic', color: '#ECF7FF', marginRight: 4 }}>{traffic?.rank || '--'}</div>
                              <div style={{ marginRight: 16, fontSize: 20, transform: 'skewX(-8deg)' }}>/{traffic?.count || '--'}</div>
                              <div style={{ color: '#C3E6FF' }}>全国重点城市拥堵排行</div>

                           </div>
                        </div>
                     </div>
                     <div style={{
                        height: "23%", display: "flex",
                        background: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)'
                     }}>
                        <div style={{ width: "50%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", alignItems: "center" }}>
                           <div style={{ height: 22, background: "rgb(0 88 204 / 50%)", width: '90%', textAlign: 'center' }}>实时平均速度</div>
                           <div ><div style={{ display: 'inline-block', transform: 'skewX(-8deg)', fontSize: 28, fontFamily: "D-DINExp-Italic", }}>{traffic?.road_network_speed || '--'}</div> <span style={{ color: '#00FF87', marginLeft: 20 }}>km/h</span></div>
                        </div>
                        <div style={{ width: "50%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", alignItems: "center" }}>
                           <div style={{ height: 22, background: "rgb(0 88 204 / 50%)", width: '90%', textAlign: 'center' }}>实时严重拥堵里程</div>
                           <div ><div style={{ display: 'inline-block', transform: 'skewX(-8deg)', fontSize: 28, fontFamily: "D-DINExp-Italic", }}>{traffic?.yongdu_length_4 || '--'}</div><span style={{ color: '#00FF87', marginLeft: 20 }}>km</span> </div>
                        </div>
                     </div>

                     <div style={{
                        height: "23%", display: "flex",
                        background: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)'
                     }}>
                        <div style={{ width: "34%", display: 'flex', flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
                           <img src='/assets/images/homepage/bigscreen/dateDook.png' style={{ width: "80%" }} />
                        </div>
                        <div style={{ width: "62%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", }}>
                           <div style={{ height: 22, background: "rgb(0 88 204 / 50%)", textIndent: 20 }}>近30日最高拥堵指数</div>
                           <div style={{ display: "flex", alignItems: 'center' }}>
                              <div style={{ fontSize: 28, fontFamily: "D-DINExp-Italic", fontWeight: 'Italic', color: '#ECF7FF', marginRight: 38 }}>{traffic?.month_max_yongdu_index?.toFixed(3) || '--'}</div>
                              <div style={{ color: '#C3E6FF' }}>{traffic?.month_max_congest_time} {weeks[traffic?.month_max_week_day]}</div>
                           </div>
                        </div>
                     </div>
                  </div></>

            }

         </div>

      </div>
   </div >
}
function mapStateToProps(state) {
   const { auth, global } = state
   return {
      user: auth.user,
      actions: global.actions,
   }
}
export default connect(mapStateToProps)(DataTop5);