import { DualAxes } from "@ant-design/plots";
import React from "react";
import { Column } from "@ant-design/charts";
import numeral from "numeral";

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

}
const planRevenue = (props: any) => {
  const config = {
    animate: false,
    data: [props?.data.line, props?.data.count],
    xField: 'time',
    yField: ['value', '计划完成度'],
    limitInPlot: false,
    padding: [22, 20, 10, 30],
    title: "金额(万元)",
    yAxis: {
      // 格式化左坐标轴
      label: "金额(万元)",
      value: {
        min: 0,
        max: getSplitNumber(props?.data.lineMax),
        label: {
          formatter: (val: any) => `${val}`,
        },
      },
      // 隐藏右坐标轴
      '计划完成度': {
        min: 0,
        max: getSplitNumber(props?.data.countMax),
        label: {
          formatter: (val: any) => `${val}%`,
        },
      },
    },
    tooltip: {
      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 === '计划完成度' ? `${item.value}%` : fmoney(item.data.realValue)}
                        </span>
                      </div>
                    )
                  })
                  : ''
              }
            </div>

          </div>
        )
      }
    },

    geometryOptions: [
      {
        geometry: 'column',
        isGroup: true,
        seriesField: 'type',
        columnWidthRatio: 0.4,
        label: {},
        color: ['#5B8FF9', '#5D7092'],
      },
      {
        geometry: 'line',
        color: '#5AD8A6',
      },
    ],
  };
  return <DualAxes style={{ height: '400px' }} {...config} />;
}
export default planRevenue




// import { DualAxes } from '@ant-design/charts';

// const planRevenue = (props: any) => {
//   console.log('props', props);

//   const config = {
//     animate: false,
//     // data: [props?.data.line, props?.data.count],
//     xField: 'time',
//     // yField: ['value', '计划完成度'],
//     // limitInPlot: false,
//     // padding: [22, 20, 10, 30],
//     // title: "金额(万元)",
//     legend: {
//       color: {
//         position: 'top',
//         layout: { justifyContent: 'flex-start' },
//       },
//     },
//     scale: { color: { range: ['#5B8FF9', '#5D7092', '#5AD8A6'] } },
//     children: [
//       {
//         data: props?.data.count,
//         type: 'line',
//         yField: '计划完成度',
//         style: { lineWidth: 2 },
//         axis: { y: { position: 'right' } },
//       },
//       {
//         data: props?.data.line,
//         type: 'interval',
//         yField: 'value',
//         colorField: 'type',
//         group: true,
//         style: { width: 30 },
//         label: { position: 'inside' },
//       },
//     ]


//     // yAxis: {
//     //   // 格式化左坐标轴
//     //   label: "金额(万元)",
//     //   value: {
//     //     min: 0,
//     //     max: getSplitNumber(props?.data.lineMax),
//     //     label: {
//     //       formatter: (val: any) => `${val}`,
//     //     },
//     //   },
//     //   // 隐藏右坐标轴
//     //   '计划完成度': {
//     //     min: 0,
//     //     max: getSplitNumber(props?.data.countMax),
//     //     label: {
//     //       formatter: (val: any) => `${val}%`,
//     //     },
//     //   },
//     // },
//     // tooltip: {
//     //   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 === '计划完成度' ? `${item.value}%` : fmoney(item.data.realValue)}
//     //                     </span>
//     //                   </div>
//     //                 )
//     //               })
//     //               : ''
//     //           }
//     //         </div>

//     //       </div>
//     //     )
//     //   }
//     // },

//     // geometryOptions: [
//     //   {
//     //     geometry: 'column',
//     //     isGroup: true,
//     //     seriesField: 'type',
//     //     columnWidthRatio: 0.4,
//     //     label: {},
//     //     color: ['#5B8FF9', '#5D7092'],
//     //   },
//     //   {
//     //     geometry: 'line',
//     //     color: '#5AD8A6',
//     //   },
//     // ],
//   };
//   return <DualAxes style={{ height: '400px' }} {...config} />;
// }
// export default planRevenue

