<template>
	<view class="container">
		<scroll-view scroll-y="true" class="scroll">
			<view class="market-box">
				<view class="title">
					<view class="label">今日门票销售额</view>
					<view class="num">{{saleDataVo.todaySaleAmount}}</view>
				</view>
				<view class="chart6-box">
					<view class="left6">
						<qiun-data-charts type="arcbar" canvas2d :opts="arcbarOpts" :animation="false" :chartData="arcbarChartData" />
						<image class="icon" src="../../static/img/Frame.png" mode=""></image>
					</view>
					<view class="right6">
						<view class="row">
							<view class="col1">
								<view class="dot"></view>
								<view class="label">今日门票核销数量</view>
							</view>
							<view class="col2">{{saleDataVo.todayVerificationNum}}</view>
						</view>
						<view class="row">
							<view class="col1">
								<view class="dot"></view>
								<view class="label">今日门票销售数量</view>
							</view>
							<view class="col2">{{saleDataVo.todaySaleNum}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card analyse-box">
				<view class="title-box">
					<image class="headline" src="../../static/img/sjpsjtj.png" mode=""></image>
					<view class="label">今日票类售/验数据分析</view>
				</view>
				<view class="chart1-box">
					<uni-table ref="table" stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th align="center" width="320rpx">门票名称</uni-th>
							<uni-th align="center" width="155rpx">销售数量</uni-th>
							<uni-th align="center" width="155rpx">核验数量</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in saleVerficationVo" :key="index">
							<uni-td align="center" width="320rpx">{{item.ticketName}}</uni-td>
							<uni-td align="center" width="155rpx">{{item.buyQuantity}}</uni-td>
							<uni-td align="center" width="155rpx">{{item.verificationNum}}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<view class="card statistics-box">
				<view class="title-box">
					<image class="headline" src="../../static/img/ykbl.png" mode=""></image>
					<view class="label">今日各景点验票人数统计</view>
				</view>
				<view class="chart2-box">
					<uni-table ref="table" stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th align="center" width="430rpx">门票名称</uni-th>
							<uni-th align="center" width="200rpx">验票人数</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in checkPointTicketVo" :key="index">
							<uni-td align="center" width="430rpx">{{item.name}}</uni-td>
							<uni-td align="center" width="200rpx">{{item.value}}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<view class="card proportion-box">
				<view class="title-box">
					<image class="headline" src="../../static/img/xszb.png" mode=""></image>
					<view class="label">今日票类销售占比</view>
				</view>
				<view class="chart3-box">
					<view class="left3">
						<qiun-data-charts type="ring" canvas2d :opts="ringOpts" :chartData="ringChartData" />
					</view>
					<view class="right3">
						<view class="row" v-for="(item, index) in saleTicketVo">
							<view class="col3">
								<view class="dot"></view>
								<view class="label">{{item.name}}</view>
							</view>
							<view class="col4">{{item.value}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card rank-box">
				<view class="title-box">
					<image class="headline" src="../../static/img/xsph.png" mode=""></image>
					<view class="label">今日OTA销售排行</view>
				</view>
				<view class="chart4-box">
					<view class="unit">单位：张</view>
					<view class="plan-list">
						<view class="plan-item" v-for="(item, index) in saleOtaTicketVo" :key="index">
							<view class="icon1">
								<image v-if="item.name == '美团'" class="ranking" src="../../static/img/mt.png" mode=""></image>
								<image v-if="item.name == '携程'" class="ranking" src="../../static/img/xc.png" mode=""></image>
							</view>
							<view class="row">
								<view class="label">
									<view class="text">{{item.name}}</view>
									<view class="num">{{item.value}}</view>
								</view>
								<u-line-progress :percentage="(item.value / xsphTotal) * 100" activeColor="#03AE80" :showText="false" height="15rpx"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card info-box">
				<view class="title-box">
					<image class="headline" src="../../static/img/ryrstj.png" mode=""></image>
					<view class="label">今日各时段入园人数统计</view>
				</view>
				<view class="chart5-box">
					<uni-table ref="table" stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th align="center" width="330rpx">时间段</uni-th>
							<uni-th align="center" width="300rpx">入园人数</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in timeEnterScenicVo" :key="index">
							<uni-td align="center" width="330rpx">{{item.name}}</uni-td>
							<uni-td align="center" width="300rpx">{{item.value}}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				saleDataVo: {},
				saleVerficationVo: [],
				checkPointTicketVo: [],
				saleTicketVo: [],
				plxszbTotal: 0,
				saleOtaTicketVo: [],
				xsphTotal: 0,
				timeEnterScenicVo: [],
				arcbarOpts: {
					color: ["#03AE80","#347BEA"],
					padding: undefined,
					title: {
						name: "",
						fontSize: 0,
						color: "#1890ff"
					},
					subtitle: {
						name: "",
						fontSize: 0,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 12
						}
					}
				},
				ringOpts: {
					rotate: false,
					rotateLock: false,
					color: ["#03AE80","#347BEA","#FE7D51","#6E34EA"],
					padding: [0,0,0,0],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 30
					},
					title: {
						name: "",
						fontSize: 20,
						color: "#333"
					},
					subtitle: {
						name: "总票数",
						fontSize: 12,
						color: "#666"
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: -90,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							customRadius: 70
						}
					}
				},
				arcbarChartData: {},
				ringChartData: {},
			};
		},
		mounted() {
            this.getRealTimeMonitoring();
        },
		methods: {
			async getRealTimeMonitoring() {
				let info = await this.$http.getRealTimeMonitoring();
				this.saleDataVo = info.data.saleDataVo;
				this.saleVerficationVo = info.data.saleVerficationVo;
				this.checkPointTicketVo = info.data.checkPointTicketVo;
				this.saleTicketVo = info.data.saleTicketVo;
				this.saleOtaTicketVo = info.data.saleOtaTicketVo;
				this.timeEnterScenicVo = info.data.timeEnterScenicVo;
				
				this.saleTicketVo.forEach(m => {
					this.plxszbTotal += m.value;
				})
				this.ringOpts.title.name = this.plxszbTotal;
				
				this.saleOtaTicketVo.forEach(m => {
					this.xsphTotal += m.value;
				})
				
				let res1 = {
					series: [
						{
							name: "今日门票核销数量",
							data: this.saleDataVo.todayVerificationNum
						},
						{
							name: "今日门票销售数量",
							data: this.saleDataVo.todaySaleNum
						}
					]
				};
				this.arcbarChartData = JSON.parse(JSON.stringify(res1));
				
				this.saleTicketVo.forEach(m => {
					m.labelShow = false;
				})
				let res2 = {
					series: [
						{
							data: this.saleTicketVo
						}
					]
				};
				this.ringChartData = JSON.parse(JSON.stringify(res2));
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		.scroll {
			height: 100%;
		}
		.market-box {
			width: 686rpx;
			height: 428rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 32rpx;
			box-sizing: border-box;
			.title {
				display: flex; align-items: center; justify-content: space-between;
				.label { font-weight: 500; font-size: 32rpx; color: #333333; }
				.num { font-weight: bold; font-size: 40rpx; color: #333333; }
			}
			.chart6-box {
				display: flex; align-items: center;
				.left6 {
					width: 320rpx; height: 320rpx; position: relative; margin-right: 48rpx;
					.icon {
						position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52rpx; height: 52rpx;
					}
				}
				.right6 {
					flex: 1;
					.row {
						margin-top: 74rpx;
						&:nth-child(1) {
							margin-top: 0;
							.dot { background: #347BEA; }
						}
						&:nth-child(2) {
							.dot { background: #03AE80; }
						}
						.col1 {
							display: flex; align-items: center;
							.dot {
								width: 14rpx; height: 14rpx; border-radius: 50%; margin-right: 10rpx;
							}
							.label { font-size: 28rpx; color: #333333; line-height: 33rpx; }
						}
						.col2 { margin: 12rpx 0 0 24rpx; font-weight: bold; font-size: 32rpx; color: #333333; line-height: 38rpx; }
					}
				}
			}
		}
		.title-box {
			width: 686rpx;
			height: 90rpx;
			box-sizing: border-box;
			border-radius: 10rpx 10rpx 0 0;
			padding: 23rpx 28rpx;
			display: flex;
			align-items: center;
			.headline {
				width: 44rpx;
				height: 44rpx;
				margin-right: 16rpx;
			}
			.label {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}
		.card {
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
		.analyse-box {
			.title-box { background: linear-gradient( 90deg, rgba(3,174,128,0.2) 0%, rgba(255,255,255,0.05) 100%); }
			.chart1-box { padding: 20rpx 28rpx; }
		}
		.statistics-box {
			.title-box { background: linear-gradient( 90deg, rgba(43,117,233,0.2) 0%, rgba(255,255,255,0.05) 100%); }
			.chart2-box  { padding: 20rpx 28rpx; }
		}
		.proportion-box {
			.title-box { background: linear-gradient( 90deg, rgba(254,125,81,0.2) 0%, rgba(255,255,255,0.05) 100%); }
			.chart3-box {
				display: flex; align-items: center; padding: 0 32rpx;
				.left3 {
					width: 358rpx; height: 358rpx; position: relative;
				}
				.right3 {
					flex: 1;
					.row {
						margin-top: 37rpx; display: flex; align-items: center; justify-content: space-between;
						&:nth-child(1) {
							margin-top: 0;
							.dot { background: #03AE80; }
						}
						&:nth-child(2) {
							.dot { background: #347BEA; }
						}
						&:nth-child(3) {
							.dot { background: #FE7D51; }
						}
						&:nth-child(4) {
							.dot { background: #6E34EA; }
						}
						.col3 {
							display: flex; align-items: center;
							.dot {
								width: 14rpx; height: 14rpx; border-radius: 50%; margin-right: 12rpx;
							}
							.label { font-size: 28rpx; color: #666666; }
						}
						.col4 { font-weight: 500; font-size: 28rpx; color: #333333; }
					}
				}
			}
		}
		.rank-box {
			.title-box { background: linear-gradient( 90deg, rgba(3,174,128,0.2) 0%, rgba(255,255,255,0.05) 100%); }
			.chart4-box {
				padding: 20rpx 28rpx 40rpx;
				.unit {
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
					text-align: right;
				}
				.plan-list {
					margin-top: 21rpx;
					.plan-item {
						margin-top: 36rpx;
						display: flex;
						align-items: center;
						&:first-child {
							margin-top: 0;
						}
						.icon1 {
							width: 48rpx; margin-right: 20rpx;
							.ranking { width: 48rpx; height: 48rpx; }
							.sort {
								width: 36rpx; height: 36rpx; line-height: 36rpx; text-align: center; background: #F6F6F6; border-radius: 4rpx; font-weight: 500; font-size: 20rpx; color: #333333; margin-left: 12rpx;
							}
						}
						.row {
							flex: 1;
							.label {
								display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 28rpx; color: #333333; line-height: 33rpx; margin-bottom: 4rpx;
							}
						}
					}
				}
			}
		}
		.info-box {
			.title-box { background: linear-gradient( 90deg, rgba(43,117,233,0.2) 0%, rgba(255,255,255,0.05) 100%); }
			.chart5-box  { padding: 20rpx 28rpx; }
		}
	}
	/deep/.uni-table {
		min-width: 100% !important;
	}
</style>