<template>
	<view class="userManage" :style="{height: contentHeight,}">
		<view style="padding: 10px 0; background: #fff;">
			<u-tabs :list="RemarkList" :is-scroll="false" :current="current" name="Name" @change="change"
				:active-color="mainColor" bg-color="#FFF" height="80" bar-width="100"></u-tabs>
		</view>
		<!-- <view style="height: calc(100vh - 120px); background: #F7F7F7;" v-if="dataList.length == 0">
			<u-empty text="暂无相关数据" mode="order"></u-empty>
		</view> -->
		<view 
			style="height: calc(100vh - 50px);width: calc(100vw);overflow: hidden;padding: 25rpx;background-color: #F7F7F7;">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lowerTwo"
				:style="{ height: '100%' }">
				<view class="orderList">
					<view class="user_Top">
						<view class="order_Header">
							<view class="tk_Apply">退款申请</view>
							<view class="tk_Date">2021-11-01</view>
						</view>
						<view class="order_Bottom">
							<view class="order_LeftHeader">
								
							</view>
							<view style="width:100%;position:relative;padding:20rpx;">
								<view class="order_btmTop">春花秋月合适了</view>
								<view class="order_btnTwo">来自用户嘎啦嘎啦</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
					:margin-bottom="20" bg-color="#f3f4f6" />
			</scroll-view>
		</view>
	</view>	
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				pageTitle: "订单消息",
				current: 0,
				contentHeight: 0,
				mainColor: "",
				page_count: 1,
				dataList: [],
				msg:{
					pageIndex:1,
					pageSize:15,
					Type:1,
					IsLook:0,
					StartTime:'',
					EndTime:''
				},
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				RemarkList:[{
					name:'下单提醒'
				},{
					name:'退款提醒'
				},{
					name:'售后提醒'
				}],
			};
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad: function(option) {
			this.getList();
		},
		methods: {
			change(index) {
				this.current = index;
				this.dataList = [];
				this.msg.Type = index+1;
				this.msg.pageIndex = 1;
				this.getList();
			},
			getList(type) {
				this.dataList = [];
				uni.showLoading({
					title: '加载中'
				});
				this.requestAdmin(
					"/api/MemberUser/GetAdminMessageNoticePageList",
					this.msg,
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.dataList = this.dataList.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
						}
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.getList();
				} else {
					this.status = "nomore";
				}
			}
		}
	};
</script>
<style>
	.userManage {
		width: 100%;
		height: 100%;
		background: #F7F7F7;
	}
	.orderList{
		background-color: #fff;
		border-radius: 20rpx;
		padding:20rpx;
	}
	.order_Header{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tk_Apply{
		color:#000;
		font-size:28rpx;
	}
	.tk_Date{
		font-size:24rpx;
		color:#999999;
	}
	.order_Bottom{
		display: flex;
		height:160rpx;
		background-color: #F7F7F7;
		border-radius: 20rpx;
		margin-top:20rpx;
	}
	.order_LeftHeader{
		width:160rpx;
		height:160rpx;
		flex-shrink: 0;
	}
	.order_btmTop{
		font-size:28rpx;
		color:#000;
	}
	.order_btnTwo{
		font-size:28rpx;
		color:#A3A3A3;
		position: absolute;
		bottom:20rpx;
	}
</style>
