<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 v-if="dataList.length>0"
			style="height: calc(100vh - 80px);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" v-for="(item,index) in dataList" :key="index" @click="goOrderDetail(item)">
					<view class="user_Top">
						<view class="order_Header">
							<view class="tk_Apply">
								<text v-if="item.Type==1">下单提醒</text>
								<text v-if="item.Type==2">退款申请</text>
								<text v-if="item.Type==3">售后申请</text>
							</view>
							<view class="tk_Date">{{item.CreateDate}}</view>
						</view>
						<view class="order_Bottom">
							<view class="order_LeftHeader">
								<img :src="item.GoodsCoverImage" style="width:100%;height:100%;" alt="" />
							</view>
							<view style="width:100%;padding:10rpx 10rpx 10rpx 20rpx;">
								<view class="order_btmTop" v-if="item.GoodsName">{{item.GoodsName}}</view>
								<view class="order_btnTwo" v-if="item.UserName">来自用户 {{item.UserName}}</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() {
				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;
						}
					}
				);
			},
			lowerTwo(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.getList();
				} else {
					this.status = "nomore";
				}
			},
			goOrderDetail(item){
				uni.navigateTo({
				  url: "/pages/MallMange/orderSearch?OrderNo="+item.OrderNo+'&orderType='+this.msg.Type+'&Id='+item.Id
				});
			}
		}
	};
</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;
		min-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;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom:20rpx;
	}
	.order_btnTwo{
		font-size:28rpx;
		color:#A3A3A3;
		/* position: absolute; */
		/* bottom:10rpx; */
	}
</style>
