<template>

	<view class="pages">

		<view class="top">
			<text class="top-name">{{info.projectName}}</text>
			<view style="display: flex;flex-direction: row;align-items: center;" @click="openDate">
				<text class="top-date">{{info.orderDate}}</text>
				<image style="	width: 14px;
					height: 14px; margin-left: 10px;" src="../../static/baseIcon/calendar.png"></image>
			</view>

		</view>

		<view v-if="show">
			<view class="download">
				<view style="flex: 1;"></view>
				<view class="download-lift-view" @click="jump">
					<image src="../../static/baseIcon/download.png" style="width: 16px;height: 16px;" mode="aspectFill">
					</image>
					<text class="download-lift-view-text">报表下载</text>
				</view>
			</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.creditLimitW}}万元</text>
					<text class="centre-lift-text">总用信：{{info.useLimitW}}万元</text>

				</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: 3px;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')" style="border-bottom: none;">

					<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>

		<view v-if="!show">
			<view style="display:flex;flex-direction: column;justify-content: center;align-items: center;">
				<image src="../../static/baseIcon/notData.png" mode="aspectFill" style="width: 150px;height: 150px;">
				</image>
				<text style="text-align: center;width: 100%; color: #717171;">暂无数据</text>

			</view>
		</view>
	<u-datetime-picker ref="datetimePicker" :closeOnClickOverlay='true' @close="cancelClick"
					@cancel="cancelClick" @confirm="confirmClick" :show="datetimeShow" v-model="orderDate" mode="date"
					:formatter="formatter">
				</u-datetime-picker>
				
	</view>

</template>

<script>
	import {
		formatTimeTwo,
		beforeDay
	} from "@/utils/index";

	export default {

		data() {
			return {
				show: false,
				orderDate: "",
				datetimeShow: false,
				params: {
					projectSid: "",
					orderDate: "",
					wxCode: "",
					userSid: ""
				},
				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,
			}

			this.orderDate = option.orderDate

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

			// }, 1000)
			console.log('userSid>>>>>>', getApp().globalData.sid)
			this.params.userSid = getApp().globalData.sid

		},
		onReady() {
			/*  #ifdef  MP-WEIXIN */
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
			/* #endif */
		},
		methods: {
			openDate() {

				console.log('openDate')
				this.datetimeShow = true
			},
			formatter(type, value) {

				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			cancelClick() {
				this.datetimeShow = false
			},
			confirmClick(date) {
				console.log('confirmClick', date)
				console.log('confirmClick', formatTimeTwo(parseInt(date.value), "Y-M-D"))

				this.params.orderDate = formatTimeTwo(parseInt(date.value), "Y-M-D")
				this.info.orderDate = formatTimeTwo(parseInt(date.value), "Y-M-D")
				this.datetimeShow = false
				this.getServerData()

			},

			init() {
				let that = this
				wx.login({
					success: function(res) {
						if (res.code) {
							console.log('Http网络请求信息', {
								"wxCode": res.code
							})

							that.params.wxCode = res.code
							that.getServerData();
						}
					},
					fail: function(res) {
						uni.showToast({
							title: "网络错误，请退出后重新进入。",
							icon: 'none'
						})
					}
				});
			},
			getServerData() {

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

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

					if (resp) {
						this.show = true


						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: 30,
									color: this.info.state == '2' ? "#f00" : "#ccc"
								},
								subtitle: {
									name: "质押率 " + this.info.bankPledgeRate + "%",
									fontSize: 15,
									color: "#ccc"
								},
								extra: {
									ring: {
										ringWidth: 35,
										activeOpacity: 0.1,
										activeRadius: 1,
										offsetAngle: 0,
										labelWidth: 20,
										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);

					} else {
						this.show = false
						this.params.orderDate = this.orderDate
					}

					// //模拟从服务器获取数据时的延时
					// 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)

					//  code  410无权限     420需要绑定

					if (e.code == 410) {
						uni.redirectTo({
							url: "/pages/index/NotPermission"
						})

					}

					if (e.code == 420) {
						uni.redirectTo({
							url: "/pages/index/BindPhone"
						})
					}


				})


			},
			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.orderDate + "&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;
			}

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

		.download {

			position: absolute;
			top: 100px;
			right: 5px;
			background-color: #fff;
			display: flex;
			align-items: center;
			flex-direction: row;

			.download-lift-view {
				z-index: 2222;
				margin-right: 20px;
				display: flex;
				align-items: center;
				flex-direction: row;

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

		.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 {
					flex: 1;
					text-align: center;
					font-size: 13px;
					color: #191919;
					font-weight: 550;
					font-family: sans-serif;
				}



			}

		}

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

		.layout {
			background: #fff;
			padding: 15px;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1px #eee solid;

			.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>