<template>
	<view class="suggest-content">
		<navigation-bar-vue title="积分明细" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="card-detail">
			<view class="top-box">
				<view class="left-dom">
					<view class="left-dom-top">
						<image src="@/static/mine/points.png" mode="aspectFit">
						</image>可用积分
					</view>
					<view class="left-dom-bottom">{{pointsBalance}}</view>
				</view>
				<view class="right-dom" @click="outData()">提现</view>
			</view>
			<view v-if="!ifMember" class="huiyuan-box">
				<view class="dl-member-box" @click="goMemberCard()">
					<view class="dl-left">
						<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
						<text>开通会员 解锁更多权益</text>
					</view>
					<view class="dl-right">
						<view class="dl-go-view">立即开通</view>
					</view>
				</view>
			</view>
			<view class="data-list-box">
				<view class="content-box">
					<view class="dl-opt-box">
						<view class="dl-menu-box" v-for="(item,index) in menus">
							<view @click="itemClick(index,item)" class="dl-menu"
								:class="index==menuIndex?'dl-menu click':'dl-menu'">{{item}}</view>
						</view>
					</view>
					<view :class="['data-list',!ifMember?'no-member':'member']">
						<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus"
							refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
							<view class="item-dom" v-for="(item,index) in dataList">
								<view class="center-box">
									<view class="dl-notice-title">
										<view class="dl-text">{{item.title}}</view>
									</view>
									<view class="dl-bottom-text">{{item.createTime}}</view>
								</view>
								<view :class="['right-box','1'==item.type?'red-text':'']">
									{{'1'==item.type?'+':'-'}}{{item.points}}
								</view>
							</view>
							<view style="text-align: center" v-if="dataList.length==0">
								<image class="" src="@/static/images/nothing.png"></image>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="积分提现" placeholder="请输入提现金额"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import {formatNumberWithCommas} from '@/utils/common.js'
	import {pointList} from '@/api/business/member.js'
  import {toast} from '@/utils/common.js'
	export default {
		components: {
			navigationBarVue,
		},
		data() {
			return {
				//是否是会员
				ifMember: true,
				menus: ['积分收支明细'],
				menuIndex: 0,
				//积分明细
				dataList: [{
					fromCode: "",
					fromCodeText: "签到送积分",
					title: "用户签到，增加10积分",
					type: "1",
					points: 20,
					createTime: "2024-02-03 12:20:20"
				}, {
					fromCode: "",
					fromCodeText: "签到送积分",
					title: "用户签到，增加10积分",
					type: "1",
					points: 20,
					createTime: "2024-02-03 12:20:20"
				}],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
          userId:null
				},
				total: 0,
				//下来刷新状态
				isTriggered: false,
        userId:null,
        pointsBalance:0
			}
		},

    onLoad(option){
		  this.userId = option.userId
		  this.queryParams.userId = option.userId
      this.pointsBalance = option.pointsBalance
      this.initData()
    },

		methods: {
			/**
			 * 格式化数字
			 * @param {Object} number
			 */
			formatNumberWithCommas(number) {
				return formatNumberWithCommas(number)
			},

      /**初始化数据*/
      initData(){
        pointList(this.queryParams).then(res=>{
          if (res.code == 200){
            if (this.queryParams.pageNum == 1) {
              this.dataList = res.data.records
            } else {
              this.dataList = this.dataList.concat(res.data.records)
            }
            this.total = res.data.total
          }
        })
      },

			/**
			 * 提现
			 */
			outData() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				console.log(val)
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close()
			},
			/**
			 * 菜单点击
			 * @param {Object} index
			 * @param {Object} item
			 */
			itemClick(index, item) {
				this.menuIndex = index
				this.onRefresherrefresh()
			},
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
					toast("没有更多数据了")
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.queryParams.pageNum++
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.queryParams.pageNum = 1
				this.total = 0
			},
		}
	}
</script>

<style lang="scss">
	.suggest-content {
		padding-top: calc(90rpx + var(--status-bar-height));
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 32rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.card-detail {
			border-top: 1rpx solid #F2F2F2;
			background-color: #F2F2F2;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: center;
			position: relative;

			.top-box {
				padding: 20rpx 40rpx 0 40rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.left-dom {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: self-start;
					justify-content: center;

					.left-dom-top {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						justify-content: center;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}

					.left-dom-bottom {
						padding: 20rpx 0;
						font-size: 37rpx;
						font-weight: bold;
					}
				}

				.right-dom {
					text-align: center;
					width: 200rpx;
					padding: 10rpx 40rpx;
					background-color: #FC1F3E;
					color: white;
					border-radius: 40rpx;
				}
			}

			.huiyuan-box {
				width: 100%;
				padding: 0 30rpx;

				.dl-member-box {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					border-radius: 35rpx;
					justify-content: center;
					height: 100rpx;
					width: 100%;
					background: url('/static/index/member-bg.png');
					background-size: 100% 100%;
					background-position: center;
					/* 图片居中显示 */
					background-repeat: no-repeat;
					/* 不重复背景图片 */

					.dl-left {
						display: flex;
						flex: 1;
						padding-left: 30rpx;
						align-items: center;
						font-size: 30rpx;
						color: #623109;
						justify-content: left;

						.dl-icon {
							width: 60rpx;
							height: 56rpx;

						}
					}

					.dl-right {
						padding-right: 20rpx;

						.dl-go-view {
							font-size: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #F5D8A5;
							color: #623109;
							padding: 10rpx 25rpx;
							float: right;
							border-radius: 30rpx;
						}
					}
				}
			}

			.data-list-box {
				width: 100%;
				padding: 20rpx 20rpx 0 20rpx;

				.content-box {
					width: 100%;
					background-color: white;
					border-radius: 30rpx;

					.dl-opt-box {
						background-color: white;
						width: 100%;
						border-radius: 30rpx 30rpx 0 0;
						display: flex;
						align-items: center;
						justify-content: center;
						border-bottom: 1rpx solid #F4F4F4;

						.dl-menu-box {
							color: #929292;
							display: flex;
							flex: 1;
							align-items: center;
							justify-content: center;
							width: 100%;
							padding-top: 20rpx;

							.dl-menu {
								font-size: 30rpx;
								margin: 0 20rpx;
								padding-bottom: 15rpx;
								text-align: center;
							}

							.click {
								color: #FF434E;
								font-weight: bold;
								border-bottom: 2px solid #FF434E;
							}
						}

						.seting {
							font-size: 30rpx;
							width: 180rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 10rpx;
							}
						}
					}

					.no-member {
						height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 450rpx);
					}

					.member {
						height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 340rpx);
					}

					.data-list {
						width: 100%;
						padding: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: self-start;
						justify-content: center;

						.item-dom {
							padding: 15rpx 0;
							border-bottom: 1rpx solid #F8F8F8;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;

							.left-img {
								width: 100rpx;

								image {
									width: 100rpx;
									height: 100rpx;
									border-radius: 20rpx;
								}
							}

							.center-box {
								flex: 1;
								padding-left: 10rpx;
								min-width: 0;
								display: flex;
								flex-direction: column;
								align-items: self-start;
								justify-content: center;

								.dl-notice-title {
									display: flex;
									width: 100%;
									padding-bottom: 10rpx;
									align-items: center;
									justify-content: center;

									.dl-image {
										flex: none;
										width: 50rpx;
										height: 50rpx;
									}

									.dl-text {
										margin-left: 10rpx;
										flex: 1;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										width: 100%;
										font-weight: bold;

									}
								}

								.dl-bottom-text {
									font-size: 25rpx;
									color: #929292;
								}
							}

							.right-box {
								width: 120rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.red-text {
								color: #FC1F3E;
							}
						}
					}
				}
			}
		}
	}
</style>