<template>
	<view class="time-wrapper">
		<view v-for="(v, i) in timeList" :key="i" class="timelistbox">
			<view class="time-item" @tap="changeTime(v.value)" :class="{ 'time-selected':v.value==selected }">
				{{v.label}}
			</view>
			<view class="xian" v-if="v.value==selected "> </view>
		</view>
	</view>

	<view class="pageSalesSummaryContent">
		<view class="">
			<view class="">
				实收金额(元)
			</view>
			<view class="">
				{{list.sale?list.sale.incomeAmountAll:0}}
			</view>
		</view>
		<view class="">
			<view class="">
				优惠金额(元)
			</view>
			<view class="">
				{{list.count?list.count.saveAmount:0}}
			</view>
		</view>
		<view class="">
			<view class="">
				客单价(元)
			</view>
			<view class="">
				{{list.count?list.count.unitPrice:0}}
			</view>
		</view>
		<view class="">
			<view class="">
				会员消费(元)
			</view>
			<view class="">
				{{list.vip?list.vip.useAmount:0}}
			</view>
		</view>
		<view class="">
			<view class="">
				新增会员(人)
			</view>
			<view class="">
				{{list.vip?list.vip.newFlow:0}}
			</view>
		</view>
		<view class="">
			<view class="">
				翻台率(%)
			</view>
			<view class="">
				{{list.count?list.count.turnoverRate:0}}
			</view>
		</view>
	</view>
	<view class="table-scroll">
		<!-- 		<table class="table" cellspacing="0">
			<thead class="thead">
				<tr style="background-color: #aebad2;color: #fff;" height='41'>
					<th style="width: 540rpx;">商品名称</th>
					<th style="width: 215rpx;">总数量</th>
					<th>金额</th>
				</tr>
			</thead>
			<tbody class="tbody">
				<tr v-for="(item,index) in tableList" :key="item.productId">
					<td style="width: 500rpx;padding-left: 16rpx;">
						<image v-if="index==0" src="../pageTable/index/images/1.png" style="width: 22rpx;height: 30rpx;"
							mode=""></image>
						<image v-else-if="index==1" src="../pageTable/index/images/2.png"
							style="width: 22rpx;height: 30rpx;" mode=""></image>
						<image v-else-if="index==2" src="../pageTable/index/images/3.png"
							style="width: 22rpx;height: 30rpx;" mode=""></image>
						<span v-else>{{index}}</span>
						&nbsp;&nbsp;{{item.productName}}
					</td>
					<td style="padding-left: 16rpx;">{{item.num}}</td>
					<td style="padding-left: 16rpx;">{{item.salesAmount}}</td>
				</tr>
			</tbody>
		</table>
	 -->


		<template>
			<view class="color-333 u-font-28   bg-gray default-box-padding" style="padding-top:80px;">
				<scroll-view :scroll-x="true" class="bg-fff table u-text-center">
					<view class="bg-fff border-r-12  u-flex no-wrap u-col-top">
						<view class="constantbox">
							<view class="constantboxitem">
								<view class="head">商品名称</view>
								<view class="head">总数量</view>
								<view class="head">金额</view>
							</view>
							<view class="constantboxitem" v-for="(item,index) in tableList" :key="index"
								@click="toDetail(item)">
								<view class="head" style="padding-left: 16rpx;">
									<image v-if="index==0" src="../pageTable/index/images/1.png"
										style="width: 22rpx;height: 30rpx;" mode=""></image>
									<image v-else-if="index==1" src="../pageTable/index/images/2.png"
										style="width: 22rpx;height: 30rpx;" mode=""></image>
									<image v-else-if="index==2" src="../pageTable/index/images/3.png"
										style="width: 22rpx;height: 30rpx;" mode=""></image>
									&nbsp;&nbsp;{{item.productName}}
								</view>
								<view class="head">{{item.num}}</view>
								<view class="head">{{item.salesAmount || '无'}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <view style="height: 100px;"></view> -->
			</view>
		</template>
	</view>
	<view class="bottombtn" @tap="toUrl">
		更多 <uni-icons type="right" size="16"></uni-icons>
	</view>
	<datePickerview @confirm="datePickerConfirm" ref="datePicker"></datePickerview>
</template>

<script setup>
	import datePickerview from './components/my-date-pickerview.vue'
	import {
		summaryTrade,
		dateProduct
	} from '@/http/yskApi/requestAll.js';
	import {
		onMounted,
		getCurrentInstance,
		ref
	} from 'vue';
	import dayjs from 'dayjs' //时间格式库
	import go from '@/commons/utils/go.js'
	const timeList = [{
			label: '今天',
			value: 'today'
		},
		{
			label: '昨天',
			value: 'yesterday'
		},
		{
			label: '本周',
			value: 'circumference'
		}, {
			label: '本月',
			value: 'moon'
		},
		{
			label: '自定义',
			value: 'custom'
		}
	]
	let selected = ref('today')
	let list = ref([])
	const currentInstance = getCurrentInstance()
	let tableList = ref([])
	let day = ref(1)

	function toUrl() {
		go.to('PAGES_PRODUCT_SALES_RANKING', {
			day: day.value
		})
	}

	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'
		}
		summaryTrade({
			shopId: uni.getStorageSync('shopId'),
			startTime,
			endTime,
		}).then((res) => {
			list.value = res
		})
	}
	onMounted(() => {
		getlist()
		gettableData()
	})

	function datePickerConfirm(e) {
		getlist(e.start, e.end)
		// gettableData() day如日期不能是1 7 30 就回报错

	}

	function changeTime(e) {

		selected.value = e
		if (e == 'custom') {
			currentInstance.ctx.$refs.datePicker.toggle()
		} else {
			getlist()
			gettableData()
		}
	}

	// 获取表格数据
	function gettableData() {
		if (selected.value == 'today') {
			day.value = 1
		} else if (selected.value == 'yesterday') {
			day.value = 1
		} else if (selected.value == 'circumference') {
			day.value = 7
		} else if (selected.value == 'moon') {
			day.value = 30
		} else if (selected.value == 'custom') {
			day.value = 30
		}
		dateProduct({
			shopId: uni.getStorageSync('shopId'),
			day: day.value,
			page: 0,
			size: 5
		}).then((res) => {
			tableList.value = res.productList.content
		})

	}
	// 获取当前时间
	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}`
	}
</script>
<style>
	page {
		background: #f6f6f6;
	}
</style>
<style lang="scss" scoped>

	.fixed-top {
		padding: 32rpx 28rpx;
		z-index: 100;
	}

	.bottom {
		background-color: transparent;
		bottom: 84rpx;
		left: 28rpx;
		right: 28rpx;
	}

	.table {
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		overflow: hidden;
		font-size: 24rpx;

		.constantbox {
			.constantboxitem {
				display: flex;

				.head {
					width: 220rpx;
					padding: 32rpx 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
				}

				.head:nth-child(4) {
					width: 300rpx;
				}

				.head:nth-child(5) {
					width: 300rpx;
				}
			}

			.constantboxitem:nth-child(even) {
				background: #fff;
			}

			.constantboxitem:nth-child(odd) {
				background: #F7F6FB;
			}

			.constantboxitem:nth-child(1) {
				background: #AEBAD2;
				color: #fff;
				font-size: 24rpx;
			}
		}

		.item:nth-of-type(2n+1) {
			background-color: rgb(249, 249, 249);
		}
	}
</style>

<style scoped lang="less">
	.time-wrapper {
		display: flex;
		justify-content: space-around;
		padding-bottom: 16rpx;
		padding-top: 16rpx;
		background-color: #fff;

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

	.pageSalesSummaryContent {
		height: 320rpx;
		margin: 20rpx 28rpx;
		background-image: url('./svg/bgimg.svg');
		background-size: 694rpx 320rpx;
		padding: 48rpx 28rpx;
		.df;
		justify-content: space-between;
		flex-wrap: wrap;

		>view {
			padding-right: 52rpx;
			color: #fff;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
		}
	}

	// 表格
	.table-scroll {
		// width: calc(100% - 5px);
		overflow-x: scroll;
		white-space: nowrap;
		margin: 32rpx 28rpx;
		margin-right: 30rpx;
		border-radius: 30rpx 30rpx 0 0;

	}

	.table-scroll .table {
		table-layout: fixed;
		// width: calc(100% - 10rpx);
	}

	.table-scroll .thead {
		display: table-row;
		background-color: bisque;
		font-size: 24rpx;
	}

	.table-scroll .tbody {
		overflow-y: scroll;
		overflow-x: hidden;
		display: block;
		// width: 1040rpx;
		width: 100%;
		// width: calc(100% );
	}

	// .table-scroll th,
	// td {
	// 	height: 82rpx;
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	width: 250rpx;
	// 	// border: 0.7rpx solid red;
	// 	border: 0.7rpx solid rgba(126, 155, 212, 0.27);
	// }

	.bottombtn {
		width: 694rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		margin: 0rpx auto;
		background: #F1F1F1;
		font-size: 24rpx;
		border-radius: 0rpx 0rpx 28rpx 28rpx;
	}

	.df() {
		display: flex;
		align-items: center;
	}
</style>
<style>
	.min-page{
		height: 20vh;
	}
</style>