<template>
	<view style="min-height: 100vh;">
		<view class="padding-xs">
			<view class="border-bottom bg-linear padding" style="height: 34vh;">
				<view class="padding text-center ">
					<view class="padding-top-xl">
						<view>{{languageData.echarts.total}}（₭）</view>
						<view class="text-sl">9822133.00</view>
					</view>
				</view>
				<view class="border-bottom margin-top-sm padding">
					<view class="disply-center text-center">
						<view class="">
							<view class="">{{languageData.echarts.numberOfPayers}}</view>
							<view class="">321</view>
						</view>
						<view class="">
							<view class="">{{languageData.echarts.PaymentOrder}}</view>
							<view class="">121</view>
						</view>
						<view class="">
							<view class="">{{languageData.echarts.paySuccess}}</view>
							<view class="">2112</view>
						</view>
					</view>
				</view>
			</view>

			<view class="border-bottom bg-linear-radius margin-top-sm padding" style="border-radius: 10rpx;">
				<view class="text-sm">
					<view class="disply-center">
						<view class="bg-linear-data margin-sm">
							<view class="margin-sm">
								<view class="disply-center text-xs">
									<view class="">{{languageData.echarts.income}}</view>
									<view class="fr disply-center">
										<view class="padding-right-xs">{{languageData.echarts.detail}}</view>
										<u-icon name="arrow-right" color="#7ca3ff" size="11" />
									</view>
								</view>
								<view class="margin-xs text-df">₭42321</view>
							</view>
						</view>
						<view class="bg-linear-data margin-sm">
							<view class="margin-sm">
								<view class="disply-center text-xs">
									<view class="">{{languageData.echarts.withdrawal}}</view>
									<view class="fr disply-center">
										<view class="padding-right-xs">{{languageData.echarts.detail}}</view>
										<u-icon name="arrow-right" color="#7ca3ff" size="11" />
									</view>
								</view>
								<view class="margin-xs text-df">₭2321</view>

							</view>
						</view>
					</view>
					<view class="disply-center">
						<view class="bg-linear-data margin-sm">
							<view class="margin-sm">
								<view class="disply-center text-xs">
									<view class="">{{languageData.echarts.points}}</view>
									<view class="fr disply-center">
										<view class="padding-right-xs">{{languageData.echarts.detail}}</view>
										<u-icon name="arrow-right" color="#7ca3ff" size="11" />
									</view>
								</view>
								<view class="margin-xs text-df">812321</view>
							</view>
						</view>
						<view class="bg-linear-data margin-sm">
							<view class="margin-sm">
								<view class="disply-center text-xs">
									<view class="">{{languageData.echarts.withdrawable}}</view>
									<view class="fr disply-center">
										<view class="padding-right-xs">{{languageData.echarts.detail}}</view>
										<u-icon name="arrow-right" color="#7ca3ff" size="11" />
									</view>
								</view>
								<view class="margin-xs text-df">₭1000</view>

							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 图表 -->
			<view class="border-bottom bg-white margin-top-sm padding" style="border-radius: 10rpx;">
				<!-- <div ref="main" style="width: 500px;height:250px;"></div> -->
				<qiun-data-charts type="line" :opts="opts('交易额', '#FC8452')" :chartData="chartData" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Dashboard',
		data() {
			return {
				chartData: {},

			}
		},
		created() {
			this.languageData = this.$languageData;
		},
		mounted() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [this.languageData.echarts.Mon, 
						this.languageData.echarts.Tue, 
						this.languageData.echarts.Wed, 
						this.languageData.echarts.Thu, 
						this.languageData.echarts.Fri, 
						this.languageData.echarts.Sat,
						this.languageData.echarts.Sun
						],
						series: [{
								name: this.languageData.echarts.person,
								lineType: "dash",
								data: [35, 8, 25, 37, 4, 20, 30]
							},
							{
								name: this.languageData.echarts.merchant,
								data: [70, 40, 65, 60, 44, 68, 80]
							},
							{
								name: this.languageData.echarts.agent,
								data: [100, 80, 95, 100, 112, 132, 140]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500)
			},
			opts(title, color) {
				let opts = {
					color: [color],
					padding: [15, 10, 0, 15],
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: 'hollow',
					fontSize: 10,
					legend: {},
					xAxis: {
						rotateLabel: true,
						disableGrid: true,
					},
					yAxis: {
						gridType: "dash",
						showTitle: false,
						dashLength: 16,
						disabled: true,
						data: [{
							min: 0,
							calibration: true,
							fontColor: color,
							position: "left",
							title: title,
							tofix: 2
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom",
							onShadow: true,
							animation: "horizontal"
						}
					},
				}
				return opts;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bg-linear {
		background: linear-gradient(135deg, #1aaeff, #3775ff);
		color: white;
		border-radius: 10rpx;
	}

	.bg-linear-radius {
		background: linear-gradient(135deg, #ffffff, #9acbf3);
		border-radius: 10rpx;
	}

	.bg-linear-data {
		background: linear-gradient(135deg, #ffffff, #9acbf3);
		border-radius: 10rpx;
		height: 100rpx;
		width: 50%;
	}

	.disply-center {
		display: flex;
		justify-content: space-between;
	}
</style>