<template>
	<view class="wrap">
		<view class="top">
			<view>
				已完成
			</view>
			<view>
				相片保留10天请尽快下载, 下载保存手机
			</view>
		</view>
		
		<view class="middle">
			<view class="middle-product">
				<view class="product-top">
					<view class="product-title">
						长江索道-三宫格照片下载/打印
					</view>
					<view>
						<text>在线支付：</text>
						<text>¥45</text>
					</view>
					<view>
						<text>照片数量：</text>
						<text>10</text>
					</view>
					<view>
						<text>取件方式：</text>
						<text>现场取件</text>
					</view>
					<view>
						<text>取件电话：</text>
						<text>15808046328</text>
					</view>
					<view>
						<text>取件地址：</text>
						<text>长江索道南站</text>
					</view>
				</view>
				<view class="product-bottom">
					<u-icon name='kefu-ermai'></u-icon>
					联系客服
				</view>
			</view>
			
			<view class="middle-order">
				<view class="order-title">
					订单信息
				</view>
				<view>
					<text>订单编号</text>
					<text>z20230707220011816514</text>
					<text class="order-btn">复制</text>
				</view>
				<view>
					<text>交易号</text>
					<text>20230707220011816514</text>
				</view>
				<view>
					<text>付款时间</text>
					<text>2023-07-07 10:50:11</text>
				</view>
				<view>
					<text>实际支付</text>
					<text>2024-06-06</text>
				</view>
				<view>
					<text>退改规则</text>
					<text>不可退</text>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<text>
				删除订单
			</text>
			
			<text>
				下载照片
			</text>
			
			<text>
				再次打印
			</text>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      timer:null,//setTimeout函数
      orderId:'',//订单编号
      orderInfo:'',//订单信息
      imgList:[],//下载图片列表
      downImgNumber:0,//下载图片的数量
      extendContent:'',//额外信息
    }
  },
  onLoad(option) {
    
  },
  onUnload() {
	  if(this.timer) {  
	    clearTimeout(this.timer)
	    this.timer = null
	  }  
  },
  methods: {
    //---复制内容
    copyText(value){
      uni.setClipboardData({
        data:value,
        success:function(){
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    },
    //---获取订单详情
    getDetail(){
      let data = {
        orderId:this.orderId,//订单ID
        userId:uni.getStorageSync('openid')||'',//用户Id
      }
      this.$request('order/userOrder/findOrderDetail', data).then(res => {
        if (res.code == '00') {
          this.orderInfo = res.data
          this.extendContent=JSON.parse(this.orderInfo.extendContent) 
          let imgList=this.orderInfo.orderImgList||[]
          imgList.forEach(item=>{
            this.imgList.push(item.imgUrl)
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      }).catch(err => {
        this.timer = setTimeout(() => {
          this.getDetail()
        }, 2000)
      })
    },
    //---跳转我的影集
    goMyPhoto(){
      uni.navigateTo({
        url:'/pages/album/purchasedPhotoAlbum/purchasedPhotoAlbum'
      })
    },
    //---点击下载
    download(){
      this.downImgNumber=0
      this.imgList.forEach(item=>{
        this.downloadFun(item)
      })
    },
    //---下载方法
    downloadFun(imgUrl) { 
      uni.showLoading({
        title: '下载中',
        mask: true
      })
      let fileName = new Date().getTime()
      uni.downloadFile({ //下载文件资源到本地
        url:imgUrl,
        filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.jpg', //filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH,时间戳为文件名
        success: res => { //下载到本地成功
          if(res.statusCode==200){
            let filePath = res.filePath
            uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
						  filePath,
						  success: file => { //保存成功
                this.downImgNumber+=1
                if(this.downImgNumber==this.imgList.length){
                  uni.showToast({
									  title: '下载成功',
									  icon: 'success',
									  mask: true
                  })
                }
						  },
						  fail: err => {
						    uni.hideLoading()
						    this.getPermissions(err)
						  }
            })
          }
        },
        fail: err => { //下载失败
          uni.hideLoading()
          uni.showToast({
            title: '下载失败',
            icon: 'none',
            mask: true
          })
        }
      })
    },
    //---获取授权
    getPermissions(err){
      //拒绝授权时显示
      if (err.errMsg.includes('fail auth deny')) {
			  uni.showModal({
			    title: '提示',
			    content: '需要您授权保存相册',
			    showCancel: false,
			    success: data => {
			      //打开权限设置
			      uni.openSetting({
			        success: setting => {
			          if (!setting.authSetting['scope.writePhotosAlbum']) {
			            uni.showModal({
			              title: '提示',
			              content: '获取权限失败无法保存到相册',
			              showCancel: false,
			            })
			          }
			        },
			      })
			    }
			  })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.wrap{
	padding: 24rpx;
}
.top view:first-child{
	color: #00B42B;
	font-weight: bold;
	font-size: 36rpx;
}
.top view:last-child{
	color: $grey;
	margin-top: 12rpx;
}
.middle-product{
	background: #ffffff;
	border-radius: 16rpx;
	padding-top: 20rpx;
	margin-top: 30rpx;
}
.product-top view{
	margin-top: 20rpx;
	padding: 0 40rpx;
}
.product-top view text:first-child{
	color: $grey;
}
.product-title{
	font-weight: bold;
}
.product-bottom{
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid #f7f7f7;
	margin-top: 20rpx;
}
.middle-order{
	background: #ffffff;
	border-radius: 16rpx;
	margin-top: 30rpx;
}
.middle-order view{
	padding: 32rpx 40rpx;
	border-bottom: 1px solid #F7F8FA;
	color: #666666;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.middle-order view.order-title{
	font-weight: bold;
	color: #333333;
}
.order-btn{
	display: inline-block;
	width: 100rpx;
	height: 50rpx;
	line-height: 50rpx;
	text-align: center;
	font-size: 24rpx;
	background: #F7F8FA;
	border-radius: 20rpx;
}
.bottom{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 1;
	display: flex;
	justify-content:space-between;
	align-items: center;
	background: #ffffff;
	height: 120rpx;
	padding: 0 40rpx;
	text{
		font-weight: bold;
		display: inline-block;
		width: 170rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		border: 1px solid #ededed;
		border-radius: 32rpx;
	}
}
</style>
