<template>
	<view class="statistics">
		<view class="title">
			<text>数据统计</text>
		</view>
		<view class="statisticsBox">
			<view class="time-wrapper u-m-l-10 u-m-r-10">
				<view v-for="(v, i) in timeList" :key="i" class="timelistbox">
					<view class="time-item" @tap="changeTime(v.value,i)" :class="{ 'time-selected':v.value==selected }">
						{{v.label}}
					</view>
					<!-- <view class="xian" v-if="v.value==selected "> </view> -->
				</view>
			</view>
			<view class="time_bootom_line">
				<view class="block" :style="{
					transform:'translateX('+comBlockX+'rpx) rotate(45deg) '
				}"></view>
			</view>
			<view class="bottom"></view>
			<div class="u-flex u-row-between u-font-28 color-333 ">
				<div class="  u-flex-1 ">

					<view class="u-m-t-32">
						<view class="">营业额</view>
						<view class="u-m-t-16">
							<up-text bold color="#318AFE" size="20" mode="price" :text="yingyeE"></up-text>
						</view>
					</view>
					<view class="u-m-t-20">
						<view class="">退款</view>
						<view class="u-m-t-14">
							<up-text color="#333" size="14" bold mode="price" :text="refundCount"></up-text>
						</view>
					</view>
				</div>
				<view class="line"></view>
				<view class="payList u-flex-1 u-p-l-40">
					<view class="li w-full u-flex u-row-between u-font-24 color-333" v-for="(item,index) in list"
						:key="index">
						<view class="u-flex">
							<view :style="returnColorStyle(item,index)" class="circle"></view>
							<view class="u-m-l-8">
								{{item.payType}}
							</view>
						</view>

						<view style="text-align: center;" class="u-m-t-6">
							{{item.payAmount}}
						</view>
					</view>
				</view>
			</div>


			<!-- <view class="u-m-t-8 u-flex u-row-center u-font-24 u-col-center color-666">
				<view class="u-flex" @click="toggleShowAll">
					<view>{{!showAll?'展开全部':'收起全部' }}</view>
					<view class="u-flex  u-col-center u-m-t-4 tranistion-2" :class="{rotate:showAll}">
						<up-icon color="#666" name="arrow-down" :size="12"></up-icon>
					</view>
				</view>
			</view> -->
		</view>
	</view>
	<datePickerview @confirm="datePickerConfirm" ref="datePicker" style="z-index: 999;"></datePickerview>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';

	import dayjs from 'dayjs' //时间格式库
	import datePickerview from './my-date-pickerview.vue'

	import {
		getTrade
	} from '@/http/api/summary.js'

	let selected = ref('today')
	let showAll = ref(false);
	let list = ref()
	const pageData = reactive({
		list: [{
				payType: '微信小程序',
				key: 'wechatPayAmount',
				payAmount: 0,
				bgcolor: '#5AA25F'
			},
			{
				payType: '支付宝小程序',
				key: 'aliPayAmount',
				payAmount: 0,
				bgcolor: '#31ACFE'
			},
			{
				payType: '主扫收款',
				key: 'scanPayAmount',
				payAmount: 0,
				bgcolor: '#FF5C6D'
			},
			{
				payType: '现金',
				key: 'cashPayAmount',
				payAmount: 0,
				bgcolor: '#FC843F'
			},
			{
				payType: '充值',
				key: 'rechargeAmount',
				payAmount: 0,
				bgcolor: '#9090FF'
			},
			{
				payType: '挂账',
				key: 'creditPayAmount',
				payAmount: 0,
				bgcolor: '#7BA7A4'
			},
			// {payType: '收款码收款', key:'', payAmount: 0,bgcolor:'#5AA25F'},
		],
	})

	function returnColorStyle(item) {
		return {
			backgroundColor: item.bgcolor
		}
	}

	function toggleShowAll() {
		showAll.value = !showAll.value
		setList()
	}

	function setList() {
		// list.value = showAll.value ? pageData.list : pageData.list.slice(0, 4)
		list.value = pageData.list
	}


	const emit = defineEmits(['totalRevenue'])
	const timeList = [{
			label: '今天',
			value: 'today'
		},
		{
			label: '昨天',
			value: 'yesterday'
		},
		{
			label: '本周',
			value: 'circumference'
		}, {
			label: '本月',
			value: 'moon'
		},
		{
			label: '自定义',
			value: 'custom'
		}
	]
	const datePicker = ref()
	onShow((options) => {
		let iToken = uni.getStorageSync('iToken').tokenValue
		if (iToken) {
			getlist()
		} else {
			uni.redirectTo({
				url: '/pages/login/index'
			})
		}
	});

	const yingyeE = ref(0)
	const refundCount = ref(0)
	/**
	 * 获取统计数据
	 * @param {Object} start
	 * @param {Object} end
	 */
	function getlist(start, end) {
		let startTime, endTime;
		if (selected.value == 'today') {
			startTime = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
			endTime = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
		} else if (selected.value == 'yesterday') {
			startTime = formatTime() + ' 00:00:00'
			endTime = formatTime() + ' 23:59:59'
		} else if (selected.value == 'circumference') {
			var now = new Date();
			var nowTime = now.getTime();
			var day = now.getDay();
			var oneDayTime = 24 * 60 * 60 * 1000;
			//显示周一
			var MondayTime = nowTime - (day - 1) * oneDayTime;
			//显示周日
			var SundayTime = nowTime + (7 - day) * oneDayTime;
			startTime = dayjs(MondayTime).format('YYYY-MM-DD 00:00:00')
			endTime = dayjs(SundayTime).format('YYYY-MM-DD 23:59:59')
		} else if (selected.value == 'moon') {
			startTime = dayjs().startOf('month').format('YYYY-MM-DD') + ' 00:00:00'
			endTime = dayjs().endOf('month').format('YYYY-MM-DD') + ' 23:59:59'
		} else if (selected.value == 'custom') {
			let s = start.substring(0, start.indexOf(' '))
			let e = end.substring(0, end.indexOf(' '))
			startTime = s + ' 00:00:00'
			endTime = e + ' 23:59:59'
		}
		getTrade({
			beginDate: startTime,
			endDate: endTime,
		}).then((res) => {
			refundCount.value = res.refundCount
			for (var key in res) {
				pageData.list.map(item => {
					if (item.key == key) {
						item.payAmount = res[key]
					}
				})
			}
			setList()
			let incomeAmountAll = 0;
			pageData.list.map(item => {
				incomeAmountAll += (item.payAmount || 0)
			})

			yingyeE.value = incomeAmountAll
			emit('totalRevenue', incomeAmountAll)
		})
	}


	/**
	 * 日期筛选确认
	 * @param {Object} e
	 */
	function datePickerConfirm(e) {
		getlist(e.start, e.end)
	}

	// 获取当前时间
	function getdate() {
		const dt = new Date();
		const y = dt.getFullYear();
		const m = (dt.getMonth() + 1 + "").padStart(2, "0");
		const d = (dt.getDate() + "").padStart(2, "0");
		const hh = (dt.getHours() + "").padStart(2, "0");
		const mm = (dt.getMinutes() + "").padStart(2, "0");
		const ss = (dt.getSeconds() + "").padStart(2, "0");
		return `${y}-${m}-${d}`;
	}

	// 获取昨天时间
	const formatTime = () => {
		let strDate = getdate()
		let dateFormat = new Date(strDate);
		dateFormat = dateFormat.setDate(dateFormat.getDate() - 1);
		dateFormat = new Date(dateFormat);
		let y = dateFormat.getFullYear()
		let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
		let d = dateFormat.getDate().toString().padStart(2, '0')
		return `${y}-${m}-${d}`
	}

	const timeSleIndex = ref(0)

	function changeTime(e, index) {
		selected.value = e
		timeSleIndex.value = index
		if (e == 'custom') {
			datePicker.value.toggle()
		} else {
			getlist()
		}
	}
	
	const xArr=[0,134,262,390,532]
	const comBlockX = computed(() => {
		return xArr[ timeSleIndex.value]
	})
</script>
<style scoped lang="less">
	ul,
	li {
		list-style: none;
		padding: 0;
	}

	.rotate {
		transform: rotate(180deg);
	}

	.statistics {
		padding: 0 28rpx;
		margin-top: 50rpx;
		position: relative;

		.title {
			position: absolute;
			width: 170rpx;
			left: 18rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-weight: 700;
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			background: linear-gradient(109deg, #70B9FF 0%, #629FFA 100%);
			border-radius: 12rpx 12rpx 12rpx 0rpx;
			top: -16px;
		}

		.statisticsBox {
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 48rpx 32rpx 32rpx;
			box-sizing: border-box;
			margin-top: 54rpx;

			.bottom {}

			.time-wrapper {
				display: flex;
				justify-content: space-between;

				.timelistbox {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;

					.time-item {
						font-size: 28rpx;
						text-align: center;
						padding-bottom: 10rpx;
					}

					.xian {
						width: 40rpx;
						height: 3rpx;
						background-color: #318AFE;
						// position: absolute;
						// left: 16rpx;
						// bottom: 0;
					}
				}

				.time-selected {
					color: #318afe;
					font-size: 32rpx !important;
					font-weight: bold;
				}
			}

			.line {
				width: 0rpx;
				height: 170rpx;
				border: 2rpx solid #EEE8E8;
			}

			.payList {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-wrap: wrap;

				.li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					white-space: nowrap;
					margin-top: 12rpx;

					>view {
						text-align: center;
					}
				}
			}
		}
	}

	.circle {
		width: 8rpx;
		height: 8rpx;
		border-radius: 8rpx;
	}

	.time_bootom_line {
		height: 16rpx;
		position: relative;
		border-bottom: 1px solid #629FFA;

		.block {
			width: 18rpx;
			height: 18rpx;
			box-sizing: border-box;
			background: #fff;
			position: absolute;
			border-top: 0.5rpx solid #629FFA;
			border-left: 0.5rpx solid #629FFA;
			left: 30rpx;
			top: 6rpx;
			transform: rotate(45deg);
			transform-origin: center;
			transition: all .2s linear;
		}
	}
</style>