<template>
	<view>
		<view class="top-head pb20">
			<view class="top-tabbar">
				<view class="tab-item" :class="{ active: type == 0 }" @click="changeType(0)">{{ $t('MY_CK_14') }}</view>
				<view class="tab-item" :class="{ active: type == 1 }" @click="changeType(1)">{{ $t('MY_CK_15') }}</view>
			</view>
		</view>
		<!--列表-->
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50" @scrolltolower="scrolltolowerFunc">
			<view class="">
				<template v-if="type == 0">
					<view class="item-box">
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('N_I_124') }}</view>
							<view class="item-content f26 gray3">{{ detail.memberCode }}</view>
						</view>
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('CK_KS_14') }}</view>
							<view class="item-content f26 gray3">{{ detail.memberName }}</view>
						</view>
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('MN_F_23') }}</view>
							<view class="item-content f26 gray3">{{ detail.phone }}</view>
						</view>
						<view class="d-e-c pt20 border-t"><view class="order-btn" @click="gotoPage('/pages/self-service/residence-change/apply')">{{$t('PER_DA_35')}}</view></view>
					</view>
				</template>
				<template v-if="type == 1">
					<view class="item-box" v-for="(item,index) in detail2" :key="index">
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('MN_T_1') }}</view>
							<view class="item-content f26 gray3">{{item.memberCode}}</view>
						</view>
						<!-- <view class=" d-b-c mb16">
							<view class="label-name">变更前会员姓名</view>
							<view class="item-content f26 gray3">{{item.approveStatus}}</view>
						</view> -->
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('MY_CK_4') }}</view>
							<view class="item-content f26 gray3">{{item.phone}}</view>
						</view>
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('MY_CK_3') }}</view>
							<view class="item-content f26 gray3">{{item.changeMemberName}}</view>
						</view>
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('MY_CK_5') }}</view>
							<view class="item-content f26 gray3">{{item.changePhone}}</view>
						</view>
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('MY_CK_6') }}</view>
							<view class="item-content f26 gray3">{{formatNum(item.amount)}}</view>
						</view>
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('CK_KS_51') }}</view>
							<view class="item-content f26 gray3">{{item.creationTime}}</view>
						</view>
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('CK_KS_52') }}</view>
							<view class="item-content f26 gray3">{{item.approveTime}}</view>
						</view>
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('MN_F_11') }}</view>
							<view class="item-content f26 domation">{{item.approveStatusVal}}</view>
						</view>
						<view class=" d-b-c mb16">
							<view class="label-name">{{ $t('MY_WAL_22') }}</view>
							<view class="item-content f26 domation">{{item.remark}}</view>
						</view>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 0,
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*最后一页码数*/
			last_page: 0,
			/*当前页面*/
			page: 1,
			/*每页条数*/
			list_rows: 10,
			/*有没有等多*/
			no_more: false,
			/*是否正在加载*/
			loading: true,
			/*数据*/
			listData: [],
			detail: { memberCode: '', memberName: '', phone: '', changeNum: 1 },
			detail2: {
				remark: '', //备注
				memberCode: '', //会员编号
				phone: '', //联系方式
				changePhone: '', //变更联系方式
				changeMemberName: '', //变更会员名称
				idBack: '', //原证件背面图片
				changeIdFront: '', //变更证件正面
				changeIdBack: '', //变更证件反面
				amount: '', //业务扣费
				approveStatus: 0, //审核状态
				approveTime: '', //审核时间
				creationTime: '' //创建时间
			}
		};
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		}
	},
	onShow() {
		/*获取订单列表*/
		this.page = 1;
		this.type = 0;
		this.listData = [];
		this.getData();
	},
	mounted() {
		this.init();
	},
	methods: {
		changeType(e) {
			let self = this;
			if (self.loading) {
				return;
			}
			self.page = 1;
			self.loading = true;
			self.type = e;
			if(e == 0){
				self.getData();
			}else{
				self.getData2();
			}
			
		},
		getData() {
			let self = this;
			self.loading = false;
			self._get('member/api/change-domicile/application-info-list', {}, res => {
				self.detail = res.data;
			});
		},
		getData2() {
			let self = this;
			self.loading = false;
			self._get('member/api/change-domicile/applied-info-list', {}, res => {
				self.detail2 = res.data;
				console.log(self.detail2)
			});
		},
		/*可滚动视图区域到底触发*/
		scrolltolowerFunc() {
			let self = this;
			if (self.no_more) {
				return;
			}
			self.page++;
			if (self.page <= self.last_page) {
				self.getData();
			} else {
				self.no_more = true;
			}
		},
		/*初始化*/
		init() {
			let self = this;
			uni.getSystemInfo({
				success(res) {
					self.phoneHeight = res.windowHeight;
					// 计算组件的高度
					let view = uni.createSelectorQuery().select('.top-head');
					view.boundingClientRect(data => {
						let h = self.phoneHeight - data.height;
						self.scrollviewHigh = h;
					}).exec();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.top-tabbar {
	border-bottom: 1rpx solid #eee;
	.tab-item {
		color: #666;
	}
	.tab-item.active {
		font-weight: 400;
		color: #333;
	}
}
.order-item {
	width: 750rpx;
	background: #ffffff;
	padding: 0 18rpx 50rpx 25rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
}
.orer-item-top {
	height: 93rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}
.listdata-item {
	// height: 370rpx;
	padding: 27rpx 23rpx 22rpx 25rpx;
	background: #ffffff;
	margin-bottom: 22rpx;
}
.type-btn {
	line-height: 30rpx;
	height: 30rpx;
	background: #3d3d3d;
	border-radius: 15rpx;
	padding: 0 23rpx;
	font-size: 20rpx;
	color: #ffffff;
	margin-right: 6rpx;
}
.status-btn {
	font-size: 24rpx;
	color: #333333;
	margin-left: 20rpx;
}
.product-img {
	width: 124rpx;
	height: 124rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
	display: block;
	border: 15rpx;
	margin-bottom: 24rpx;
}
.product-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	margin-right: 20rpx;
}
.order-border-btn {
	box-sizing: border-box;
	padding: 0 26rpx;
	min-width: 146rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	border-radius: 26rpx;
	font-size: 24rpx;
	color: #999;
	border: 1rpx solid #eee;
	margin-left: 18rpx;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.order-btn {
	box-sizing: border-box;
	padding: 0 26rpx;
	min-width: 146rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	border-radius: 26rpx;
	font-size: 24rpx;
	color: #fff;
	border: 1rpx solid #eee;
	margin-left: 18rpx;
	background: #fb3024;
	border: 1rpx solid #fb3024;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.label-name {
	font-size: 26rpx;
	color: #999;
	word-break: break-all;
	width: 60%;
	flex-shrink: 0;
	line-height: 1.5;
}
.item-content {
	flex-shrink: 0;
	width: 40%;
	word-break: break-all;
	line-height: 1.5;
	text-align: right;
}
.item-box {
	width: 750rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	padding: 32rpx 26rpx;
	background: #ffffff;
}
</style>
