import React from 'react'
import './style.less'
import AutoRollComponent from './AutoRollComponent'
export default function Rightcenter({data,sundata}) {
  // const data =[ {name: '莲塘镇', total: 12739},
  // {name: '向塘镇', total: 2445},
  // {name: '蒋巷镇', total: 2035},
  // {name: '幽兰镇', total: 1999},
  // {name: '塘南镇', total: 1915},
  // {name: '武阳镇', total: 1842},
  // {name: '冈上镇', total: 1446},
  // {name: '广福镇', total: 1063},
  // {name: '三江镇', total: 851},
  // {name: '泾口乡', total: 657},
  //  {name: '南新镇', total: 640},
  //  {name: '八一乡', total: 569},
  //  {name: '黄马乡', total: 541},
  //  {name: '塔城乡', total: 534},
  //  {name: '富山乡', total: 515},
  //  {name: '东新乡', total: 513},
  //  {name: '银三角', total: 513},
  //  {name: '八月湖街道', total: 513},]
  //  const province = undefined
  const FIRST = "linear-gradient(360deg, rgba(43, 180, 211, 0.1) 0%, rgba(43, 180, 211, 0.4) 100%)"
const SECOND = "linear-gradient(360deg, rgba(255, 209, 86, 0.1) 0%, rgba(255, 209, 86, 0.4) 100%)"
const THIRD = "linear-gradient(360deg, rgba(148, 148, 255, 0.1) 0%, rgba(148, 148, 255, 0.4) 100%)"
const OTHER = "linear-gradient(360deg, rgba(28, 96, 253, 0) 0%, rgba(28, 96, 253, 0.2) 100%)"
let TOTALS = data?.map(({ name, total }, index) => {
  let max = Math.max(...data.map(item=>item.total))
  console.log(data.map(item=>item.total),'好朋友吗')
  return {
    name,
    value: total,
    percent: (total * 100 / max).toFixed(2) + "%"
  }
})
let new_TOTALS = TOTALS && TOTALS.length > 10 ? TOTALS.slice(0, 10) : TOTALS
function Cell(props) {
  const { name, rank, value, percent, style = {},cebg } = props
  let bg = RNAKS[rank] || OTHER
  console.log(percent,'百分比')
  return <div style={{
    width: "100%", height: 34, display: "flex", justifyContent: 'center',
    alignItems: "center", marginTop: 7, marginBottom: 7,
    padding: "0 2%",
    ...style
  }}>
    <div style={{
        height: 20, color: "white",whiteSpace:'nowrap',
      fontSize: 10, fontWeight: "bold", display: 'flex',
      alignItems: "center", justifyContent: "center"
    }} >
      {name}
    </div>
    <div style={{ width: "92%", marginLeft: 10 }}>
      {/* <div style={{ width: "100%", height: 18, fontSize: 12, fontWeight: 400, color: "white" }}>{name}</div> */}

      <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", height: 13 }}>
       <div style={{display:'flex', width:"85%"}}>
          <div style={{
            position:'relative',
          width: percent, height: 5,
          background: cebg || "linear-gradient(270deg, #1C60FE 0%, rgba(28, 96, 254, 0) 100%)"
            }} >{cebg?<span style={{position:'absolute',right:'0',top:'0',backgroundColor:"#FFF",height:"5px",width:"5px",borderRadius:"2.5px"}}/>:""}</div>
            
            <div style={{width:`calc(100% - ${percent})`,background:'rgba(255,255,255,0.0800)'}}/>
          </div>
        <div style={{ marginLeft: 10, fontSize: 12,color:"#FFFFFF" }}>{value}</div>
      </div>
    </div>
  </div>
}
const renderContent = () => {
 
  return new_TOTALS?.map(({ name, value, percent }, index) => {
      return <Cell key={index} rank={index} name={name} value={value} percent={percent} cebg={index===0?'linear-gradient(63deg, rgba(16, 39, 75, 1) 0%, rgba(7, 185, 254, 1) 100%)':undefined}/>
    })
  
}
const RNAKS = [FIRST, SECOND, THIRD]
 
  return (
    <div className='build-right-center'>
      <div className='build-right-center-top'>
        <img src="/assets/images/quanju/gonglugongcheng.png"></img>
        <div>在建公路工程数量</div>
        <h2>{sundata}</h2>
      </div>
      <AutoRollComponent content={renderContent()}
    containerStyle={{ position: "relative", height: "65%", }}
    divHeight={"100%"} divId={"chart-overview-deviceList"} />
    </div>
  )
}