<template>
	<view class="purchaseBox">
		<!--头部-->
		<view class="album-address">
			<view class="address-left">
				<view class="left-name">照片来源</view>
				<view class="left-picker" @click="orderShow=true">
					<i>{{cityName}}</i>
					<image src="../static/album/myPhoto01.png"></image>
				</view>
				<u-picker mode="selector" v-model="orderShow" :default-selector="[orderType]" :range="option"	range-key="areaName" @confirm="industrysTypeConfirm($event)" @cancel="cancel"></u-picker>
				<view v-for="(item,index) in merchantList" :key="index" class="left-project" :class="[projectCheck==0?'left-projectDe':'']" @click="projectClick(index,item.id)">
					{{item.name}}
					<i>{{previewData.length}}</i>
				</view>
			</view>
			<view class="address-right" @click="projectMoreFun()" v-if="merchantList.length>2">
				<u-icon name="more-dot-fill"></u-icon>
			</view>
		</view>
		<view class="maskPreview-Num">{{previewNum+1}}/{{previewData.length}}</view>
		<u-swiper class="maskPreview-swiper" height="498" :list="previewData" :effect3d="true" :autoplay="false" :mode="none" :current ="previewNum" @change="projectNumFun" ></u-swiper>
		<view class="maskPreview-check" v-if="checkTypeFun==true">
			<u-checkbox v-model="previewData[previewNum].checkType" @click.stop.native="()=>{}" @change="stopPhoto(previewNum)" shape="circle" class="maskPreview-Check"></u-checkbox>
		</view>
		<view class="album-purchase">
			<view class="purchase-lableBox">
				<view class="lableBox-choose">
					抱枕DIY
				</view>
				<view class="lableBox-choose lableBox-chooseAct">
					印象公仔
					<view class="choose-line">
						<view class="line-to1"></view>
						<view class="line-to2"></view>
					</view>
				</view>
				<view class="lableBox-choose">
					抱枕DIY
				</view>
				<view class="lableBox-choose">
					抱枕DIY
				</view>
				<view class="lableBox-choose">
					抱枕DIY
				</view>
				<view class="lableBox-choose">
					抱枕DIY
				</view>
				<view class="lableBox-choose">
					抱枕DIY
				</view>
				<view class="lableBox-choose">
					抱枕DIY
				</view>
				<view class="lableBox-choose">
					抱枕DIY
				</view>
			</view>
		</view>
		<!--脚部-->
		<view class="album-bottom">
			<view class="bottom-left" v-if="maskDetail==false">
				<view class="left-oldMoney">￥{{originalPrice}}</view>
				<view class="left-newMoney">￥{{sellingPrice}}</view>
				<view class="left-detail" @click="maskDetail=true">
					<text>明细</text>
					<u-icon name="arrow-up"></u-icon>
				</view>
		
				<view class="left-num" v-if="priceNum>0">{{priceNum}}</view>
				<view class="left-mask" v-if="priceNum>0">
					多够更省
					<view class="mask-transparent"></view>
				</view>
			</view>
			<view class="bottom-Detail" v-if="maskDetail==true">
				<view class="detail-total">合计：￥{{sellingPrices}}</view>
				<view class="detail-favorable">优惠减：￥{{favorablePrice}}</view>
			</view>
			<view class="bootom-btn" @click="upLoad()">去下载</view>
		</view>
		
		<!--明细-->
		<view class="album-maskDetail" v-if="maskDetail==true">
			<view class="maskDetail-content">
				<view class="content-title">
					明细
					<u-icon class="title-close" name="close-circle" @click="maskDetail=false"></u-icon>
				</view>
				<view class="content-label">我的相片</view>
				<view class="content-money">
					<view class="money-name">相片</view>
					<view class="money-text">{{priceNum}}*{{sellingPrice}}={{sellingPrices}}</view>
				</view>
				<view class="content-favorable">
					<view class="favorable-name">优惠</view>
					<view class="favorable-text">-￥{{favorablePrice}}</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import uPicker from '@/uview-ui/components/u-picker/u-picker.vue'
import uCheckboxGroup from '@/uview-ui/components/u-checkbox-group/u-checkbox-group.vue'
import uCheckbox from '@/uview-ui/components/u-checkbox/u-checkbox'
import uToast from '@/uview-ui/components/u-toast/u-toast.vue'
import Uswiper from '@/uview-ui/components/u-toast/u-toast.vue'
export default {
  components: {
	  uPicker,
	  uCheckboxGroup,
	  uCheckbox,
	  uToast,
	  Uswiper
  },
  data() {
    return {
      faceIds: [], //查询照片ID
      openid:'',
      orderShow: false, //头部城市选择
      option: [],//城市
      cityName: '重庆',
      areaId:'100500000',//城市ID
      merchantId:'',//商户ID
      location: {},//位置信息
      projectCheck: 0, //当前选择的产品
      merchantList:[],//头部列表
      projectMoreType: false, //是否显示更多产品
      previewData: [ //图片预览
      ],
      maskDetail: false,
      previewNum: 0, //当前是第几张图片
      checkTypeFun:true,//刷新选项
      originalPrice:0,//原价单价
      originalPrices:0,//原价
      sellingPrice:0,//售价单价
      sellingPrices:0,//售价
      favorablePrice:0,//优惠
      priceNum:0,//选购了多少照片
    }
  },
  onLoad(option) {
    this.openid = uni.getStorageSync('openid') //获取openid
    this.faceIds = JSON.parse(option.faceIds)
    this.location = JSON.parse(uni.getStorageSync('location'))
    this.merchantId = 'z0015605022691a5945bbe463141668c'// 'z0015605022691a5945bbe463141668c' uni.getStorageSync('merchantId')
    this.obtainProvince()//获取省市区
    this.inquireMerchant()//查询所有商户
    this.getPhotos()//照片列表
  },
  methods: {
    obtainProvince(){//获取省列表
      this.$request('scenic/search/loadAreaByCity',{
        areaLevel:1,
        inChina:0
      }).then((res)=>{
        if(res.code=='00'){
          this.option = res.data
        }else{
          this.$refs.uToast.show({
            title: res.message,
            type: 'error',
          })
        }
      })
    },
    inquireMerchant(){//查询所有商户
      var data = {
        id:this.merchantId,//商户ID
        province:this.areaId,//省市ID
        areaCode:this.areaId,//省市ID
        userlatitude:this.location.latitude,//纬度
        userlongitude:this.location.longitude,//经度
        merchantType:1,// 
      }
      this.$request('scenic/newMerchant/findAllMerchant',data).then((res)=>{
        if(res.code=='00'){
          this.merchantList = res.data
        }else{
          this.$refs.uToast.show({
            title: res.message,
            type: 'error',
          })
        }
      })
    },
    getPhotos(){//照片
      var data = {
        faceIds:this.faceIds,//照片ID
        openid:this.openid,
        merchantId:this.merchantId,//商户ID
      }
      this.$request('wechatUser/pdFace/list',data).then((res)=>{
        if(res.code=='00'){
          this.previewData = res.data
          this.previewData.forEach((item,index)=>{
            item['checkType'] = false
            this.originalPrice = item.originalPrice//原价.
            this.sellingPrice = item.sellingPrice//售价
            item['image']=item.faceSourceUrl||item.faceAiUrl
            item['title']=''
          })
        }else{
          this.$refs.uToast.show({
            title: res.message,
            type: 'error',
          })
        }
      })
    },
    industrysTypeConfirm(e) { //单列----分类 点击确定 城市
      this.cityName = this.option[e].areaName
      this.areaId = this.option[e].areaId
      this.inquireMerchant()
    },
    cancel() { //单列 点击取消
      this.orderShow = false
    },
    projectClick(num,id) { //商户选择
      this.projectCheck = num
      this.merchantId = id
      this.inquireMerchant()
    },
    projectNumFun(e){//当前滑动到第几张
		  this.previewNum = e
    },
    stopPhoto(index){//刷新显示
		  if(this.checkProjectAll==true){
		    this.checkProjectAll=false
		  }
		  if(this.previewData[index].checkType==false){
		    this.previewData[index].checkType = true
		  }else{
		    this.previewData[index].checkType = false
		  }
		  this.checkTypeFun = false
		  this.checkTypeFun = true
			
		  this.checkMonkey()
    },
    checkMonkey(){//明细价格计算
		  this.originalPrices = 0//原价
		  this.sellingPrices = 0//售价
		  this.priceNum = 0
		  this.previewData.forEach((item,index)=>{
			  if(item.checkType==true){
		      this.originalPrices += item.originalPrice//原价
		      this.sellingPrices += item.sellingPrice//售价
		      this.priceNum++
		    }
		  })
		  
    },
    projectMoreFun() { //更多产品显示
		  if (this.projectMoreType == false) {
		    this.projectMoreType = true
		  } else {
		    this.projectMoreType = false
		  }
    },
    upLoad(){//下单
		  var data = {
			  orderMoney:this.sellingPrices,//订单总价
		    userId:this.openid,
		    orderProductVo:{},//下单信息
		  }
		  var orderProductVo = {
		    buyNum:this.priceNum,//购买数量
		    orderImgList:[],//订单图片
		    orderType:1,//订单类型(0其他，1景区，2酒店，3餐饮，4特产，5运营车，10组合订单)	
		    postage:0,//邮费
		    couponList:[],//产品券信息 游客使用券信息后传
		    unitPrice:this.sellingPrice,//产品单价
		  }
		  this.previewData.forEach((item,index)=>{
			  if(item.checkType==true){
		      var imgList = {
		        imgUrl:item.faceSourceUrl||item.faceAiUrl
		      }
			    orderProductVo.orderImgList.push(imgList)
			  }
		  })
		  data.orderProductVo = orderProductVo
		  // this.$request('orderc/photo/photoCreateOrder',data).then((res)=>{
		  //   if(res.code=='00'){
		  //     uni.navigateTo({
		  //       // url: `./myPhotoAlbum/myPhotoAlbum?faceIds=${JSON.stringify(res.data.faceIds)}`
		  //       url:'../../payment/orderPayment/orderPayment?orderId='+res.data.id+'&albumOrderdetail=1'
		  //     })
		  //   }else{
		  //     this.$refs.uToast.show({
		  //       title: res.message,
		  //       type: 'error',
		  //     })
		  //   }
		  // })
    },
  }
}
</script>

<style scoped lang="scss">
	page {
		background-color: #333333 !important;
	}
	.purchaseBox {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #333333;
		padding-bottom: 98rpx;
		padding-top: 76rpx;
		overflow: auto;
	}
	.album-address {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 76rpx;
		padding: 0 24rpx 0 24rpx;
		background-color: #FFFFFF;
		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
	
		.address-left {
			display: flex;
			flex: 1;
			box-shadow: inset -16px 0px 8px 0px rgba(255, 255, 255, 0.2);
			overflow-x: auto;
	
			.left-name {
				font-size: 32rpx;
				color: #999999;
				line-height: 76rpx;
				margin-right: 48rpx
			}
	
			.left-picker {
				display: flex;
				font-size: 32rpx;
				color: #333333;
				line-height: 76rpx;
				margin-right: 24rpx;
	
				image {
					width: 26rpx;
					height: 26rpx;
					margin-top: 25rpx;
					margin-left: 8rpx;
				}
			}
	
			.left-project {
				font-size: 32rpx;
				color: #333333;
				line-height: 76rpx;
				margin-right: 48rpx;
				position: relative;
	
				i {
					display: block;
					width: 24rpx;
					height: 24rpx;
					font-size: 16rpx;
					color: #FFFFFF;
					line-height: 24rpx;
					text-align: center;
					background-color: #EE520E;
					border-radius: 50%;
					position: absolute;
					top: 12rpx;
					right: -24rpx;
				}
			}
	
			.left-projectDe {
				color: #3688FF;
				font-weight: bold;
			}
		}
	
		.address-right {
			display: flex;
	
		}
	}
	
	.album-address::-webkit-scrollbar {
		display: none;
	}
	
	.album-addressMore {
		width: 232rpx;
		padding: 24rpx 24rpx 0 24rpx;
		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
		position: fixed;
		top: 76rpx;
		right: 0;
		z-index: 20;
	
		.addressMore-name {
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			margin-bottom: 24rpx;
		}
	}
	
	.album-purchase{
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 24rpx 0 24rpx 0;
		.purchase-lableBox{
			display: flex;
			width: 100%;
			height: 46rpx;
			padding: 0 24rpx 0 24rpx;
			overflow: auto;
			.lableBox-choose{
				float: left;
				height: 46rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 40rpx;
				margin-right: 48rpx;
				flex-shrink: 0;
				position: relative;
				.choose-line{
					display: flex;
					position: absolute;
					bottom: 0;
					left: 0;
					.line-to1{
						width: 64rpx;
						height: 6rpx;
						background: #3688FF;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						margin-right: 10rpx;
					}
					.line-to2{
						width: 6rpx;
						height: 6rpx;
						background: #3688FF;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}
				}
			}
			
			.lableBox-chooseAct{
				font-size: 28rpx;
				color: #3688FF;
				line-height: 40rpx;
				font-weight: bold;
			}
			
		}
		.purchase-lableBox::-webkit-scrollbar{
			display: none;
		}
	}
	
	.album-bottom {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 98rpx;
		padding: 0 0 0 24rpx;
		background-color: #fff;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.08);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 25;
	
		.bottom-left {
			flex: 1;
			display: flex;
			line-height: 98rpx;
	
			.left-oldMoney {
				font-size: 24rpx;
				color: #999999;
				text-decoration: line-through;
				line-height: 110rpx;
				margin-right: 8rpx;
			}
	
			.left-newMoney {
				font-size: 40rpx;
				color: #EE520E;
				font-weight: bold;
				margin-right: 68rpx;
			}
	
			.left-detail {
				display: flex;
				color: #333333;
				margin-right: 20rpx;
	
				text {
					font-size: 28rpx;
					line-height: 98rpx;
					margin-right: 10rpx;
				}
			}
	
			.left-num {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background-color: #EE520E;
				text-align: center;
				line-height: 32rpx;
				font-size: 20rpx;
				font-weight: bold;
				color: #fff;
				margin-top: 34rpx;
			}
	
			.left-mask {
				width: 128rpx;
				height: 48rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
				background-color: #EE520E;
				border-radius: 28rpx;
				opacity: 0.5;
				position: absolute;
				left: 230rpx;
				top: -24rpx;
				z-index: 23;
	
				.mask-transparent {
					width: 0px;
					height: 0px;
					border: 10rpx solid transparent;
					/*以下四个样式对应四种三角形，任选其一即可实现*/
					border-top-color: #EE520E;
					/* border-left-color:lightseagreen; */
					/* border-right-color:lightseagreen; */
					// border-bottom-color:lightseagreen;
					position: absolute;
					right: 15rpx;
					bottom: -17rpx;
				}
			}
		}
	
		.bottom-Detail {
			flex: 1;
			display: flex;
			flex-direction: column;
	
			.detail-total {
				font-size: 28rpx;
				line-height: 40rpx;
				color: 191919;
				margin-bottom: 4rpx;
				margin-top: 16rpx;
			}
	
			.detail-favorable {
				font-size: 16rpx;
				color: #FF4308;
				line-height: 22rpx;
			}
		}
	
		.bootom-btn {
			width: 240rpx;
			height: 98rpx;
			background-color: #3688FF;
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
			text-align: center;
			line-height: 98rpx;
		}
	}
	
	.album-maskDetail {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 98rpx;
		left: 0;
		z-index: 24;
		background-color: rgba(0, 0, 0, .9);
	
		.maskDetail-content {
			width: 100%;
			padding: 32rpx;
			background-color: #fff;
			border-radius: 16rpx 16rpx 0 0;
			position: fixed;
			left: 0;
			bottom: 98rpx;
	
			.content-title {
				width: 100%;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				margin-bottom: 38rpx;
				text-align: center;
				font-weight: bold;
				position: relative;
	
				.title-close {
					position: absolute;
					top: 8rpx;
					right: 0;
				}
			}
	
			.content-label {
				font-size: 36rpx;
				color: #191919;
				font-weight: bold;
				line-height: 50rpx;
				margin-bottom: 32rpx;
			}
	
			.content-money {
				display: flex;
				justify-content: space-between;
				margin-bottom: 8rpx;
	
				.money-name {
					font-size: 32rpx;
					color: #191919;
					line-height: 44rpx;
				}
	
				.money-text {
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					font-weight: bold;
				}
			}
	
			.content-favorable {
				display: flex;
				justify-content: space-between;
	
				.favorable-name {
					font-size: 28rpx;
					color: #FC771D;
					line-height: 40rpx;
				}
	
				.favorable-text {
					font-size: 28rpx;
					color: #FC771D;
					line-height: 40rpx;
				}
			}
		}
	}
	.maskPreview-Num {
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		margin: 32rpx 0 40rpx 0;
		padding:  0 24rpx 0 24rpx;
		text-align: right;
	}
	.maskPreview-swiper{
		width: 100%;
	}
	/deep/ swiper{
		background-color: rgba(0, 0, 0, 0) !important;
	}
	.maskPreview-check {
		width: 48rpx;
		height: 48rpx;
		margin: 29rpx auto;
	
		/deep/ .u-checkbox__icon-wrap {
			width: 50rpx !important;
			height: 50rpx !important;
			color: #fff !important;
			border: solid 2px #fff;
		}
	}
</style>
