import { Table, Popover } from 'antd';
import config from '@/webPublic/one_stop_public/config';
import table from '../assets/专家经验系统切图/智能报告/table.png';
import chart from '../assets/专家经验系统切图/智能报告/chart.png';
import React from 'react';
import { connect } from 'dva';
import { queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';
const ReactHighcharts = config.ReactHighcharts;

@connect(({ Report, loading }) => ({
	Report,
	loading: loading.models.Report,
}))
class ChartComponent extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			dataSource: [],
			columns: [],
			chartConfig: {},
		};
	}
	componentDidMount() {
		const { dispatch, data, userId } = this.props;

		dispatch({
			type: 'Report/getStatistics',
			payload: { ...data, studentId: userId },
			callback: (res) => {
				const { chartType, chartTitle } = data;
				if (chartType == '0') {
					this.setState({ ...res });
				} else {
					const cts = [];
					const series = [];
					const { columns, dataSource } = res;
					for (var i = 1; i < columns.length - 1; i++) {
						cts.push(columns[i].title);
					}

					for (var j = 0; j < dataSource.length - 1; j++) {
						const obj = dataSource[j];

						const ob = { name: obj[columns[0].dataIndex] };
						const dd = [];
						for (var i = 1; i < columns.length - 1; i++) {
							dd.push(obj[columns[i].dataIndex]);
						}
						ob.data = dd;
						series.push(ob);
					}
					const chartConfig = {
						chart: {
							type: chartType,
						},
						title: {
							text: chartTitle,
						},
						xAxis: {
							categories: cts,
						},
						tooltip: {
							pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
						},

						plotOptions: {
							line: {
								dataLabels: {
									// 开启数据标签
									enabled: true,
								},
								// 关闭鼠标跟踪,对应的提示框、点击事件会失效
								enableMouseTracking: false,
							},
						},
						series: series,
					};

					this.setState({ chartConfig });
				}
			},
		});
	}
	edit = () => {
		const { data, editKey, editBlock } = this.props;

		editBlock(true, editKey, data);
	};
	render() {
		const content = (
			<div>
				<a onClick={this.edit}>编辑</a>
			</div>
		);
		const { isView, data } = this.props;

		const { chartConfig, dataSource, columns } = this.state;
		const { chartType, chartTitle } = data;

		if (isView) {
			if (chartType == '0') {
				if (columns.length > 5) {
					columns[0].fixed = 'left';
					columns[0].width = 200;
					columns[0].title = chartTitle;
					for (var i = 1; i < columns.length; i++) {
						columns[i].width = 50;
					}
				}
				return (
					<div>
						<Table
							size="small"
							dataSource={dataSource}
							scroll={{ x: (columns.length - 1) * 50 + 200 }}
							columns={columns}
							pagination={false}
						/>
					</div>
				);
			} else {
				return <ReactHighcharts config={chartConfig} />;
			}
		} else {
			return (
				<Popover content={content}>
					<img src={chart} style={{ maxWidth: '100%' }} />
				</Popover>
			);
		}
	}
}

@connect(({ Report, loading }) => ({
	Report,
	loading: loading.models.Report,
}))
class TableComponent extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			dataSource: [],
			columns: [],
		};
	}
	componentDidMount() {
		const { dispatch, data, userId } = this.props;

		dispatch({
			type: 'Report/exportData',
			payload: { ...data, studentId: userId },
			callback: (res) => {
				this.setState({ ...res });
			},
		});
	}
	edit = () => {
		const { data, editKey, editBlock } = this.props;

		editBlock(false, editKey, data);
	};
	delete = () => {
		const { deleteBlock, editKey } = this.props;

		deleteBlock(editKey);
	};
	render() {
		const content = (
			<div>
				<a onClick={this.edit}>编辑</a>
			</div>
		);

		const { dataSource, columns } = this.state;
		const { isView } = this.props;

		return isView ? (
			<Table size="small" dataSource={dataSource} columns={columns} pagination={false} />
		) : (
			<Popover content={content}>
				<img src={table} style={{ maxWidth: '100%' }} />
			</Popover>
		);
	}
}

const AtomicComponent = (props) => {
	const { contentState, block } = props;
	const { isView, userId, editKey, editBlock, deleteBlock } = props.blockProps;

	const x = block.getEntityAt(0);
	if (x == null) {
		return <div />;
	}
	const entity = contentState.getEntity(x);

	const type = entity.getType();

	if (type === 'image') {
		const { src } = entity.getData();
		return (
			<div>
				<img src={queryFileUrl(src)} style={{ maxWidth: '100%' }} />
			</div>
		);
	}
	if (type === 'attr') {
		const { src, name } = entity.getData();
		return (
			<a href={queryFileUrl(src)} target="_blank">
				{name}
			</a>
		);
	} else if (type === 'video') {
		const { src } = entity.getData();
		return (
			<div>
				<video src={queryFileUrl(src)} controls="controls">
					您的浏览器不支持 video 标签。
				</video>
			</div>
		);
	} else if (type === 'table') {
		return <TableComponent data={entity.getData()} {...props.blockProps} />;
	} else if (type === 'chart') {
		return <ChartComponent data={entity.getData()} {...props.blockProps} />;
	}
};
export default function myBlockRenderer(isView, userId, editBlock, deleteBlock, contentBlock) {
	const type = contentBlock.getType();

	if (type == 'atomic') {
		return {
			component: AtomicComponent, // 指定组件
			editable: false, // 这里设置自定义的组件
			props: {
				isView: isView,
				userId: userId,
				editBlock: editBlock,
				deleteBlock: deleteBlock,
				editKey: contentBlock.getKey(),
			},
		};
	}
}