// 车辆归属地
import {Pie} from "@ant-design/charts";
import React, {useEffect, useRef} from "react";
import './trafficFlow.less'

// 传入的props的值有  均来自serverpart
// data 即trafficProvinceListRef.current 左侧圆环图的数据
// cityList 即trafficCityRef?.current  右侧城市车辆占比的进度条一样的表格
// changeCityList serverPart界面中承接组件和页面的方法 处理一些组件传出的数据 再调用页面的方法
// carType 当前选中的车型
// selectProvinceName  当前选中的省份名称
// showProvinceValue  当前选中省份的车辆数
// backTime  选中的时间
const trafficFlow = (props: any) => {
  useEffect(()=>{
    // month.current = props
  },[props])
  const noDecimal = (s: number) => {
    let fuhao = ''; // 如果数字小于零则值为-
    if (s < 0) {
      s = Math.abs(s);
      fuhao = '-'
    }
    s = `${parseFloat((`${s}`).replace(/[^\d\.-]/g, ""))}`
    const l = s.split(".")[0].split("").reverse(); const r = s.split(".")[1];
    let t = ''
    for (let i = 0; i < l.length; i++) {
      t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
    }
    return fuhao + [...t].reverse().join("")
  }
  console.log('propsssssssss',props)
  const pieConfig = {
    height:400,
    animation: false,
    appendPadding: 10,
    data:props.data,
    angleField: 'rate',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.6,
    label: {
      type: 'inner',
      offset: '-50%',
      content: '{name}',
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],

    tooltip: {
      trigger: 'axis',
      customContent: (title, params) => {
        return (
          <div style={{ padding: '10px' }}>
            <div style={{ marginTop: '8px' }}>
              {
                params && params.length > 0 ?
                  params.map((item: any) => {
                    return (
                      <div style={{ marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
                        <div style={{ width: '8px', marginRight: '4px', height: '8px', background: item.color, borderRadius: '50%' }}></div>
                        <span style={{ display: 'inline-block', width: '100px', textAlign: 'left' }}>{item.name}:</span>
                        <span>{`${noDecimal(item.data.value)}辆`}</span>
                      </div>
                    )
                  })
                  : ''
              }
            </div>

          </div>
        )
      }
    },

    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          fontSize:'26px'
        },
        // content: props.selectProvinceName.current.indexOf(',')===-1?props.selectProvinceName.current:'其他',
        customHtml: () => {
          // eslint-disable-next-line no-nested-ternary
          return <div style={{display:'flex',justifyContent:'center',alignItems:'center',flexDirection:'column'}}>
            <span>{props.selectProvinceName.indexOf(',')===-1?props.selectProvinceName:'其他'}</span>
            <span>{props.showProvinceValue?`${noDecimal(props.showProvinceValue)}辆`:''}</span>
          </div>

        },
      },
    },
  }

  console.log('pieConfig',pieConfig)

  return (
    <div className={'trafficFlowBox'}>
      <div className={'leftPie'}>
        <Pie style={{ width: '100%', height: '400px' }} {...pieConfig}
          onReady={(plot)=>{
            plot.on('click',(evt: any)=>{
              if (evt.data){
                if (evt.data.data.type==='其他'){
                  let str: string = ''
                  props.data.forEach((item: any)=>{
                    if (item.type!=='其他'){
                      if (str===''){
                        str = item.type
                      }else{
                        str += `,${item.type}`
                      }
                    }
                  })
                  props.changeCityList(str,evt.data.data.value,props.carType.current,props.backTime.current)
                }else{
                  props.changeCityList(evt.data.data.type,evt.data.data.value,props.carType.current,props.backTime.current)
                }
              }
            })
          }}
        />
      </div>
      <div className={'rightPie'}>
        {
          props.cityList && props.cityList.length>0?
            <>
            {
              props.cityList.map((item: any)=>{
                return <div className={'item'}>
                  <div className={'itemTop'}>
                    <span className={'itemText'}>{item.type}</span>
                    <span className={'itemText'}>{`${(item.rate).toFixed(2)  }%`}</span>
                  </div>
                  <div className={'itemBottom'}>
                    <div className={'progress'} style={{width:`${item.rate}%`}}></div>
                  </div>

                  <div className={'notice'}>{`${noDecimal(item.value)}辆`}</div>
                </div>
              })
            }
            </>:''
        }
      </div>
    </div>
  )
}

export default trafficFlow
