<template>
	<view class="content">
		<view
			style="padding: 120rpx 0 80rpx;background: #19be6b;display: flex;justify-content: space-around;align-items: center;color: #FFF;">
			<!-- <view @click="saoma">
				<view style="text-align: center;">
					<wd-icon name="scan1" size="28px"></wd-icon>
				</view>
				<view style="text-align: center;margin-top: 10rpx;">
					收款
				</view>
			</view> -->
			<view @click="utils.toUrl('/store/recon/list')">
				<view style="text-align: center;">
					<wd-icon name="view-module" size="28px"></wd-icon>
				</view>
				<view style="text-align: center;margin-top: 10rpx;">
					账单
				</view>
			</view>
			<view @click="show_tuikuan = 1">
				<view style="text-align: center;">
					<wd-icon name="enter" size="28px"></wd-icon>
				</view>
				<view style="text-align: center;margin-top: 10rpx;">
					退款
				</view>
			</view>
		</view>

		<!-- <view class="action-box">
			<view>
				<wd-icon color="#19be6b" name="edit-outline" size="14px"></wd-icon>
				<view>
					订单退款
				</view>
			</view>
			<view>
				<wd-icon color="#ff9900" name="scan" size="14px"></wd-icon>
				<view>
					订单核销
				</view>
			</view>
		</view> -->


		<view
			style="padding: 20rpx;display: flex;align-items: center;justify-content: space-between;margin-top: 40rpx;">
			<view style="color: #999;">
				统计信息
			</view>
			<view class="pay-type-box">
				<view @click="updatePay(0)" :class="pay_type == 0 ? 'time-active' : ''">
					总计
				</view>
				<view @click="updatePay(1)" :class="pay_type == 1 ? 'time-active' : ''">
					微信
				</view>
				<view @click="updatePay(2)" :class="pay_type == 2 ? 'time-active' : ''">
					支付宝
				</view>
			</view>
			<view style="color: #f29100;display: flex;align-items: center;" @click="show_shop = true">
				{{ shop_info ? shop_info.name : '门店筛选' }}
				<wd-icon name="swap" color="#f29100" size="18px"></wd-icon>
			</view>
		</view>

		<!-- 时间 -->
		<view class="content-time">
			<view @click="updateTime(0)" :class="time_type == 0 ? 'time-active' : ''">
				昨天
			</view>
			<view @click="updateTime(1)" :class="time_type == 1 ? 'time-active' : ''">
				今天
			</view>
			<view :class="time_type == 2 ? 'time-active' : ''">
				<wd-calendar type="daterange" v-model="date_list" allow-same-day :formatter="formatter"
					@cancel="handleCancel" @confirm="handleConfirm" use-default-slot>
					<text @click="updateTime(2)">其他</text>
				</wd-calendar>
			</view>
		</view>
		<view class="content-time-info">
			{{ start_time }} - {{ end_time }}
		</view>

		<template v-if="content_info">
			<view class="info-item" style="background: #19be6b;color: #FFF;">
				<view>
					<view style="font-size: 24rpx;">
						订单总金额（元）
					</view>
					<view style="font-weight: bold;margin-top: 10rpx;">
						{{ content_info.order_total_price }}
					</view>
				</view>
				<view style="width: 3rpx;background: #F0F0F0;height: 100rpx;"></view>
				<view>
					<view>
						实收总金额（元）
					</view>
					<view style="font-weight: bold;margin-top: 10rpx;">
						{{ content_info.order_pay_price }}
					</view>
				</view>
			</view>

			<view class="info-item">
				<view>
					<view style="font-size: 24rpx;">
						优惠总金额（元）
					</view>
					<view style="font-weight: bold;margin-top: 10rpx;">
						{{ content_info.order_prefer_price }}
					</view>
				</view>
				<view style="width: 3rpx;background: #F0F0F0;height: 100rpx;"></view>
				<view>
					<view>
						交易总笔数
					</view>
					<view style="font-weight: bold;margin-top: 10rpx;">
						{{ content_info.order_count }}
					</view>
				</view>
			</view>

			<view class="info-item">
				<view>
					<view style="font-size: 24rpx;">
						退款总金额（元）
					</view>
					<view style="font-weight: bold;margin-top: 10rpx;">
						{{ content_info.order_refund_price }}
					</view>
				</view>
				<view style="width: 3rpx;background: #F0F0F0;height: 100rpx;"></view>
				<view>
					<view>
						退款总笔数
					</view>
					<view style="font-weight: bold;margin-top: 10rpx;">
						{{ content_info.order_refund_num }}
					</view>
				</view>
			</view>
			<view class="info-item">
				<view>
					<view style="font-size: 24rpx;">
						余额收款（元）
					</view>
					<view style="font-weight: bold;margin-top: 10rpx;">
						{{ content_info.order_balance_price }}
					</view>
				</view>
				<view style="width: 3rpx;background: #F0F0F0;height: 100rpx;"></view>
				<view>

				</view>
			</view>
		</template>

		<view class="qrcode" v-if="show_qrcode">
			<div id="reader"></div>
		</view>
		
		<wd-popup v-model="show_shop" custom-style="padding: 30px 40px;width: 80%;border-radius: 20rpx;" @close="handleClose">
			<view class="shop_item_box" style="max-height: 1000rpx;overflow: scroll;">
				<view @click="selectShop(null)">全部门店</view>
				<view v-for="item in shop_list" @click="selectShop(item)">
					{{ item.name }}
				</view>
			</view>
		</wd-popup>
		
		<wd-popup v-model="show_tuikuan" custom-style="padding: 30px 40px;width: 80%;border-radius: 20rpx;" @close="tuikuan_info = {}">
			<view style="text-align: center;color: #000;">
				退款信息
			</view>
			<view class="shop_item_box" style="max-height: 1000rpx;overflow: scroll;">
				<view style="display: flex;align-items: center;justify-content: space-between;border: none;">
					<view style="width: 150rpx;">
						订单号：
					</view>
					<view style="width: calc(100% - 150rpx);">
						<wd-input style="width: 100%;" v-model="tuikuan_info.order_no" />
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;border: none;">
					<view style="width: 150rpx;">
						退款金额：
					</view>
					<view style="width: calc(100% - 150rpx);">
						<wd-input type="digit" style="width: 100%;" v-model="tuikuan_info.refund_price" />
					</view>
				</view>
				<view style="border: none;display: flex;align-items: center;justify-content: space-around;">
					<wd-button type="error" @click="show_tuikuan = 0;tuikuan_info = {}">取消</wd-button>
					<wd-button @click="tuikuan(tuikuan_info.order_no)">确认</wd-button>
				</view>
			</view>
		</wd-popup>
		
		

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import utils from '@/utils/utils.js';
	import recon from '@/api/store/recon.js';
	import {
		Html5Qrcode
	} from "html5-qrcode"

	const time_type = ref(1);
	const pay_type = ref(0);
	const start_time = ref(null);
	const end_time = ref(null);
	const content_info = ref(null);

	const shop_list = ref([]);
	const shop_info = ref(null);
	const html5QrCode = ref(null);
	const show_qrcode = ref(0);
	
	const show_shop = ref(0);

	const date_list = ref([])
	
	const show_tuikuan = ref(0);
	const tuikuan_info = ref({})

	import {
		onShow,
	} from "@dcloudio/uni-app";

	const updateTime = (type) => {
		console.log(type, 'type')
		time_type.value = type
		if (type == 0) {
			const now = new Date();
			now.setTime(now.getTime() - 24 * 3600 * 1000)
			const year = now.getFullYear()
			const month = ('0' + (now.getMonth() + 1)).slice(-2)
			const day = ('0' + now.getDate()).slice(-2)
			start_time.value = year + '-' + month + '-' + day
			end_time.value = year + '-' + month + '-' + day
			getContent()
		} else if (type == 1) {
			const now = new Date();
			const year = now.getFullYear()
			const month = ('0' + (now.getMonth() + 1)).slice(-2)
			const day = ('0' + now.getDate()).slice(-2)
			start_time.value = year + '-' + month + '-' + day
			end_time.value = year + '-' + month + '-' + day
			getContent()
		} else {

		}
	}

	const updatePay = (type) => {
		pay_type.value = type
		getContent()
	}

	function handleConfirm({
		value
	}) {
		const now = new Date();
		now.setTime(value[0])
		const year = now.getFullYear()
		const month = ('0' + (now.getMonth() + 1)).slice(-2)
		const day = ('0' + now.getDate()).slice(-2)
		start_time.value = year + '-' + month + '-' + day

		const now1 = new Date();
		now1.setTime(value[1])
		const year1 = now1.getFullYear()
		const month1 = ('0' + (now1.getMonth() + 1)).slice(-2)
		const day1 = ('0' + now1.getDate()).slice(-2)
		end_time.value = year1 + '-' + month1 + '-' + day1
		getContent()
	}

	function handleCancel(row) {
		console.log('handleCancel', row)
		updateTime(1)
	}

	const formatter = (day) => {
		const date = new Date(day.date)
		const now = new Date()
		const year = date.getFullYear()
		const month = date.getMonth()
		const da = date.getDate()
		const nowYear = now.getFullYear()
		const nowMonth = now.getMonth()
		const nowDa = now.getDate()
		if (year === nowYear && month === nowMonth && da === nowDa) {
			day.topInfo = '今天'
		}
		if (day.type === 'start') {
			day.bottomInfo = '开始'
		}
		if (day.type === 'end') {
			day.bottomInfo = '结束'
		}
		if (day.type === 'same') {
			day.bottomInfo = '开始/结束'
		}
		return day
	}

	const getContent = (row) => {
		recon.content({
			start_time: start_time.value,
			end_time: end_time.value,
			pay_type: pay_type.value,
			shop_id: shop_info.value ? shop_info.value.id : 0
		}).then(res => {
			if (res.code == 0) {
				content_info.value = res.data
			} else {
				showNotify({
					type: 'error',
					message: '出错了'
				})
			}

		})
	}
	
	const getShopList = (row) => {
		recon.shopList({
			
		}).then(res => {
			if (res.code == 0) {
				shop_list.value = res.data
			} else {
				
			}
	
		})
	}
	
	const selectShop = (row) => {
		shop_info.value = row
		show_shop.value = 0
		getContent()
	}

	const saoma = (row) => {
		Html5Qrcode.getCameras()
			.then((devices) => {
				if (devices && devices.length) {
					html5QrCode.value = new Html5Qrcode("reader");
					start();
				}
			})
			.catch((err) => {
				// handle err
				html5QrCode.value = new Html5Qrcode("reader");
				uni.showToast({
					icon: 'none',
					title: '您需要授予相机访问权限'
				})
			});
	}

	const start = () => {
		show_qrcode.value = 1
		html5QrCode.value
			.start({
					facingMode: "environment"
				}, {
					fps: 2,
					qrbox: {
						width: 250,
						height: 250
					},
				},
				(decodedText, decodedResult) => {
					recon.faceOrder({
						qr_code: decodedText
					}).then(res => {
						if (res.code == 0) {
							show_qrcode.value = 0
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					
					})
				}
			)
			.catch((err) => {
				show_qrcode.value = 0
				uni.showToast({
					icon: 'none',
					title: '扫码出错'
				})
			});
	}

	const stop = (row) => {
		html5QrCode.value.stop().then((ignore) => {
				// QR Code scanning is stopped.
				console.log("QR Code scanning stopped.");
			})
			.catch((err) => {
				// Stop failed, handle it.
				console.log("Unable to stop scanning.");
			});
	}



	let search_date = computed({
		get() {

		}
	})
	
	const tuikuan = (order_no) => {
	
		uni.showModal({
			title: '提示',
			content: '是否确认退款？',
			success(res) {
				if (res.confirm) {
					uni.showLoading({
						title: '提交中'
					})
					recon.tuikuan({
						order_no,
						refund_price: tuikuan_info.value ? tuikuan_info.value.refund_price : 0
					}).then(res => {
						uni.hideLoading()
						if (res.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '退款成功'
							})
							show_tuikuan.value = 0
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					
					})
				}
			}
		})
	
	};


	// 初始化调用获取一行数据
	onShow(() => {

		if (time_type.value == 1) {
			const now = new Date();
			const year = now.getFullYear()
			const month = ('0' + (now.getMonth() + 1)).slice(-2)
			const day = ('0' + now.getDate()).slice(-2)
			start_time.value = year + '-' + month + '-' + day
			end_time.value = year + '-' + month + '-' + day
		}

		getContent()
		getShopList()
	})
</script>

<style lang="scss" scoped>
	.action-box {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		font-size: 24rpx;
	}

	.action-box>view {
		padding: 40rpx;
		background: #FFF;
		width: 40%;
		box-shadow: 0 0 10rpx #aaa;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.action-box>view>view {
		margin-left: 10rpx;
	}

	.content-time {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #F0F0F0;
		padding: 20rpx;
		background: #FFF;
		// margin-top: 30rpx;
	}

	.content-time>view {
		margin: 10rpx;
	}

	.content-time>.time-active {
		color: #18b566;
	}

	.content-time-info {
		text-align: center;
		font-size: 24rpx;
		background: #FFF;
		padding: 20rpx;
		color: #71d5a1;
	}

	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFF;
		color: #333;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.info-item>view {
		text-align: center;
		width: 50%;
		font-size: 26rpx;
	}

	.pay-type-box {
		display: flex;
		justify-content: center;
		font-size: 28rpx;
	}

	.pay-type-box>view {
		padding: 4rpx 10rpx;
		margin: 0 10rpx;

	}

	.pay-type-box>.time-active {
		color: #fff;
		background: #18b566;
		border-radius: 10rpx;
	}

	.qrcode {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba($color: #000000, $alpha: 0.48);
		z-index: 5;
	}

	#reader {
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	
	.shop_item_box>view {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F0F0F0;
	}
</style>