<template>
	<view class="content">
		<view class="sscanCode" style="margin-bottom: 30rpx;">
			<view class="sscanCodeTitle">
				<u-icon size='24' name="http://amy.yyinhong.cn/uploads/wximg/dp.png"></u-icon>
				<span style="margin-left: 20rpx;">{{userInfo.store_name}}</span>
			</view>
		</view>

		<view class="bindingUser" v-for="(item,index) in userList" :key="index">
			<view class="bindingUserImg">
				<image :src="item.avatar" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="bindingUserInfo">
				<view class="bindingUserInfoName">
					{{item.name}}
				</view>
				<view class="bindingUserInfoTime">
					{{item.created_at}}
				</view>
			</view>
		</view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" :current="current" :scrollable="false" @click="changeTab"></u-tabs>
		</u-sticky>
		<u-empty :show="total == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in pageList" :key="index">
				<view class="orderModel">
					<view class="orderTop" @click="gotoDetail(item.order_id)">
						<view class="orderTime">
							{{item.created_at}}
						</view>
						<view class="orderStatus">
							{{item.status_txt}}
						</view>
					</view>
					<view class="orderBaseInfo" @click="gotoDetail(item.order_id)"
						v-for="(jtem,jndex) in item.order_goods" :key="jndex">
						<view class="orderImg">
							<image class="init_image" :src="jtem.goods_img" mode=""></image>
						</view>
						<view class="orderInfo">
							<view class="orderName">
								{{jtem.goods_name}}
							</view>
							<view class="orderNorms">
								<span>{{jtem.goods_attr}}</span>
								<span>x{{jtem.goods_number}}</span>
							</view>
							<view class="orderPrice">
								<span>¥</span>{{jtem.goods_price}}
							</view>
						</view>
					</view>
				</view>
			</u-list-item>

		</u-list>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				verificationCode: '',
				userInfo: {},
				ShopInfo: {
					current: null,
					last: null
				},
				role_id: null,
				userList: [],
				pageList: [],
				pageNum: 1,
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待到货'
				}, {
					name: '待领取'
				}, {
					name: '待评价'
				}],
				nowStatus: "-1",
				totalPage: 0,
				current: 0,
				total: 0,
				userid: ""
			}
		},
		onLoad(options) {
			this.userid = options.id
			this.getUserInfo()
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.$request('/merchant-info', 'GET', {}).then(res => {
					console.log(res)
					this.userInfo = res.data;
					this.verificationCode = this.userInfo.buycode;
					this.role_id = this.userInfo.role_id;
					if (this.role_id == 3) {
						this.pageType()
					}
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			goCode(code) {
				uni.navigateTo({
					url: '/pageSub-pc/pages/orderCode/orderCode?code=' + code
				})
			},
			payMthods(order_id) {
				this.$utils.payOrder(order_id)
			},
			pageType() {
				this.pageList = [];
				if (this.nowStatus == '-1' || this.nowStatus == undefined) {
					this.pageNum = 1;
					this.getOrderList();
					this.current = 0
				}
				if (this.nowStatus == '0') {
					this.pageNum = 1;
					this.getOrderList();
					this.current = 1
				}
				if (this.nowStatus == '1') {
					this.pageNum = 1;
					this.getOrderList();
					this.current = 2
				}
				if (this.nowStatus == '2') {
					this.pageNum = 1;
					this.getOrderList();
					this.current = 3
				}
				if (this.nowStatus == '3') {
					this.pageNum = 1;
					this.getOrderList();
					this.current = 4
				}
			},
			del_order(id) {
				this.$request('/cance-order', 'POST', {
					order_id: id
				}).then(res => {
					console.log(res.data)
					this.$refs.uToast.show({
						type: 'success',
						message: "订单取消成功！",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png',
						complete() {}
					})
					this.pageType()
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message

					})
				})
			},
			scrolltolower() {
				if (this.totalPage == this.pageNum) {
					return
				}
				this.pageNum += 1;
				this.getOrderList();
			},
			//获取我的订单
			getOrderList() {
				this.$request('/order-list', 'GET', {
					order_status: this.nowStatus,
					page: this.pageNum,
					user_id: this.userid
				}).then(res => {
					console.log(res.data)
					this.pageList = [...this.pageList, ...res.data.list];
					this.total = res.data.total;
					this.totalPage = res.data.total_page;
				}).catch(err => {
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '1111' + err.message
					// })
				})
			},
			changeTab(item) {
				this.pageList = []
				console.log('item', item);
				if (item.name == '全部') {
					this.pageNum = 1;
					this.nowStatus = "-1";
					this.getOrderList();
				}
				if (item.name == '待付款') {
					this.pageNum = 1;
					this.nowStatus = "0";
					this.getOrderList();
				}
				if (item.name == '待到货') {
					this.pageNum = 1;
					this.nowStatus = "1";
					this.getOrderList();
				}
				if (item.name == '待领取') {
					this.pageNum = 1;
					this.nowStatus = "2";
					this.getOrderList();
				}
				if (item.name == '待评价') {
					this.pageNum = 1;
					this.nowStatus = "3";
					this.getOrderList();
				}
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '/pageSub/pages/orderDetail/orderDetail?id=' + id
				})
			}

		}
	}
</script>
<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		padding-top: 30rpx;
		background: linear-gradient(to bottom, #f3d4d7, #f8f8f8, #f8f8f8);
	}

	.headInfo {
		width: calc(100% - 120rpx);
		margin: 0 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30rpx;
		position: relative;

		.copyIcon {
			position: absolute;
			right: 30rpx;
		}
	}

	.topModel {
		width: 100%;
		height: 200rpx;
		text-align: center;
		line-height: 300rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: #111827;
	}

	.sscanCode {
		width: calc(100% - 120rpx);
		min-height: 120rpx;
		padding: 0 30rpx;
		margin: 0 30rpx;
		margin-top: 0rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.bindingUserImg {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		background-color: #D3195E;

	}

	.bindingUserInfo {
		width: calc(100% - 120rpx - 180rpx);
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #000;
		margin-left: 20rpx;
	}

	.bindingUserInfoName {
		width: 100%;
		color: #000;
		font-size: 28rpx;
	}

	.bindingUserInfoTime {
		width: 100%;
		font-size: 24rpx;
		color: #718096;
	}

	.bindingUser {
		width: calc(100% - 120rpx);
		min-height: 120rpx;
		padding: 0 30rpx;
		margin: 0 30rpx;
		margin-top: 20rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.bindingUserBtn {
		width: 160rpx;
		height: 60rpx;
		background-color: #D3195E;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
		font-size: 24rpx;
	}

	.sscanCodeTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 60rpx;
		font-size: 32rpx;
		color: #000000;
	}

	.orderModel {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		margin-bottom: 0rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.orderTop {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #ECECEC;
		margin-bottom: 20rpx;

		.orderTime {
			width: 50%;
			font-size: 24rpx;
			color: #666666;
		}

		.orderStatus {
			width: 50%;
			font-size: 24rpx;
			color: #333333;
			text-align: right;
		}
	}

	.orderBtnList {
		width: 100%;
		height: 60rpx;
		padding-top: 20rpx;
		line-height: 60rpx;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.orderBtn {
		height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #E9799F;
		background-color: #E9799F;
		color: #ffffff;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.orderOtherBtn {
		height: 58rpx;
		line-height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #777777;
		background-color: #ffffff;
		color: #777777;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.orderBaseInfo {
		width: 100%;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.orderImg {
		background-color: #f3d4d7;
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
		overflow: hidden;
		border-radius: 8rpx;
	}

	.orderInfo {
		height: 180rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.orderName {
		font-size: 30rpx;
		color: #333333;
		line-height: 36rpx;
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直方向的弹性盒 */
		-webkit-line-clamp: 2;
		/* 显示两行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
		/* 使用省略号 */
	}

	.orderNorms {
		line-height: 58rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		font-size: 24rpx;
	}

	.orderPrice {
		height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		color: #D61A62;
		font-size: 36rpx;

		span {
			font-size: 24rpx;
			margin-right: 10rpx;
		}
	}
</style>