<template>

	<view class="pages">

		<view class="top">
			<text class="top-name">{{info.projectName}}</text>
			<text class="top-date">{{info.orderDate}}</text>
		</view>

		<view class="centre">

			<view class="centre-top">
				<qiun-data-charts type="ring" :opts="info.opts" :chartData="chartData" />
			</view>


			<view class="centre-bom">
				<text class="centre-lift-text">贷款总额：{{info.totalLoanWan==''?'--':info.totalLoanWan}}万元</text>
				<view class="centre-lift-view" @click="jump">
					<image src="../../static/baseIcon/download.png" style="width: 16px;height: 16px;" mode="aspectFill">
					</image>
					<text class="centre-lift-view-text">报表下载</text>
				</view>
			</view>

		</view>

		<!-- <view class="bom">
			<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<text style="	font-size: 16px;
				color: #6C6C6C;">分项数据</text>
				<text style="	font-size: 16px;
				color: #6C6C6C;">单位：万元</text>
			</view>
			<qiun-data-charts ref="myChart" type="bar" @tap=tap($event) :opts="opts2" :chartData="chartData2" />

		</view> -->

		<view style="margin-top: 30px;padding-bottom: 50px; display: flex;flex-direction: column;">

			<view class="layout" @click="itemClick('1')">

				<image src="https://supervise.yxtsoft.com/img/newApp/zhye.png" mode="aspectFill"
					style="width: 12px;height: 12px;">
				</image>

				<view class="content">
					<text class="content-text1">账户余额</text>
					<text class="content-text2">{{info.accountsBalanceWan }}万元</text>

				</view>
				<image src="../../static/baseIcon/zy.png" mode="aspectFill" style="width: 14px;height: 14px;"></image>
			</view>

			<view class="layout" @click="itemClick('2')">

				<image src="https://supervise.yxtsoft.com/img/newApp/yszk.png" mode="aspectFill"
					style="width: 12px;height: 12px;">
				</image>

				<view class="content">
					<text class="content-text1">应收账款</text>
					<text class="content-text2">{{info.accountsReceivableWan }}万元</text>

				</view>
				<image src="../../static/baseIcon/zy.png" mode="aspectFill" style="width: 14px;height: 14px;"></image>
			</view>

			<view class="layout" @click="itemClick('3')">

				<image src="https://supervise.yxtsoft.com/img/newApp/zwkcjz.png" mode="aspectFill"
					style="width: 12px;height: 12px;">
				</image>

				<view class="content">
					<text class="content-text1">库存货值</text>
					<text class="content-text2">{{info.stockAmountWan }}万元</text>

				</view>
				<image src="../../static/baseIcon/zy.png" mode="aspectFill" style="width: 14px;height: 14px;"></image>
			</view>

			<view class="layout" @click="itemClick('4')">

				<image src="https://supervise.yxtsoft.com/img/newApp/zthwjz.png" mode="aspectFill"
					style="width: 12px;height: 12px;">
				</image>

				<view class="content">
					<text class="content-text1">在途货值</text>
					<text class="content-text2">{{info.transitAmountWan }}万元</text>

				</view>
				<image src="../../static/baseIcon/zy.png" mode="aspectFill" style="width: 14px;height: 14px;"></image>
			</view>

			<view class="layout" @click="itemClick('5')">

				<image src="https://supervise.yxtsoft.com/img/newApp/yfk.png" mode="aspectFill"
					style="width: 12px;height: 12px;">
				</image>

				<view class="content">
					<text class="content-text1">预付款</text>
					<text class="content-text2">{{info.advancePaymentWan }}万元</text>

				</view>
				<image src="../../static/baseIcon/zy.png" mode="aspectFill" style="width: 14px;height: 14px;"></image>
			</view>
		</view>

	</view>

</template>

<script>
	export default {

		data() {
			return {
				params: {
					projectSid: "9a2c1e08-0e0a-4440-bc3d-3adbef082cdb",
					orderDate: "2023-08-07",
				},
				info: {
					projectName: "",
					orderDate: "",
					reportTime: "",
					projectSid: "",
					totalLoan: "",
					totalLoanWan: "",
					accountsBalance: "",
					accountsBalanceWan: "",
					accountsReceivable: "",
					accountsReceivableWan: "",
					stockAmount: "",
					stockAmountWan: "",
					transitAmount: "",
					transitAmountWan: "",
					advancePayment: "",
					advancePaymentWan: "",
					pledgeRate: "",
					opts: {},
				},
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				chartData2: {},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 30, 10, 10],
					enableScroll: false,
					legend: {
						"show": false,
						"position": "right",
						"lineHeight": 25,
					},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: true,
						max: 20000,
						triggerEvent: true
					},
					yAxis: {
						triggerEvent: true
					},

					extra: {
						bar: {
							type: "stack",
							width: 30,
							meterBorde: 2,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
						}
					}
				}
			}
		},
		onLoad(option) {

			// this.params = {
			// 	projectSid: option.projectSid,
			// 	orderDate: option.orderDate
			// }


		},
		onShow() {
			wx.hideHomeButton()
			// setTimeout(() => {

			// }, 1000)
			this.getServerData();
		},
		methods: {
			init() {
				// var chart = this.$echarts.init(this.$refs["myChart"]);
				// this.$refs["myChart"].getZr().on('click', params => {

				// 	let pointInPixel = [params.offsetX, params.offsetY]

				// 	if (chart.containPixel('grid', pointInPixel)) {

				// 		let xIndex = chart.convertFromPixel({
				// 			seriesIndex: 0
				// 		}, [params.offsetX, params.offsetY])[0]

				// 		console.log(xIndex)

				// 		this.select_index = xIndex

				// 	}

				// })
			},
			getServerData() {

				console.log("this.params", this.params)

				this.$api.getProjectDaily(this.params).then((resp) => {
					console.log('1111>>>>>>', resp)

					this.info = resp

					this.info.opts = {
							rotate: false,
							rotateLock: false,
							color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452",
								"#9A60B4",
								"#ea7ccc"
							],
							dataLabel: false,
							enableScroll: false,
							legend: {
								show: true,
								position: "right",
								lineHeight: 30
							},
							title: {
								name: this.info.pledgeRatePercent+"%",
								fontSize: 38,
								color: "#F6A42F"
							},
							subtitle: {
								name: "质押率",
								fontSize: 20,
								color: "#17B0DF"
							},
							extra: {
								ring: {
									ringWidth: 30,
									activeOpacity: 0.1,
									activeRadius: 1,
									offsetAngle: 0,
									labelWidth: 15,
									border: true,
									borderWidth: 3,
									borderColor: "#FFFFFF"
								}
							}
						},

						//模拟从服务器获取数据时的延时
						setTimeout(() => {
							//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
							let res = {
								series: [{
									data: [{
										"name": "帐户余额",
										"value": this.info.accountsBalance,
										"labelShow": true,
										"labelText": "四班:18人"
									}, {
										"name": "应收账款",
										"value": this.info.accountsReceivable,
										"labelShow": true,
										"labelText": "四班:18人"
									}, {
										"name": "库存货值",
										"value": this.info.stockAmount,
										"labelShow": true,
										"labelText": "四班:18人"
									}, {
										"name": "在途货值",
										"value": this.info.transitAmount,
										"labelShow": true,
										"labelText": "四班:18人"
									}, {
										"name": "预付款",
										"value": this.info.advancePayment,
										"labelShow": true,
										"labelText": "四班:18人"
									}]
								}]
							};
							this.chartData = JSON.parse(JSON.stringify(res));
						}, 500);

					// //模拟从服务器获取数据时的延时
					// setTimeout(() => {
					// 	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					// 	let res = {
					// 		categories: ["账户余额", "应收账款", "库存货值", "在途货值", "预付款"],
					// 		series: [{
					// 				name: "",
					// 				data: [this.info.accountsBalanceWan, this.info
					// 					.accountsReceivableWan,
					// 					this.info.stockAmountWan, this.info.transitAmountWan,
					// 					this
					// 					.info.advancePaymentWan
					// 				]
					// 			},
					// 			// {
					// 			//   name: "完成量",
					// 			//   data: [18,27,21,24,6,28]
					// 			// }
					// 		]
					// 	};
					// 	this.chartData2 = JSON.parse(JSON.stringify(res));
					// }, 500);

				}).catch(e => {
					console.log('eeeee', e)
				})


			},
			jump() {
				// 下载
				uni.navigateTo({
					url: 'RegulatoryReportingDownload?sid=' + this.info.projectSid + "&name=" + this.info
						.projectName +
						"&date=" + this.info.orderDate
				});

			},

			itemClick(index) {
				switch (index) {
					case "1":
						// 账号余额
						uni.navigateTo({
							url: 'AccountBalance?sid=' + this.info.projectSid + "&name=" + this.info.projectName +
								"&number=暂无" +
								"&date=" + this.info.reportTime + "&balance=" + this.info.accountsBalanceWan
						});
						break;
					case "2":

						// 应收账款
						uni.navigateTo({
							url: 'Accounts?sid=' + this.info.projectSid + "&name=" + this.info.projectName +
								"&customNumber=暂无" +
								"&date=" + this.info.reportTime + "&accounts=" + this.info.accountsReceivableWan
						});
						break;
					case "3":
						// 库存汇总
						uni.navigateTo({
							url: 'InventorySummary?projectSid=' + this.info.projectSid + "&orderDate=" + this.info
								.orderDate
						});
						break;
					case "4":
						// 在途货物
						uni.navigateTo({
							url: 'GoodsInTransit?sid=' + this.info.projectSid + "&name=" + this.info.projectName +
								"&goodsInTransit=" + this.info
								.transitAmountWan +
								"&date=" + this.info.reportTime
						});

						break;
					case "5":
						// 预付款
						uni.navigateTo({
							url: 'AdvanceCharge?sid=' + this.info.projectSid + "&name=" + this.info.projectName +
								"&advanceCharge=" + this.info
								.advancePaymentWan + "&date=" + this.info.reportTime
						});
						break;
					default:
						break;
				}
			},
			tap(params) {
				console.log("params", params)
			},
			handleZrClick(params) {
				console.log("params", params)
				// 图标任意位置点击事件处理
				if (params.topTarget && params.topTarget.parent.anid && params.target === undefined) {
					console.log("点击x或y轴")
				}

			},
			clickBarInBarChart(params) {
				console.log("params", params)
			},
		}
	}
</script>

<style lang="scss">
	.pages {

		display: flex;
		flex-direction: column;

		width: 100%;
		height: 100%;

		.top {
			background-color: #fff;
			padding: 20px 25px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.top-name {
				font-size: 16px;
				color: #000;
				font-weight: 600;
				font-family: sans-serif;
			}

			.top-date {
				font-size: 13px;
				color: #717171;
			}
		}

		.centre {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			border-top: 2px solid #eee;
			padding: 25px;

			.centre-top {}


			.centre-bom {
				margin-top: 10px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.centre-lift-text {
					font-size: 14px;
					color: #191919;
					font-weight: 550;
					font-family: sans-serif;
				}

				.centre-lift-view {
					display: flex;
					align-items: center;
					flex-direction: row;

					.centre-lift-view-text {
						margin-left: 10px;
						font-size: 14px;
						color: #018AD2;
					}
				}

			}

		}

		.bom {
			width: 90%;
			margin: 20px;
		}

		.layout {
			background: #fff;
			border-radius: 10px;
			padding: 15px;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 10px;

			.content {
				margin-left: 10px;
				margin-right: 10px;
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.content-text1 {
					font-size: 14px;
					color: #191919;
				}

				.content-text2 {
					font-size: 14px;
					color: #6c6c6c;
				}
			}
		}
	}
</style>