<template>
	<view class="index" :style="[theme]">
		<view class="onecontent">
			<view class="onecontentone">
				<text v-if="datalist.status == 0">待付款</text>
				<text v-if="datalist.status == 1">待发货</text>
				<text v-if="datalist.status == 2">待收货</text>
				<text v-if="datalist.status == 3">已收货/评价</text>
				<text v-if="datalist.status == 4">退款中 </text>
				<text v-if="datalist.status == 5">退款成功</text>
				<text v-if="datalist.status == 6">取消订单</text>
				<text v-if="datalist.status == 7">已拒绝</text> 
			</view>
			<view class="onecontenttow">
				感谢您的支持，欢迎再次光临
			</view>
			<view class="onecontentthere flex-between">
				<view class="onecontentthere_one" v-if="datalist.status == 5 || datalist.status == 3 "
					@click="orderorderdelete(datalist)">
					删除订单
				</view>
				<view class="onecontentthere_tow"
					v-if="datalist.status == 1 || datalist.status == 2 ||datalist.status == 3"
					@click="orderordercancelrefund(datalist)">
					申请退款
				</view>
			</view>
		</view>
		<view class="towcontent" >
			<view class="towcontentone flex-between">
				<view class="towcontentone_one flex-start">
					<u-icon name="home" color="#ffffff" size="20"></u-icon>
					<text class="towcontentone_one_text">{{datalist.store_title}}</text>
				</view>
				<u-icon @click="phonefill(item.store_mobile)" name="phone-fill" color="#ffffff" size="20"></u-icon>
			</view>
			<view class="towcontenttow flex-start" v-for="(item,index) in datalist.goods" :key="index" @click="detailsInfo(item.goods_id)">
				<image class="towcontenttow_image" :src="item.img" mode="aspectFill"></image>
				<view class="towcontenttowone flex-colum-start">
					<view class="towcontenttowone_one">
						{{item.title}}
					</view>
					<view class="towcontenttowone_tow flex-start">
						<view class="towcontenttowone_tow_one flex-start">
							<u-icon name="checkmark-circle" color="#999999" size="14"></u-icon>
							随时退
						</view>
						<view class="towcontenttowone_tow_one flex-start">
							<u-icon name="checkmark-circle" color="#999999" size="14"></u-icon>
							过期退
						</view>
					</view>
					<view class="towcontenttowone_there">
						{{item.spec||''}}
					</view>
					<view class="towcontenttowone_four">
						¥{{item.price}}
					</view>
				</view>
			</view>
			<!--<view class="towcontentthere flex-between">
				<text class="towcontentthere_text"></text>
			</view>
			 <view class="qr-box flex-colum" @longpress="save()">
				<canvas canvas-id="qrcode" style="width:288rpx;" />
			</view>
			<view class="towcontenttfour flex-colum">
				123 2345 567
			</view> -->
			<!-- <view class="towcontenttfive flex-between">
				<view class="towcontenttfive_one flex-start">
					<view class="towcontenttfive_oneone">
						退款:
					</view>
					<view class="towcontenttfive_onetow">
						08-22 23:59:59到期
					</view>
				</view>
				<view class="towcontenttfive_tow">
					申请退款
				</view>
			</view> -->
		</view>
		<view class="therecontent">
			<view class="therecontentone">
				订单信息
			</view>
			<view class="therecontentsix entowakst" v-if="datalist.people_nickname">
				发型师：{{datalist.people_nickname}}
			</view>
			<view class="therecontentow entowakst">
				实付金额：<text>¥{{datalist.price}}</text>
			</view>
			<view class="therecontentthere entowakst">
				购买数量：{{datalist.number}}
			</view>
			<view class="therecontentthere entowakst">
				购买数量：{{datalist.username}}
			</view>
			<view class="therecontenfour entowakst">
				手机号码：{{datalist.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') || '-'}}
			</view>
			<view class="therecontentthere entowakst">
				收货地址：{{datalist.address}}
			</view>
			<view class="therecontentfive flex-start entowakst">
				订单编号：{{datalist.out_trade_no}}
				<text class="therecontentfive_box" @click="copy(datalist.out_trade_no)">复制</text>
			</view>
			<view class="therecontentsix entowakst">
				下单时间：{{datalist.createtime}}
			</view>

		</view>
		<!-- <view class="fourcontent">
			<view class="fourcontentone">
				购买须知
			</view>
			<view v-html="datalist.details">

			</view>
			<view class="entowakst" v-html="datalist.details">
				·预约须知：请您提前1小时预约
			</view>
		</view> -->
		<!-- 	<view class="fivecontent">
			<view class="fivecontentone">
				用户评价
			</view>
			<view class="fivecontenttow flex-between">
				<view class="fivecontenttow_one flex-start">
					<text class="fivecontenttow_text">综合评分</text>
					<u-rate :count="5" value="4" active-color="#f1cb66" inactive-color="#F1CB66"></u-rate>
				</view>
				<view class="fivecontenttow_tow">
					满意
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uQRCode from '@/common/js/uqrCode.js'
	export default {
		data() {
			return {
				datalist: {
					mobile:''
				},
				imgCode: '', // 后续保存到手机相册所需要用到的字段}
				form: {
					phone: '18092171236'
				}
			}
		},
		async onLoad(e) {
			try {
				let res = await this.api.shoppingorderoorderdetail({
					id: e.id
				})
				if (res) {
					this.datalist = res
					this.datalist.details = res.details.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
				}
			} catch (e) {}
			// this.generate()
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},
		methods: {
			orderorderdelete(item) { //删除订单
				uni.showModal({
					content: '确定删除订单吗?',
					confirmColor: '#f55850',
					cancelColor: '#333333',
					success: async (resdata) => {
						if (resdata.confirm) {
							let res = await this.api.shoppingorderorderorderdelete({
								order_id: item.id
							})
							uni.navigateBack()
						}
					}
				})
			},
			orderordercancelrefund(item) { //取消订单去退款
				uni.pro.navigateTo('mall/order/refund', {
					id: item.id
				})
			},
			//  生成二维码事件
			generate(e) {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: "https://ky.sxczgkj.cn/wap/merchant/authPay?userAppId=244", // 想生成二维码到内容
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						this.imgCode = res // base64的图片格式
					}
				})
			},
			// 保存到手机
			save() {
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.aveImageToPhotosAlbum();
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.aveImageToPhotosAlbum();
								},
								fail: () => {
									// 提示
									uni.showToast({
										title: "请打开保存相册权限，再点击保存到手机",
										icon: "none",
										duration: 3000
									});
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												// console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},
			copy(value) {
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			},
			detailsInfo(e) { //查看订单详情
				uni.pro.navigateTo('mall/mallInfo', {
					id: e,
				})
			},
			phonefill(value) {
				uni.makePhoneCall({
					phoneNumber: value //仅为示例
				});
			},
			aveImageToPhotosAlbum() {
				let base64 = this.imgCode.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
				let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png'; //   路径文件名
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				uni.getFileSystemManager().writeFile({ // 获取全局唯一的文件管理器
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						uni.saveImageToPhotosAlbum({ // 保存图片到系统相册
							filePath: filePath,
							success: function(res2) {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功',
									icon: "none",
									duration: 5000
								})
							},
							fail: function(err) {
								uni.hideLoading();
								// console.log(err.errMsg);
							}
						})
					},
					fail: err => {
						uni.hideLoading();
						//console.log(err)
					}
				})
			},
		}

	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.index {
		padding: 32rpx 28rpx;

		.onecontent {
			width: 100%;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.onecontentone {
				font-size: 32rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #333333;
			}

			.onecontenttow {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #666666;
			}

			.onecontentthere {
				margin-top: 24rpx;

				.onecontentthere_one {
					background: #333333;
					border-radius: 8rpx;
					padding: 16rpx 94rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
				}

				.onecontentthere_tow {
					background: #F7F7F7;
					border-radius: 8rpx;
					padding: 16rpx 94rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;

					color: #333333;
				}
			}
		}

		.towcontent {
			margin-top: 24rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 18rpx;

			.towcontentone {
				position: relative;
				padding: 16rpx 32rpx;
				border-radius: 18rpx 18rpx 0 0;
				background:var(--bg-color-buttonone);

				.towcontentone_one {
					.towcontentone_one_image {
						width: 33.04rpx;
						height: 29.79rpx;
					}

					.towcontentone_one_text {
						margin-left: 10rpx;
						font-size: 28rpx;
						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
						font-weight: normal;
						color: #FFFFFF;
					}
				}

				.towcontentone_one::after {
					z-index: 10;
					position: absolute;
					bottom: -22rpx;
					content: '';
					display: inline-block;
					left: 50%;
					transform: translateX(-50%);
					width: 44rpx;
					height: 44rpx;
					border-radius: 0 0 22rpx 22rpx;
					background:var(--bg-color-buttonone);
				}
			}

			.towcontenttow {
				position: relative;
				padding: 32rpx;
				width: 100%;
				background: #fff;

				.towcontenttow_image {
					width: 128rpx;
					height: 128rpx;
				}

				.towcontenttowone {
					height: 128rpx;
					margin-left: 36rpx;
					justify-content: space-around;

					.towcontenttowone_one {
						font-size: 28rpx;
						font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
						font-weight: normal;
						color: #333333;
					}

					.towcontenttowone_tow {
						.towcontenttowone_tow_one {
							font-size: 24rpx;
							font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
							font-weight: normal;
							color: #999999;
						}
					}

					.towcontenttowone_there {
						font-size: 24rpx;
						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
						font-weight: normal;
						color: #333333;
					}
					.towcontenttowone_four{
						position: absolute;
						font-weight: bold;
						top:32rpx;
						right: 32rpx;
					}
				}
			}

			.towcontentthere {
				position: relative;
				height: 44rpx;
				width: 100%;

				.towcontentthere_text {
					width: 100%;
					height: 0px;
					border: 1rpx dashed #EAEAEA;
				}

				.towcontentthere_text::after {
					z-index: 10;
					position: absolute;
					content: '';
					display: inline-block;
					left: 0;
					top: 0;
					width: 22rpx;
					height: 44rpx;
					border-radius: 0 44rpx 44rpx 0;
					background: #f6f6f6;
				}

				.towcontentthere_text::before {
					z-index: 10;
					position: absolute;
					content: '';
					display: inline-block;
					right: 0;
					top: 0;
					width: 22rpx;
					height: 44rpx;
					border-radius: 44rpx 0 0 44rpx;
					background: #f6f6f6;
				}
			}

			.towcontenttfour {
				margin-top: 16rpx;
				font-size: 32rpx;
				font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
				font-weight: normal;
				color: #333333;
			}

			.towcontenttfive {
				padding: 32rpx;
				width: 100%;

				.towcontenttfive_one {
					font-size: 32rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
					color: #333333;
				}

				.towcontenttfive_onetow {
					margin-left: 16rpx;
					font-size: 24rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
					color: #666666;
				}

				.towcontenttfive_tow {
					padding: 10rpx 16rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #D5D5D5;
				}
			}

		}

		.therecontent {
			margin-top: 24rpx;
			padding: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 18rpx;

			.therecontentone {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: bold;
				color: #333333;
			}

			.entowakst {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #333333;
			}

			.therecontentfive_box {
				padding: 6rpx 10rpx;
				font-size: 20rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #666666;
				background: #FFFFFF;
				margin-left: 6rpx;
				border-radius: 8rpx;
				border: 2rpx solid #D5D5D5;
			}
		}

		.fourcontent {
			margin-top: 24rpx;
			padding: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 18rpx;

			.fourcontentone {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: bold;
				color: #333333;
			}

			.fourcontentone::after {
				content: '';
				display: inline-block;
				width: 100%;
				height: 1rpx;
				border: 1px solid #F7F7F7;
			}

			.entowakst {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}

		.fivecontent {
			margin-top: 24rpx;
			padding: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 18rpx;

			.fivecontentone {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: bold;
				color: #333333;
			}

			.fivecontenttow {
				margin-top: 16rpx;

				.fivecontenttow_one {
					.fivecontenttow_text {
						padding-right: 24rpx;
						font-size: 28rpx;
						font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
						font-weight: normal;
						color: #333333;
					}
				}

				.fivecontenttow_tow {
					font-size: 24rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
					color: #666666;
				}
			}
		}
	}
</style>