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


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

		<!-- 空页  orderList.length==0 -->
		<view class="empty" v-if="orderList.length==0">
			<image src="@/static/empty/orders.png" mode="aspectFit"></image>
			<text>还没有新的商品订单~</text>
		</view>

		<!-- 药品列表 -->
		<view class="list" v-for="(item,index) in orderList" :key="item.id" @click="next(item.id)">
			<!-- 卡片 -->
			<view class="yard">
				<view class="yard_name">
					订单编号：{{item.order_no}}
				</view>
				<text>{{item.status_string}}</text>
			</view>

			<!-- <view class="yard">
				<view class="yard_name">
					您的处方已流转，由{{item.order_no}}发货
				</view>
			</view> -->


			<!-- 药品信息 -->
			<!-- 中药-颗粒 -->
			<view class="item_info" v-if="item.prescription_type==1||item.prescription_type==3">
				<view class="new_store">
					<text class="iconfont icon-mendian"></text>{{item.store.name}} &nbsp;&nbsp;&nbsp;
					<u-tag :text="item.prescription_type==1&&'中药饮片'||item.prescription_type==3&&'保健食品'"
						:type="item.prescription_type==1&&'success'||item.prescription_type==3&&'warning'||item.prescription.prescription_type==2&&'primary'"
						size="mini" style="margin-left: 20rpx;" />
				</view>
				<view class="info">
					<view class="zy_">
						<view class="zy_it" v-for="it in (item.items)" :key="it.id">
							<view class="zy_its">
								{{it.drug_name}}
								<text>x{{it.number}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="it_price">
					<view class="price">
						总价：￥{{item.total_pay_price}}
					</view>
					<text class="num">共计：{{item.number}}件</text>
				</view>
			</view>


			<!-- 西药 -->
			<view class="item_info" v-if="item.prescription_type==2||item.prescription_type==5||item.prescription_type==7">
				<view class="new_store">
					<text class="iconfont icon-mendian"></text>
          <text style="width: 70%;overflow-x: hidden">{{item.store.name}}</text>
					<u-tag :text="item.prescription_type == 2? '西(中成)药': item.prescription_type == 5? '产品服务包': '医疗器械'" :type="(item.prescription_type==2||item.prescription_type==5||item.prescription_type==7)&&'primary'" size="mini"
						style="margin-left: 20rpx;" />
				</view>
				<view class="info" v-for="it in (item.items).slice(0,3)" :key="it.id">
					<view class="xy_">
						<image :src="it.drug_image || '/static/mine/zy_mr.jpg'" mode=""></image>
						<view class="infos">
							<view class="name">{{it.drug_name}}
								<view class="">
									<text v-if="it.price">￥{{it.price}}</text>
								</view>
							</view>
							<view class="_specit">
								<text>{{it.drug.function || ''}}</text>
								<view class="number_specit">
									<text>{{it.drug.specification ||  ''}}</text>
									<text>x{{it.number}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="it_price">
					<view class="price">
						总价：￥{{item.total_pay_price}}
					</view>
					<text class="num">共计：{{item.number}}件</text>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="choose_btn">
				<view class="order_info active" v-if="item.status==1 && item.is_pay==1 && item.forbiddenRefund==0"
					@tap.stop="toCancel(item.id,item.status,refundType)">
					退款
				</view>
				<view class="order_info active" v-else-if="item.status==6||item.status==7  && item.forbiddenRefund==0"
					@tap.stop="toCancel(item.id,item.status,refundType)">
					申请售后
				</view>
				<view class="order_info active" v-else-if="item.status==0 && item.is_pay==0 && item.cancel_status==0"
					@tap.stop="next(item.id)">
					支付
				</view>
				<view class="order_info active" v-else-if="item.status==2 && item.is_pay==1" @tap.stop="getReceive(item.id)">
					签收
				</view>
				<view class="order_info active" v-else-if="item.is_pay==0 && item.status==0 && item.cancel_status==0"
					@tap.stop="goCancel(item.id)">
					取消
				</view>
				<view class="order_info" v-else-if="item.status==9 || item.cancel_status==1">
					已取消
				</view>
				<view class="order_info" v-else-if="item.status==4">
					已退款
				</view>
				<view class="order_info color_red"
					v-else-if="item.refund_status==4 && item.cancel_status==0 && item.is_pay==1">
					退款被拒
				</view>
				<view class="order_info" v-else-if="item.status>=4&& item.is_pay==1&&item.status<=5 && item.prescription_type==2">
					{{item.status==5&&'退款中' || item.status==4&&'已退款' }}
				</view>
				<!--  -->
				<view class="order_info active" v-else-if="(item.status===2||item.status===6||item.status===7) && item.is_pay==1  && item.cancel_status==0 && item.delivery_method === 0" @tap.stop="toDevilty(item.id)">
					查看物流
				</view>
			</view>
		</view>
		<u-loadmore :status="status" v-if="orderList.length!=0" />
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		confirmAccept,
		getCancle,
		getOrdlist,
		getPayConfig,
		postRefundBased
	} from '../../../request/api/api';

	export default {
		data() {
			return {
				status: 'nomore',
				list: [{
						name: '全部'
					},
					{
						name: '待付款',
					},
					{
						name: '待发货',
					}, {
						name: '待收货',
					},
					{
						name: '已完成'
					}
				],
				keyword: "",
				status: -1,
				current: 0, // 状态
				orderList: [], // 订单列表
				id: "", // 订单id
				page: 1, // 当前页数
				total: "", // 总条数
				last: "", // 总页数
				pageSize: 15, // 每页条数
				order_id: 0, // 订单id
				actionList: [], // 列表,
				actionSheetList: [],
				showed: false,
				reason: "", //原因
				remark: "退货退款", // 备注
				refund_images: "",
				refundType: '',
				scrollTop: 0
			}
		},
		onLoad(e) {
			this.order_id = e.id
			this.change(e.index);
		},
		computed: {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 数量
			// getnum(obj) {
			// 	let list = obj
			// 	let num = 0
			// 	list.map((it) => {
			// 		num += it.number
			// 	})
			// 	return num
			// },
			// 点击切换
			change(index) {
				// console.log(index);
				this.current = index;
				if (this.current == 0) {
					this.status = ''
				}
				if (this.current == 1) {
					// unpaid未支付 wait_send代发货 wait_accept已发货 finished已完成
					this.status = 'unpaid'
				}
				if (this.current == 2) {
					this.status = 'wait_send'
				}
				if (this.current == 3) {
					this.status = 'wait_accept'
				}
				if (this.current == 4) {
					this.status = 'finished'
				}
				this.orderList = []
				this.page = 1
				this.getList()
			},

			toDevilty(e) {
				uni.navigateTo({
					url: '/subPackages/shop/logistics?id=' + e
				})
			},

			next(id) {
				this.id = id
				// console.log(id,'id')
				uni.navigateTo({
					url: '/subPackages/my/my-drug/drug-info?id=' + this.id
				})

			},
			// 列表
			getList() {
				let list = {
					keyword: this.keyword,
					store_id: uni.getStorageSync('store_id') || '11001',
					type: this.status,
					page: this.page
				}
				getOrdlist({
					method: "post",
					data: list
				}).then((res) => {
					console.log(res, 'lb-res');
					if (res.data.errcode == 0) {
						this.last = res.data.data.pagination.totalPage
						this.total = res.data.data.pagination.total
						this.pageSize = res.data.data.pagination.pageSize
						if (this.page > 1) {
							this.orderList = [...this.orderList, ...res.data.data.list]
						} else {
							this.orderList = res.data.data.list
						}
						console.log(this.orderList, 'lb-lb');
					}
				})
			},

			// 搜索
			toSearch() {
				console.log(111);
				this.getList()
			},

			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.reason = this.actionSheetList[index].text;
			},

			// 去支付
			gopay(id) {
				this.id = id
				// 获取支付配置
				getPayConfig({
					method: "post",
					data: {
						order_id: this.id,
						store_id: uni.getStorageSync('store_id') || 11001,
					}
				}).then((res) => {
					// console.log(res, 'pay');

					if (res.data.errcode == 0) {
            if (!res.data.data.appId) {
              setTimeout(() => {
                that.flag = false
                uni.navigateTo({
                  url: '/subPackages/my/my-drug/drug-list'
                })
                uni.hideLoading();
              }, 300)
              return;
            }
						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));
								uni.showToast({
									title: '支付成功',
									duration: 1500,
									mask: false,
									icon: 'success'
								})
								this.getList()
							},
							fail: function(err) {
								// console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									title: '支付失败',
									duration: 1500,
									mask: false,
									icon: 'error'
								})
							}
						})
					} else {

						// uni.showToast({
						// 	title: res.data.msg,
						// 	duration: 1500,
						// 	mask: false,
						// 	icon: 'error'
						// })
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'default',
							icon: false
						})

						setTimeout(() => {
							this.id = id
							uni.navigateTo({
								url: '/subPackages/my/my-drug/drug-info?id=' + this.id
							})
						}, 1800)
					}
					this.getList()
				})
			},
			// 取消订单
			goCancel(id) {
				this.id = id
				getCancle({
					method: "post",
					data: {
						order_id: this.id,
						store_id: uni.getStorageSync('store_id') || 11001,
					}
				}).then((res) => {
					// console.log(res, 'cancle');

					if (res.data.errcode == 0) {
						setTimeout(() => {
							uni.showToast({
								title: '取消成功',
								duration: 1500,
								mask: false,
								icon: 'success'
							})
						}, 400)
						// this.$refs.uToast.show({
						// 	title: '取消成功',
						// 	type: 'default',
						// 	icon: false
						// })
					} else {
						// uni.showToast({
						// 	title: res.data.msg,
						// 	duration: 1500,
						// 	mask: false,
						// 	icon: 'error'
						// })
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'default',
							icon: false
						})
					}
					this.getList()
				})
			},

			// 退款
			toCancel(id, refundType) {
				this.id = id
				this.refundType = refundType
				uni.navigateTo({
					url: '/subPackages/shop/after-sales?id=' + id + '&&refundType=' + refundType
				})
			},

			// 退款提交 售后
			// payCancel(id, status) {
			// 	if (status == 3) {
			// 		// this.showed = true
			// 		uni.navigateTo({
			// 			url: '/subPackages/shop/after-sales?id=' + id
			// 		})
			// 	}
			// 	postRefundBased({
			// 		method: "post",
			// 		data: {
			// 			order_id: id,
			// 			refund_images: this.refund_images,
			// 			reason: this.reason,
			// 			remark: this.remark,
			// 			store_id: uni.getStorageSync('store_id') || 11001,
			// 		}
			// 	}).then((res) => {
			// 		// console.log(res, 'cancle');
			// 		if (res.data.errcode == 0) {
			// 			uni.showToast({
			// 				title: "退款成功",
			// 				duration: 1500,
			// 				mask: false,
			// 				icon: 'success'
			// 			})
			// 		}

			// 		this.getList()
			// 	})
			// },

			// 签收
			getReceive(id) {
				confirmAccept({
					method: "post",
					data: {
						order_id: id,
						store_id: uni.getStorageSync('store_id') || 11001,
					}
				}).then((res) => {
					// console.log(res, 'cancle');
					if (res.data.errcode == 0) {
						uni.showToast({
							title: "签收成功",
							duration: 1500,
							mask: false,
							icon: 'success'
						})
					}
					this.getList()
				})
			}
		},
		// 触底触发
		onReachBottom() {
			// if (this.pageSize >= this.totalPage) return
			if (this.page < this.last) {
				this.page += 1
				uni.showToast({
					title: "加载中",
					duration: 600,
					mask: false,
					icon: 'loading'
				})
				setTimeout(() => {
					// console.log(1111);
					// this.orderList = []
					this.getList()
				}, 700)
			}
		},
		onPullDownRefresh() {
			// console.log("触发了下拉刷新")
			if (this.page <= 1) {
				this.getList()
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 300)
			}
			this.page = 1
			this.orderList = []
			this.getList(() => uni.stopPullDownRefresh())

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

		}
	}
</script>

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

		.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;
			text-align: center;

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

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

		.list {
			width: 710rpx;
			margin: 10rpx auto;
			background: #FFFFFF;
			border-radius: 18rpx;
			padding: 22rpx 32rpx;

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

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

					.iconfont {
						color: #232323;
						font-size: 22rpx;
						margin-left: 6rpx;
					}
				}

				text {
					color: #5F71FE;
				}

			}

			.new_store {
				display: flex;
				align-items: center;

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

			.item_info {
				margin: 12rpx 0 30rpx 0;

				.info {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					color: #232323;
					margin-top: 10rpx;

					.zy_ {
						display: flex;
						flex-wrap: wrap;
						align-items: center;

						.zy_it {
							width: 33%;
							margin: 6rpx 0;

							.zy_its {
								padding-right: 28rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 28rpx;
								font-weight: 550;
								color: #333333;

								text {
									font-size: 28rpx;
									font-weight: 400;
									color: #999999;
									margin-left: 24rpx;
								}
							}
						}
					}

					.xy_ {
						display: flex;
						// align-items: center;
						margin: 32rpx 0;

						image {
							width: 128rpx;
							height: 148rpx;
							border-radius: 20rpx;
							vertical-align: middle;
							margin-right: 40rpx;
							background: #FFFddd;
						}

						.infos {
							flex: 1;

							._specit {
								font-size: 24rpx;
								color: #9E9FA6;

								text {
									display: -webkit-box;
									-webkit-line-clamp: 3;
									-webkit-box-orient: vertical;
									text-overflow: ellipsis;
									overflow: hidden;
								}

								.number_specit {
									margin-top: 6rpx;
									flex: 1;
									display: flex;
									justify-content: space-between;
								}
							}

							.name {
								font-weight: bold;
								line-height: 28rpx;
								margin: 0 0 12rpx 0;
								display: flex;
								align-items: center;
								justify-content: space-between;

								text {
									font-size: 25rpx;
									font-weight: 400;
									color: #9E9FA6;
									margin-left: 20rpx;
								}
							}
						}

					}
				}

				.it_price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10rpx;

					.price {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FF5050;
						line-height: 30rpx;
					}

					.num {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #AAAAAA;
						line-height: 20rpx;
						margin-top: 28rpx;
					}
				}

			}

			.choose_btn {
				display: flex;
				justify-content: flex-end;

				.order_info {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #9E9FA6;
					padding: 10rpx 28rpx;
					border: 2rpx solid #9E9FA6;
					border-radius: 64rpx;
					margin: 0 10rpx;
				}

				.color_red {
					color: #FF5050;
					border: 2rpx solid #FF5050;
				}

				.active {
					color: #5F71FE;
					border: 2rpx solid #5F71FE;
				}
			}
		}
	}
</style>
