<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<!-- 搜索 -->
		<view class="search">
			<u-search placeholder="输入药品名称" bg-color="#F6F6F6" color="#999" border-color="#F6F6F6" :show-action="false"
				maxlength="21" height="66" :clearabled="true" shape="round" v-model="keyword" @search="toSearch">
			</u-search>
		</view>

		<!-- 头部 tabs -->
		<view class="head">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>

		<!-- 空页 -->
		<view class="empty" v-if="orderList.length==0">
			<image src="/static/empty/orders.png" mode="aspectFit"></image>
		</view>

		<!-- 列表 -->
		<view class="lists" @click="toInfo(item.id)" v-for="(item,index) in orderList">
			<!-- 门店 -->
			<view class="list">
				<view class="store"><text class="iconfont icon-mendian"></text>{{item.store.name}} <text class="state">西药(中成)</text>
				</view>
				<text class="active">{{item.status_string}}</text>
			</view>
			<!-- 商品 -->
			<view class="item" v-for="(item1,index) in item.items">
				<image :src="item.items[0].drug_image" mode=""></image>
				<view class="it">
					<view class="it_name">{{item1.drug_name}}</view>
					<view class="it_info">{{item1.small_info}}</view>
					<view class="it_price">
						<text>{{item1.price}}</text>
						<text class="num">x{{item1.number}}</text>
					</view>
				</view>
			</view>
			<!-- 付款 -->
			<view class="pay">
				<view class="pay_num">
					<text>共{{item.items[0].number}}件</text>
					<text>总价:￥{{item.total_pay_price}} 运费:￥{{item.trans_expenses}}</text>
				</view>
				<view class="pay_need">
					实付款:
					<text>￥{{Number(item.total_pay_price)+Number(item.trans_expenses)}}</text>
				</view>
				<view class="btn_states">
					<!-- <view class="btns _btn" v-if="item.status_string!='待发货'">再次购买</view> -->
					<view class="btns _pay" v-if="item.status_string!='待付款'&&item.status_string!='待发货'&&item.status_string!='已取消'">立即支付</view>
					<view class="btns _paied"v-if="item.status_string=='待收货'||item.status_string=='已取消'">查看物流</view>
					<view class="btns _paied" v-if="item.status_string=='待发货'">退款</view>
					<view class="btns _paied"v-if="item.status_string=='已取消'||item.status_string=='待收货'">申请售后</view>
				</view>
			</view>
		</view>

		<!-- 新增 -->
		<!-- <view class="lists" @click="toInfo" v-for="(item,index) in 2"> -->
			<!-- 门店 -->
			<!-- <view class="list">
				<view class="store"><text class="iconfont icon-mendian"></text>萧康诊所门店 <text class="state">草药</text>
				</view>
				<text class="active">已完成</text>
			</view> -->
			<!-- 商品 -->
		<!-- 	<view class="items">
				<view class="its" v-for="item in 4">
					<view class="its_name">三七</view>
					<view class="its_num">10.0g</view>
					<view class="its_price">2元</view>
				</view>

			</view> -->
			<!-- 付款 -->
			<!-- <view class="pay">
				<view class="pay_price">
					一剂5味，共7剂，一剂￥12元，总价:￥84.00
				</view>
				<view class="pay_num">
					<text></text>
					<text>运费:￥10.00</text>
				</view>
				<view class="pay_need">
					实付款:
					<text>￥78.00</text>
				</view>
				<view class="btn_states">
					<view class="btns _btn">再次购买</view>
					<view class="btns _pay">立即支付</view>
					<view class="btns _paied">查看物流</view>
				</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	import { getOrdlist } from '../../request/api/api';
	export default {
		data() {
			return {
				keyword: "",
				list: [{
						name: '全部'
					},
					{
						name: '待付款',
					},
					{
						name: '待发货',
					}, {
						name: '待收货',
					},
					{
						name: '已完成'
					}
				],
				current: 0, // 状态
				orderList: [], // 订单列表   
				id: "", // 订单id
				page: 1, // 当前页数
				total: "", // 总条数
				totalPage: "", // 总页数
				pageSize: 20, // 每页条数
				status:''
			}
		},
		onLoad(e) {
			
			// this.current = e.index
		},
		methods: {
			// accept(item) {
			// 	const userInfo = uni.getStorageSync("user");
			// 	getKey({
			// 		method: "post",
			// 	}).then((res) => {
			// 		console.log(res, "getKey");
			// 		res = res.data
			// 		if (res.errcode === 0) {
			// 			uni.navigateTo({
			// 				url: `/pages/unpaid-order/web-view?appid=${res.data.appid}&key=${res.data.key}&myUserId=member_${userInfo.id}&avatarurl=${item.doctor_avator}&name=${item.doctor_name}`
			// 			})

			// 		}
			// 	});

			// },
			// 点击切换
			change(index) {
				// console.log(index);
				this.current = index;
				if(this.current==0){
					this.status=''
					
				}
				if(this.current==1){
					this.status=0
				
					
				}
				if(this.current==2){
					this.status=1
				
					
				}
				if(this.current==3){
					this.status=2
					
					
				}
				if(this.current==4){
					this.status=9
					
				}
				this.getOrder()
			},

			next(id) {
				this.id = id
				// console.log(id,'id');

				uni.navigateTo({
					url: '/subPackages/my/unpaid-order?id=' + this.id
				})

			},

			// 搜索
			toSearch() {
				this.getList()
			},

			// 详情
			toInfo(e) {
				uni.navigateTo({
					url: '/subPackages/shop/paied-detail?id='+e
				})
			},

			//  订单列表
			getOrder() {
				getOrdlist({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						status: this.status,
						page: this.page
					}
				}).then((res) => {
					// console.log(res, 'order');

						this.Num=
						// console.log(res);
						// console.log(this.orderList,66);
						this.orderList = res.data.data.page_data
						// this.totalPage = res.data.data.pagination.totalPage
						this.total = res.data.data.page_info.total
					
				})
			},
			// 去支付
			// gopay(id) {
			// 	this.id = id
			// 	// 获取支付配置
			// 	getOrdpay({
			// 		method: "post",
			// 		data: {
			// 			order_id: this.id
			// 		}
			// 	}).then((res) => {
			// 		// console.log(res, 'pay');
			// 		uni.requestPayment({
			// 			provider: res.data.data.appId,
			// 			timeStamp: res.data.data.timestamp,
			// 			nonceStr: res.data.data.nonceStr,
			// 			package: res.data.data.package,
			// 			signType: res.data.data.signType,
			// 			paySign: res.data.data.paySign,
			// 			success: function(res) {
			// 				console.log('success:' + JSON.stringify(res));
			// 			},
			// 			fail: function(err) {
			// 				console.log('fail:' + JSON.stringify(err));
			// 			}
			// 		})
			// 	})
			// },
			// 取消订单
			// goCancel(id) {
			// 	this.id = id
			// 	getCancle({
			// 		method: "post",
			// 		data: {
			// 			order_id: this.id
			// 		}
			// 	}).then((res) => {
			// 		// console.log(res, 'cancle');

			// 		if (res.data.errcode == 0) {
			// 			this.isCancle = true

			// 			uni.showToast({
			// 				title: "取消成功",
			// 				duration: 1500,
			// 				mask: false,
			// 				icon: 'success'
			// 			})
			// 		}

			// 		this.getOrder()
			// 	})
			// },
		},
		// 触底触发
		onReachBottom() {
			if (this.page >= this.totalPage) return
			this.page += 1
			this.getOrder()
		},
		onPullDownRefresh() {
			// console.log("触发了下拉刷新")
			if (this.page <= 1) return
			this.page = this.page - 1
			this.getOrder()

			//重置一下数据
			// this.page = 1
			// //重新发起请求
			// this.getOrder(() => uni.stopPullDownRefresh())
		},
		mounted() {
			this.getOrder()
		},
		onShow() {
			this.getOrder()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		min-height: 100vh;
		max-height: 100%;
		background-color: #F8FAFC;
		padding-bottom: env(safe-area-inset-bottom);

		.head {
			width: 750rpx;
			height: 80rpx;
			position: sticky;
			top: var(--window-top);
			z-index: 99;
		}

		.search {
			width: 750rpx;
			background-color: #fff;
			height: 98rpx;
			margin: 0 auto;
			padding: 16rpx 30rpx;

			.u-search {
				width: 686rpx;
				height: 66rpx;
				margin: 0 auto;
			}
		}

		.empty {
			width: 440rpx;
			height: 393rpx;
			margin: 200rpx auto;

			image {
				width: 100%;
				height: 100%;
				z-index: 10;
			}
		}

		.lists {
			width: 710rpx;
			margin: 20rpx auto;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 32rpx;

			.list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 26rpx;

				.store {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #232323;

					.iconfont {
						font-size: 40rpx;
						color: #666666;
						vertical-align: middle;
						margin-right: 10rpx;
					}

					.state {
						font-size: 22rpx;
						color: #1777FF;
						padding: 4rpx 10rpx;
						background: #D0E4FF;
						margin-left: 22rpx;
						border-radius: 2rpx;
					}

				}

				text {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #999999;
				}

				.active {
					color: #4175EE;
				}

				.actived {
					color: #FC3636;
				}

			}

			.item {
				display: flex;
				justify-content: space-around;
				margin-bottom: 22rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					margin-right: 20rpx;
				}

				.it {
					width: 450rpx;
					font-family: PingFang SC-Regular, PingFang SC;

					.it_name {
						height: 80rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #232323;
					}

					.it_info {
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;

						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin: 12rpx 0 34rpx 0;
					}

					.it_price {
						display: flex;
						justify-content: space-between;
						align-items: center;

						text {
							font-size: 28rpx;
							font-weight: bold;
							color: #232323;
						}

						.num {
							font-size: 28rpx;
							font-weight: 400;
							color: #232323;
						}
					}
				}
			}

			.items {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 22rpx;

				.its {
					width: 45%;
					display: flex;
					justify-content: space-around;
					margin-bottom: 23rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 500;

					.its_name {
						width: 112rpx;
						color: #232323;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.its_num {
						color: #666666;

					}

					.it_price {
						color: #999999;
					}
				}
			}

			.pay {
				text-align: right;
				font-family: PingFang SC-Regular, PingFang SC;
				font-size: 24rpx;
				font-weight: 400;

				.pay_price {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #232323;
					margin-bottom: 10rpx;
				}

				.pay_num {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #232323;
				}

				.pay_need {
					font-size: 32rpx;
					color: #232323;
					margin: 16rpx 0;

					text {
						font-weight: bold;
						font-size: 36rpx;
					}
				}

				.btn_states {
					display: flex;
					justify-content: flex-end;
					margin-top: 30rpx;

					.btns {
						width: 196rpx;
						height: 64rpx;
						line-height: 58rpx;
						text-align: center;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						font-size: 28rpx;
						font-weight: 400;
						margin-left: 20rpx;
					}

					._btn {
						border: 2rpx solid #999999;
						color: #999999;
					}

					._pay {
						border: 2rpx solid #4175EE;
						background: #4175EE;
						color: #FFFFFF;
					}

					._paied {
						color: #4175EE;
						background: #E7F1FF;
						border: 2rpx solid #E7F1FF;
					}
				}

			}
		}
	}
</style>
