import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { DualAxes } from '@ant-design/plots';
import PieCard from "@/pages/dashboard/monitor/components/pieCard";

const carPic = (props: any) => {
  // props.isShowDetail  判断是否时抽屉点进来还是外面点进来  true是外面
  const fmoney = (s: number, n?: number) => {
    /*
     * 参数说明：
     * s：要格式化的数字
     * n：保留几位小数
     * */
    n = n > 0 && n <= 20 ? n : s.toString().indexOf('.') === -1 ? 0 : s.toString().indexOf('.') > -1 ? s.toString().split('.')[1].length : 2;
    let fuhao = ''; // 如果数字小于零则值为-
    if (s < 0) {
      s = Math.abs(s);
      fuhao = '-'
    }
    s = `${parseFloat((`${s}`).replace(/[^\d\.-]/g, "")).toFixed(n)}`;
    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 ? "," : "");
    }
    if (n === 0) {
      return s
    }
    return `${fuhao + [...t].reverse().join("")}.${r}`;

  }

  const  getSplitNumber= (value)=>{
    if (value){
      const num = value.toString().indexOf('.')=== -1 ? value.toString().length: value.toString().indexOf('.')
      const size = Math.pow(10,num-1)
      const number = (parseInt(value / size) + 1) * size
      if (value===0){
        return 3
      }
      // let sum = Number(value) + Number(value) *0.4
      return number

    }
  }
  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('props',props)
  const config = {
    height:400,
    data: [props.pieLists, props.pieLines],
    xField: 'time',
    yField: ['value', 'count'],
    limitInPlot: false,
    padding: [32, 20, 10, 30],
    legend: {
      selected: {
        '服务区营业额': !!props.isShowDetail,
        '门店营业额': !props.isShowDetail
      }
    },
    yAxis: {
      value: {
        min: 0,
        max: props.inDrawer ?getSplitNumber(props?.maxObject.current.RevenueMax) : getSplitNumber(props?.revenueMax),
        label: {
          formatter: (val: any) => `${val}`,
        },
      },
      count: {
        min: 0,
        max: props.inDrawer ?getSplitNumber(props?.maxObject.current.CarMax):getSplitNumber(props?.carMax),
        label: {
          formatter: (val: any) => `${val}`,
        },
      }
    },
    label:{
      position:'top'
    },
    animation: false,
    geometryOptions: [
      {
        geometry: 'column',
        isGroup: true,
        seriesField: 'type',
        columnWidthRatio: 0.4,
        label:{
          position: 'top',
        }
      },
      {
        geometry: 'line',
        seriesField: 'name',
        lineStyle: ({ name }) => {
          if (name === 'a') {
            return {
              lineDash: [1, 4],
              opacity: 1,
            };
          }
          return {
            opacity: 0.5,
          };
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
      customContent: (title, params) => {
        return (
          <div style={{ padding: '10px' }}>
            {
              title ?
                <span style={{ marginBottom: '8px' }}>{title}</span> : ''
            }
            <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 style={{ display: 'inline-block', width: '100px', textAlign: 'right' }}>
                          {item.name.indexOf('营业额') !== -1 ? item.data.realValue?fmoney(item.data.realValue, 2):fmoney(item.data.value, 2) :
                            item.data.realCount?noDecimal(item.data.realCount):noDecimal(item.data.count)}</span>
                      </div>
                    )
                  })
                  : ''
              }
            </div>

          </div>
        )
      }
    }
  }

  const sectionFlowConfig = {
    data: [props.sectionList, props.entryRef],
    height:400,
    xField: 'time',
    yField: ['value', 'count'],
    padding: [32, 20, 10, 30],
    yAxis: {
      value: {
        min: 0,
        max: getSplitNumber(props?.sectionMax),
      },
      count: {
        min: 0,
        max: getSplitNumber(props?.entryMax),
      }
    },
    animation: false,
    geometryOptions: [
      {
        geometry: 'column',
        isGroup: true,
        seriesField: 'type',
        columnWidthRatio: 0.4,
        label:{
          position: 'top',
        }
      },
      {
        geometry: 'line',
        seriesField: 'name',
        lineStyle: ({ name }) => {
          if (name === 'a') {
            return {
              lineDash: [1, 4],
              opacity: 1,
            };
          }
          return {
            opacity: 0.5,
          };
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
      customContent: (title, params) => {
        return (
          <div style={{ padding: '10px' }}>
            {
              title ?
                <span style={{ marginBottom: '8px' }}>{title}</span> : ''
            }
            <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 style={{ display: 'inline-block', width: '100px', textAlign: 'right' }}>
                          {item.name.indexOf('入区率')!==-1? `${item.data.realCount}%` : noDecimal(item.data.realValue)}</span>
                      </div>
                    )
                  })
                  : ''
              }
            </div>

          </div>
        )
      }
    }
  }
  return <div>
    {
      props.showPlanCharts && props.showPlanCharts.current && props.sectionList.length>0?
        <div style={{ width: '100%', height: '400px',position:'relative' }}>
              <span style={{position:'absolute',fontSize:'14px',color:'#a69e9f',top:'25px'}}>单位：万元</span>
          <DualAxes style={{ width: '100%', height: '400px',marginBottom:'10px' }} {...sectionFlowConfig} />
        </div>
       :<></>
    }
    {
     props.pieLists.length>0 ||  props.pieLines.length>0?
       <div style={{ width: '100%', height: '400px',position:'relative',marginTop:'12px' }}>
         {
           !props.noShowUnit?
         <span style={{position:'absolute',fontSize:'14px',color:'#a69e9f',top:'25px'}}>单位：万元</span>:''
         }
         <DualAxes style={{ width: '100%', height: '400px' }} {...config} />
       </div>:<></>
    }
  </div>
}

export default carPic
