/*
 * @Author: cclu
 * @Date: 2022-04-28 10:47:36
 * @LastEditTime: 2022-04-28 18:45:01
 * @LastEditors: Please set LastEditors
 * @Description: 至2022年底整体完成进度 组件
 * @FilePath: \cloud-platform\src\pages\busniess\analysis\components\ProportionSales.tsx
 */

import { Pie, G2, Progress, Liquid } from "@ant-design/charts";
import { Card, Col, Row, Typography } from "antd";
import numeral from 'numeral';

import type { RadioChangeEvent } from "antd/es/radio";

type ProportionSalesProps = {
	salesType?: 'business' | 'customer' | 'yearwest',
	loading: boolean,
	salesPieData: any,
	handleChangeSalesType?: (e: RadioChangeEvent) => void
}

const ProportionSales = ({ loading, salesPieData, }: ProportionSalesProps) => {
	const G = G2.getEngine('canvas');
	// 水波进度配置
	const liquidConfig = {
		height: 300,
		padding: 32,
		autoFit: true,
		color: "#3EC6C5",
		percent: !loading && salesPieData ? salesPieData?.Paid_Amount / salesPieData?.Expired_Amount : 0,
		outline: {
			border: 3,
			distance: 6,
		},
		wave: {
			length: 138,
		},
		statistic: {
			offsetY: -8,
			title: {
				style: {
					color: 'rgba(0,0,0,0.25)',
					fontSize: '14px',
					lineHeight: '14px',

					whiteSpace: 'pre-wrap',
					overflow: 'hidden',
					textOverflow: 'ellipsis',


				},
				customHtml: () => {

					// eslint-disable-next-line no-nested-ternary
					return '到期金额收款进度';

				},

			},
			content: {
				offsetY: 8,
				style: {
					// color: colors[i],

					fontSize: 26,
					fontFamily: "Bahnschrift Regular",
				},
				customHtml: (container: any, view: any, datum: { percent: number; }) => {
					// const { width } = container.getBoundingClientRect();


					return <>
						<div>{numeral(datum?.percent * 100).format("0.[00]")}%</div>
						<div style={{ fontSize: 20 }}><><Typography.Text> {numeral(salesPieData?.Paid_Amount).format('0,0.[0000]')} </Typography.Text>
							<Typography.Text type="secondary" style={{ fontSize: 12, fontWeight: 500 }}>万元</Typography.Text></></div>
					</>

				},
			}
		}
	};
	// 饼图配置
	const config = {
		appendPadding: 22,
		data: !loading ? salesPieData?.contractPie : [],
		angleField: 'value',
		colorField: 'type',
		radius: 0.82,
		innerRadius: 0.7,
		legend: false,
		height: 300,
		tooltip: false,
		autoFit: true,
		color: ["#5B8FF9", "#F3BF2C",],
		statistic: {
			title: {
				offsetY: -12,
				style: {
					whiteSpace: 'pre-wrap',
					overflow: 'hidden',
					textOverflow: 'ellipsis',
					fontSize: 14
				},
				customHtml: (container: any, view: any, datum: { type: string; }) => {

					// eslint-disable-next-line no-nested-ternary
					return datum ? datum.type.replace("金额", "占比") : '账款总金额';

				},
			},
			content: {
				offsetY: -2,
				style: {
					whiteSpace: 'pre-wrap',
					overflow: 'hidden',
					textOverflow: 'ellipsis',
					fontSize: 22,
					fontWeight: 500,
					fontFamily: "Bahnschrift Regular"

				},
				customHtml: (container: any, view: any, datum: { value: any; }, data: any[]) => {
					// const { width } = container.getBoundingClientRect();

					const total = data.reduce((r, d) => r + d.value, 0)

					return datum ? `${numeral(datum.value).divide(total).multiply(100).format('0,0.[00]')}%` :
						<><Typography.Text>{numeral(total).format('0,0.[000000]')} </Typography.Text><Typography.Text type="secondary" style={{ fontSize: 12, fontWeight: 500 }}>万元</Typography.Text></>;

				},
			},
		},
		label: {
			type: 'spider',
			labelHeight: 28,

			formatter: (data: { type: any; value: any; }, mappingData: { color: any; }) => {
				const group = new G.Group({});
				// group.addShape({
				// 	type: 'circle',
				// 	attrs: {
				// 		x: 0,
				// 		y: 0,
				// 		width: 6,
				// 		height: 6,
				// 		r: 5,
				// 		fill: mappingData.color,
				// 	},
				// });
				group.addShape({
					type: 'text',
					attrs: {
						x: 10,
						y: 8,
						text: `${data.type}`,
						fill: mappingData.color,
						fontSize: 14
					},
				});
				group.addShape({
					type: 'text',
					attrs: {
						x: 10,
						y: 32,
						text: `${numeral(data.value).format('0,0.[000000]')}万元`,
						fill: 'rgba(0, 0, 0, 0.65)',
						fontSize: 14
						//   fontWeight: 500,
					},
				});
				return group;
			}
		},
		interactions: [
			{
				type: 'element-selected',
			},
			// {
			//   type: 'element-active',
			// },
			{
				type: 'pie-statistic-active',
			},
			{
				type: 'element-highlight',
			},
		],
		state: {
			// 设置 active 激活状态的样式
			active: {
				//   animate: { duration: 100, easing: 'easeLinear' },
				style: {
					lineWidth: 0,

				},
			},
		}
	}

	return (
		<Card
			title="至2022年底整体完成进度"
			loading={loading}
			style={{ position: "relative", height: 380, marginBottom: 24 }}
			bodyStyle={{ padding: 0 }}
		>
			<Row align="top">
				<Col span={9}>
					<Liquid  {...liquidConfig} />
					{/* <Typography.Text type="secondary" >收款占比:</Typography.Text>  */}
				</Col>
				<Col span={15}>
					<Pie
						{...config}
						// onReady={(plot) => {

						// 	plot.on('element:click', (evt) => {
						// 		const { data } = evt

						// 		console.log(data);
						// 	});

						// }}
					/>
				</Col>
			</Row>
		</Card>
	);
}

export default ProportionSales;


