<template>
	<view class="myIntegral">
		<view class="top">
			<img class="left" src="https://www.jiubaotongxue.love/image/nav10.png" alt="" @click="backs" />
			<text class="wen"  style="font-size: 36rpx;">积分明细</text>
		</view>
		<view class="header">
			<view class="t" @click="explainShow=1">
				积分说明 >
			</view>
			<view class="c">
				我的总积分
			</view>
			<view class="b">
				{{Information.points ?Information.points:'0' }}
			</view>
		</view>
		<view class="title" @click="windowYears" v-if="shopData.length>0">
			{{shopData[mingXI].date ?shopData[mingXI].date :'暂无记录' }}<img class="r" src="https://www.jiubaotongxue.love/image/demo71.png" alt="" />
		</view>
		<scroll-view class="auto-mingxi" scroll-y="true">
			<view class="box">
				<view class="title">
					<view class="left" :class="{active:demo===0}" @click="add">
						积分获取
					</view>
					<view class="right" :class="{active:demo===1}" @click="removes">
						积分使用
					</view>
				</view>
				<view class="title-zong" v-if="demo===1&&shopData.length>0">
					<view class="z">
						月总使用积分：{{shopData[mingXI].total}}
					</view>
				</view>
				<view class="title-zongs" v-if="demo===0&&shopData.length>0">
					<view class="z">
						月总获取积分：{{shopData[mingXI].total}}
					</view>
				</view>
				<view class="shangding">

				</view>
				<view class="box-flex" v-if="demo===0&&shopData.length>0" v-for="(item,index) in shopData[mingXI].pointsList" :key="item.id">
					<view class="lefts">
						<text class="t">{{item.commodityName}}</text>
						<text class="d">{{item.orderTime}}</text>
					</view>
					<view class="rightsa">
						+{{item.updatePoints}}
					</view>
				</view>
				<view style="width: 100%;height: 500rpx;text-align: center;"  v-if="demo===0&&shopData.length<=0">
					<img style="width: 480rpx;height: 400rpx;margin-top: 60rpx;margin-left: 50%;transform: translateX(-50%);"
						src="https://www.jiubaotongxue.love/image/demo111.png" alt="" />
					<view style="width: 100%;height: 50rpx;line-height: 50rpx;text-align: center;">
						暂无数据
					</view>
				</view>
				<view class="box-flex" v-if="demo===1&&shopData.length>0" v-for="(item,index) in shopData[mingXI].pointsList" :key="item.id">
					<view class="lefts">
						<text class="t">{{item.commodityName}}</text>
						<text class="d">{{item.orderTime}}</text>
					</view>
					<view class="rights">
						-{{item.updatePoints}}
					</view>
				</view>
			<view style="width: 100%;height: 500rpx;text-align: center;"  v-if="demo===1&&shopData.length<=0">
				<img style="width: 480rpx;height: 400rpx;margin-top: 60rpx;margin-left: 50%;transform: translateX(-50%);"
					src="https://www.jiubaotongxue.love/image/demo111.png" alt="" />
				<view style="width: 100%;height: 50rpx;line-height: 50rpx;text-align: center;">
					暂无数据
				</view>
			</view>
				<!-- <view class="ts">
					
				</view> -->
			</view>
		</scroll-view>
	</view>
	<view class="windowYear" v-if="years===1" @click="closes">
		<scroll-view scroll-y="true" class="box">
			<view class="boxs">
				<view class="title">
					请选择日期
				</view>
				<view class="box-flexs" v-for="(item,index) in shopData" :key="item.id" @click="getList(index)">
					{{item.date}}
				</view>
			</view>

		</scroll-view>
	</view>
	<explain v-if="explainShow===1" @close="close"></explain>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia';
	import {
		shopStor
	} from '../../stor/shop/shop.js'
	import {
		my
	} from '../../stor/my/my.js'
	const m = my()
	m.getInformation()
	const {
		Information
	} = storeToRefs(m)
	const s = shopStor()
	s.getShopData()
	const {
		shopData
	} = storeToRefs(s)
	const demo = ref(0)
	const mingXI = ref(0)
	const years = ref(0)
	const explainShow = ref(0)
	const close = (val) => {
		explainShow.value = val
	}
	const arrDemo = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
	const backs = () => {
		uni.navigateBack()
	}
	const windowYears = () => {
		years.value = 1

	}
	const getList = (index) => {
		mingXI.value = index
		years.value = 0
	}
	const removes = () => {
		s.getShopDatas()
		demo.value = 1
	}
	const add = () => {
		s.getShopData()
		demo.value = 0
	}
	const closes = () => {
		years.value = 0
	}
</script>

<style lang="scss">
	.myIntegral {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #f1f4fb;

		.top {
			width: 100%;
			height: 274rpx;
			background-image: url("https://www.jiubaotongxue.love/image/demo72.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: fixed;
			top: 0;

			.left {
				position: fixed;
				width: 64rpx;
				height: 64rpx;
				top: 100rpx;
				left: 20rpx;

			}

			.wen {
				position: fixed;
				display: block;
				font-size: 36rpx;
				left: 304rpx;
				top: 106rpx;
			}
		}

		.header {
			width: 92%;
			height: 248rpx;
			background-image: url("https://www.jiubaotongxue.love/image/demo70.png");
			background-size: 100% 100%;
			position: relative;
			margin-top: 176rpx;
			transform: translateX(-50%);
			margin-left: 50%;

			.t {
				width: 100%;
				height: 60rpx;
				text-align: right;
				box-sizing: border-box;
				font-size: 24rpx;
				padding-right: 45rpx;
				padding-top: 20rpx;
				line-height: 60rpx;
				color: #B98900;
			}

			.c {
				width: 100%;
				height: 30rpx;
				font-size: 26rpx;
				line-height: 30rpx;
				color: #8A6D19;
				box-sizing: border-box;
				padding-left: 60rpx;
			}

			.b {
				width: 100%;
				height: 74rpx;
				font-size: 64rpx;
				padding-left: 52rpx;
				box-sizing: border-box;
				margin-top: 5rpx;
			}
		}

		.title {
			width: 100%;
			height: 34rpx;
			display: flex;
			align-items: center;
			font-size: 34rpx;
			box-sizing: border-box;
			padding-left: 50rpx;
			position: relative;

			.r {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.auto-mingxi {
			width: 90%;
			transform: translateX(-50%);
			margin-left: 50%;
			height: 60%;
			background-color: #ffffff;
			margin-top: 24rpx;
			border-radius: 20rpx;
			position: relative;

			.box {
				width: 100%;
				height: 100%;
				position: relative;
				border-radius: 20rpx;

				.title {
					width: 100%;
					height: 114rpx;
					border-bottom: 1rpx solid #ccc;
					position: fixed;
					top: 0rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0;
					background-color: white;
					z-index: 10;
					border-radius: 20rpx;

					.left {
						width: 192rpx;
						height: 110rpx;
						text-align: center;
						line-height: 110rpx;
						margin-left: 70rpx;
						// border-bottom:9rpx solid #428aff ;
					}

					.right {
						width: 192rpx;
						height: 110rpx;
						text-align: center;
						line-height: 110rpx;
						margin-right: 70rpx;

					}

					.active {
						border-bottom: 7rpx solid #428aff;
					}
				}

				.title-zong {
					position: fixed;
					width: 100%;
					height: 108rpx;
					left: 50%;
					transform: translateX(-50%);
					top: 120rpx;
					background-color: white;
					color: #f68515;
					font-size: 24rpx;
					z-index: 10;

					.z {
						width: 90%;
						height: 58rpx;
						margin-left: 50%;
						transform: translateX(-50%);
						line-height: 58rpx;
						box-sizing: border-box;
						padding-left: 30rpx;
						margin-top: 40rpx;
						background-color: #FFF6D7;
					}
				}

				.title-zongs {
					position: fixed;
					width: 100%;
					height: 108rpx;
					left: 50%;
					transform: translateX(-50%);
					top: 120rpx;
					background-color: white;
					color: #f68515;
					font-size: 24rpx;
					z-index: 10;

					.z {
						width: 90%;
						height: 58rpx;
						background-color: #FFF6D7;
						margin-left: 50%;
						transform: translateX(-50%);
						line-height: 58rpx;
						box-sizing: border-box;
						padding-left: 30rpx;
						margin-top: 40rpx;
					}
				}

				.shangding {
					width: 100%;
					height: 230rpx;
					position: relative;
				}

				.box-flex {
					width: 90%;
					height: 120rpx;
					border-bottom: 1rpx solid #ddd;
					margin-top: 20rpx;
					margin-left: 50%;
					transform: translateX(-50%);
					position: relative;

					.lefts {
						width: 70%;
						height: 120rpx;

						.t {
							display: block;
							font-size: 30rpx;
						}

						.d {
							display: block;
							font-size: 24rpx;
							color: #666;
							margin-top: 20rpx;
						}
					}

					.rights {
						position: absolute;
						right: 25rpx;
						top: 20rpx;
						font-size: 40rpx;
						color: red;
					}

					.rightsa {
						position: absolute;
						right: 25rpx;
						top: 20rpx;
						font-size: 40rpx;
						color: #428aff;
					}
				}
			}
		}
	}

	.windowYear {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		background-color: rgba(0, 0, 0, 0.6);

		.box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 500rpx;
			max-height: 800rpx;
			background-color: white;
			border-bottom: 1rpx solid #ccc;

			.boxs {
				width: 100%;
				position: relative;

				.title {
					font-size: 36rpx;
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
				}

				.box-flexs {
					width: 100%;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					background-color: white;
					border-top: 1rpx solid #ccc;
				}
			}
		}

	}
</style>