<template>
	<view class="transactionDetails">
		<!-- 选择时间 -->
		<view class="select_time" @tap="selectTime" v-if="typecheck!=1">
			<image class="time" :src="ImgUrl+'xzf/h5/time.png'" mode="aspectFit"></image>
			<view class="content">{{starttime}}~{{endtime}}</view>
			<image :class="calendar?'xia':'xiaframes'" :src="ImgUrl+'xzf/h5/xia.png'" mode="aspectFit"></image>
		</view>
		<!-- 门店数据 -->
		<view class="store_data" v-if="typecheck!=1">
			<view class="rowboxh">
				<view class="rowl">
					<view class="rowltxt2">{{details['deviceName']||""}}</view>
					<view class="status" v-if="onlineStatus=='online'">在线</view>
					<view class="status" v-if="onlineStatus=='offline'"
						style="background-color: rgba(246, 82, 0, 0.08);color: #F65200;">离线</view>
				</view>
			</view>
			<view class="devices_sn">
				SN：{{details['snCode']||''}}
			</view>
			<view class="warning" v-if="onlineStatus=='offline'">
				<image class="warnpng" style="width: 25rpx;height: 25rpx;margin-left:  25rpx;"
					:src="ImgUrl+'xzf/h5/warnpng.png'">
				</image>
				<text style="display: inline-block;margin-left: 8rpx;">当前设备离线，无法统计准确数据，请尽快处理</text>
			</view>
			<view class="rowbox" :style="onlineStatus=='online'?'border-top: 1rpx solid #E2E2E2;':''">
				<view class="rowl">
					<view class="rowltxt">交易笔数(笔)</view>
					<view class="rowltxt2">{{totalCnt||0}}</view>
				</view>
				<view class="rowr">
					<view class="rowltxt">营业额(元)</view>
					<view class="rowltxt2">{{totalAmount||0}}</view>
				</view>
			</view>
		</view>
		<!-- 门店交易明细 -->
		<view class="store_data_detail" v-if="typecheck!=1">
			<!-- 数据列表 -->
			<view class="dataList">
				<view class="dataitem" v-for="(item,index) in dataList" :key="index"
					:style="((index+1)==dataList.length)?'border: none;':''">
					<view class="row1">
						<view class="name">
							{{item['deviceName']}}
						</view>
						<view class="amount">
							{{item['amount']}}元
						</view>
					</view>
					<view class="row2 time">
						{{item['dealTime']}}
					</view>
				</view>
				<!-- 无数据 -->
				<view class="nodata" v-if="dataList.length==0" style="margin-top: 0;height: 75vh;">
					<image :src="ImgUrl+'xzf/h5/nodata.png'" style="width: 399rpx;height: 211rpx;margin-top: 296rpx;"
						mode="aspectFit">
					</image>
					<view class="text1">暂无数据</view>
				</view>
				<div class="van-list__finished-text" v-if="dataList.length>0&&totalCnt==dataList.length">没有更多了</div>
				<div class="van-list__error-text" v-if="dataList.length>0&&totalCnt!=dataList.length" @tap="Loadmore">
					点击加载更多...</div>
			</view>
		</view>
		<!-- 高峰期文案 无数据 -->
		<view class="default">
			<!-- 高峰期 -->
			<view class="gaofengqi" v-if="typecheck==1">
				<image :src="ImgUrl+'xzf/h5/gaofengqi.png'" mode="aspectFit"></image>
				<view class="text1">当前为使用高峰期</view>
				<view class="text2">（建议避开就餐时段查询）</view>
			</view>
			<!-- 无数据 -->
			<!-- <view class="nodata" v-if="typecheck==2">
				<image :src="ImgUrl+'xzf/h5/nodata.png'" mode="aspectFit"></image>
				<view class="text1">暂无数据</view>
			</view> -->
		</view>
		<!-- 选择日期组件 -->
		<van-calendar v-model="calendar" :max-range="93" :min-date="minDate" :show-confirm="true" position="bottom"
			color="#01CB88" type="range" @confirm="onConfirm" />
	</view>
</template>

<script>
	import dayjs from "dayjs"
	// const starttime = dayjs().subtract(1, 'day').format('YYYY/MM/DD')
	const starttime = dayjs().format('YYYY/MM/DD')
	const endtime = dayjs().format('YYYY/MM/DD')
	import {
		Dialog,
		Toast
	} from 'vant';
	import config from '../../common/config.js'
	import {
		requestGet,
		requestPost
	} from '../../common/request.js'
	export default {
		name: "transactionDetails",
		mixins: [],
		data() {
			return {
				ImgUrl: this.$ImgUrl,
				ImgUrl2: this.$ImgUrl + 'xzfalipay/',
				// 默认时间
				starttime,
				endtime,
				// 日历选择弹框
				showPicker: false,
				calendar: false,
				minDate: new Date(2021, 0, 1),
				typecheck: 2,
				dataList: [],
				details: uni.getStorageSync("details"),
				totalAmount: '0.00',
				totalCnt: 0,
				pageIndex: 1,
				pageSize: 20,
				// 设置状态
				onlineStatus: "offline"
			}
		},
		onLoad: function(options) {
			if (options['endtime'] && options['starttime']) {
				this.starttime = options['starttime']
				this.endtime = options['endtime']
			}
			this.DeviceInfo()
			this.DeviceFlows()
		},
		methods: {
			Loadmore() {
				this.pageIndex += 1
				this.DeviceFlows()
			},
			//设备详情
			async DeviceInfo() {
				const loading = Toast.loading('数据加载中...');
				let data = await requestPost('/cgi-xpay/app/busi/DeviceInfo', {
					"businessId": 0,
					"deviceId": this.details['deviceId'] || 0
				})
				loading.clear();
				if (data['code'] != 200) {
					await Dialog({
						title: '温馨提示',
						message: "设备详情查询失败",
						confirmButtonText: "知道了"
					})
					return
				}
				let jsonData = JSON.parse(JSON.stringify(data || {}))
				this.onlineStatus = jsonData.data['backData']['onlineStatus'] || "offline"
			},
			//设备流水
			async DeviceFlows() {
				const loading = Toast.loading('数据加载中...');
				let data = await requestPost('/cgi-xpay/app/busi/DeviceFlows', {
					"businessId": 0,
					"startDate": this.starttime.replaceAll("/", "-"),
					"endDate": this.endtime.replaceAll("/", "-"),
					"pageIndex": this.pageIndex,
					"pageSize": this.pageSize,
					"deviceId": this.details['deviceId'] || 0
				})
				loading.clear();
				if (data['code'] != 200) {
					await Dialog({
						title: '温馨提示',
						message: "设备流水查询失败",
						confirmButtonText: "知道了"
					})
					return
				}
				let jsonData = JSON.parse(JSON.stringify(data || {}))
				const backData = jsonData.data.backData || []
				this.totalAmount = parseFloat(jsonData.data.totalAmount / 100).toFixed(2)
				this.totalCnt = jsonData.data.totalCnt || 0
				if (this.pageIndex == 1) {
					this.dataList = backData.map((v, index) => {
						v['amount'] = parseFloat(v.amount / 100).toFixed(2)
						return v
					})
				} else {
					const arr = backData.map((v, index) => {
						v['amount'] = parseFloat(v.amount / 100).toFixed(2)
						return v
					})
					this.dataList.push(...arr)
				}
			},
			// 组件提交时间
			onConfirm(date) {
				const [start, end] = date;
				this.starttime = dayjs(start).format('YYYY/MM/DD')
				this.endtime = dayjs(end).format('YYYY/MM/DD')
				this.calendar = false
				// 选择时间
				this.DeviceFlows()
			},
			// 选择时间
			selectTime() {
				this.calendar = true
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background: #F3F3F3;
	}

	.status {
		display: inline-block;
		width: 64rpx;
		height: 40rpx;
		background: rgba(1, 203, 136, 0.08);
		border-radius: 8rpx;

		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #01CB88;
		text-align: center;
		line-height: 40rpx;
		margin-left: 8rpx;
	}

	.devices_sn {
		height: 44rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.35);
		line-height: 44rpx;
		margin-left: 24rpx;
	}


	.transactionDetails {
		.xiaframes {
			display: block;
			width: 17rpx;
			height: 15rpx;
			position: relative;
			transform: rotate(-90deg);
		}

		.warning {
			display: flex;
			align-items: center;
			width: 100%;
			height: 44rpx;
			background: rgba(246, 82, 0, 0.09);

			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #F65200;
			margin-top: 10rpx;
		}

		.store_data_detail {
			width: 686rpx;
			min-height: 400rpx;
			background: #FFFFFF;
			border-radius: 0 0 16rpx 16rpx;
			margin: 0 auto;
			/* margin-top: 25rpx; */
			margin-bottom: 50px;

			.dataList {
				width: 100%;
				/* background: #FFFFFF; */

				.dataitem {
					margin-left: 32rpx;
					height: 154rpx;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #E2E2E2;
					flex-direction: column;
					justify-content: center;


					.name {
						height: 40rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.85);
						line-height: 40rpx;
					}

					.amount {
						display: flex;
						align-items: center;
						height: 44rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.85);
						line-height: 44rpx;

						position: absolute;
						right: 25rpx;
					}

					.row1 {
						display: flex;
						align-items: center;
						width: 100%;
						// margin-left: 32rpx;
						position: relative;
					}

					.row2 {
						width: 100%;

						height: 44rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.35);
						line-height: 44rpx;
						// padding-left: 32rpx;
					}
				}
			}

			.jiaoyi {
				display: flex;
				align-items: center;

				height: 100rpx;
				/* background: #FFFFFF; */
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				padding-left: 24rpx;
			}
		}

		.select_time {
			width: 686rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			margin: 0 auto;
			margin-top: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.xia {
				width: 17rpx;
				height: 15rpx;
				position: relative;
			}

			.time {
				width: 32rpx;
				height: 32rpx;
				position: relative;
			}

			.content {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
				line-height: 40rpx;
				padding: 0 16rpx;
			}
		}

		.tisp {
			height: 33rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #868686;
			line-height: 33rpx;
			margin-left: 48rpx;
			margin-top: 12rpx;
		}

		.store_data {
			width: 686rpx;
			/* min-height: 890rpx; */
			background: #FFFFFF;
			/* border-radius: 16rpx; */
			margin: 0 auto;
			margin-top: 25rpx;
			border-radius: 16rpx 16rpx 0 0;

			.rowboxh {
				width: 638rpx;
				/* height: 100rpx; */
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto;
				padding-top: 24rpx;

				.rowl {
					display: flex;
					align-items: center;
				}

				.rowr {
					height: 33rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.5);
					line-height: 33rpx;

					.text {
						color: rgba(0, 0, 0, 0.85) !important;
					}
				}

				.xia {
					width: 17rpx;
					height: 15rpx;
					position: relative;
				}
			}

			.dataList {
				width: 638rpx;
				/* height: 72rpx; */
				margin: 0 auto;

				.catering {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.85);
					line-height: 42rpx;
				}

				.count {
					font-size: 24rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.35);
					line-height: 28rpx;
					margin-left: 22rpx;
				}

				.amount {
					font-size: 28rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.85);
					line-height: 32rpx;
					position: absolute;
					right: 0;
				}

				.dataitem {
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.line {
					width: 542rpx;
					height: 0.5px;
					background-color: #E2E2E2;
					position: absolute;
					bottom: -30rpx;
				}

				.ritbox {
					position: relative;
					width: 542rpx;
				}

				.weuiicon {
					width: 72rpx;
					height: 72rpx;
					position: relative;
				}
			}

			.rowbox {
				height: 168rpx;
				display: flex;
				align-items: center;
				padding-left: 18rpx;
				padding-right: 25rpx;
				justify-content: space-between;
				margin-top: 10rpx;

				.rowltxt {
					height: 28rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;
				}

				.rowltxt2 {
					height: 54rpx;
					font-size: 60rpx;
					font-family: AlibabaSans102Ver2-Medium, AlibabaSans102Ver2;
					font-weight: 500;
					color: #333333;
					line-height: 54rpx;
					margin-top: 18rpx;
				}

				.rowl {
					text-align: left;
					height: 100rpx;
					margin-top: 18rpx;
				}

				.rowr {
					text-align: right;
					height: 100rpx;
				}
			}

		}

		.default {}

		.gaofengqi,
		.nodata {
			text-align: center;
			margin-top: 341rpx;
		}

		.gaofengqi {
			image {
				width: 500rpx;
				height: 254rpx;
				position: relative;
			}
		}

		.text1 {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.45);
			line-height: 40rpx;
		}

		.text2 {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.25);
			line-height: 40rpx;
		}

		.nodata {
			image {
				width: 499rpx;
				height: 311rpx;
				position: relative;
			}
		}
	}
</style>