import React, { Component } from "react";
import { Table, Button, Space, Radio } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import GroupSelect from "./GroupSelect";
import DatePickerCharts from "./DatePickerCharts";
import { stores_Context } from "../config";
import { observer } from "mobx-react";
import * as comm from "../utils/commons";
import { Line } from "@ant-design/charts";
import * as config from "../config";

class ExchangeRate extends Component {
	static contextType = stores_Context;

	constructor(props) {
		super(props);
	}

	render() {
		const { dashboard_store, date_picker_store } = this.context;
		const { exchangeRate_data } = dashboard_store;
		const line_data_source = comm.empty(exchangeRate_data.data) ? [] : exchangeRate_data.data.CurrencyData1;
		const line_config = {
			data: line_data_source,
			padding: "auto",
			xField: "er_date",
			yField: "er_htrate",
			seriesField: "er_currency",
			xAxis: {
				type: "timeCat",
			},
			point: {
				size: 4,
				shape: "cicle",
			},
			label: {}, //显示标签
			tooltip: {
				// customContent: (title, items) => {
				//     const data = items[0]?.data || {};
				//     return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
				// },
				// itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span><span class="g2-tooltip-name">{name}</span>: <span class="g2-tooltip-value">{value}</span></li>',
				customItems: items => {
					let result_arr = [];
					items.forEach(item => {
						item.value = item.data.er_htrate + " | " + item.data.er_bankrate;
						return result_arr.push(item);
					});
					return result_arr; //return [{color:'red',name:'sss',value:22},{color:'red',name:'aaaa',value:22}];
				},
			},
			smooth: true,
		};

		return (
			<div>
				<h2>汇率 HT|Bank</h2>
				<Space size="large">
					<DatePickerCharts hide_vs={true} />
					<Button
						type="primary"
						icon={<SearchOutlined />}
						loading={exchangeRate_data.loading}
						onClick={() => {
							exchangeRate_data.asyncFetch(date_picker_store.start_date.format(config.DATE_FORMAT), date_picker_store.end_date.format(config.DATE_FORMAT));
						}}>
						统计
					</Button>
				</Space>
				<Line {...line_config} />
			</div>
		);
	}
}

export default observer(ExchangeRate);