<template>
	<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }" :class="blowUpMaks==true?'albumBoxAct':''">
		<!--头部 我的相片-->
		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}" v-if="blowUpMaks==false">
			<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
			我的相片
		</view>
		<!--头部 当前第几张 遮罩代替我的相片显示-->
		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}" v-if="blowUpMaks==true">
			<u-icon name="arrow-left" color="#333" @click="blowUpMaks=false"></u-icon>
			{{blowUpNumNew}}/{{pictureFrameList.length}}
		</view>
		<!--单张 宫格切换-->
		<view class="myPhoto-title">
			<view class="title-click" :class="titleclick==1?'title-clickAct':''" @click="clickActFun(1)">
				单照片
				<view class="click-line"></view>
			</view>
			<view class="title-click" :class="titleclick==2?'title-clickAct':''" @click="clickActFun(2)">
				二宫格
				<view class="click-line"></view>
			</view>
			<view class="title-click" :class="titleclick==3?'title-clickAct':''" @click="clickActFun(3)">
				三宫格
				<view class="click-line"></view>
			</view>
			<view class="title-click" :class="titleclick==4?'title-clickAct':''" @click="clickActFun(4)">
				六宫格
				<view class="click-line"></view>
			</view>
		</view>
		<!--相框/项目切换-->
		<view class="myPhoto-search" v-if="pictureFrameList.length!=0">
			<view class="search-left">
				<view class="left-frame" :class="frameNum==1?'left-frameAct':''" @click="frameFun(1)">金属框</view>
				<view class="left-frame" :class="frameNum==2?'left-frameAct':''" @click="frameFun(2)">木框</view>
				<view class="left-frame" :class="frameNum==3?'left-frameAct':''" @click="frameFun(3)">无框</view>
			</view>
			<view class="search-right">
				<view class="right-addressClick" @click="show = true">
					{{showAddress}}
					<view class="address-triangle"></view>
					<u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
				</view>
			</view>
		</view>
		<!--相片列表-->
		<view class="myPhoto-list" v-if="checkTypeFun==true" :class="bottomShow==true?'myPhoto-listAct':''">
			<template v-if="titleclick==1||titleclick!=1&&pictureFrameList.length!=0">
				<view class="list-pictureFrame" v-for="(item,index) in pictureFrameList" :key="index">
					<image class="pictureFrame-img" :src="item.image"></image>
					<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" >
						<checkbox :value="item.image" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
					</checkbox-group>
					<view class="pictureFrame-boxTop" @click.stop="stopPhoto(index)"></view>
					<view class="pictureFrame-boxBottom" @click="blowUpFun(index)"></view>
					<image class="pictureFrame-blowUp" @click="blowUpFun(index)" src="../static/album/icon04.png"></image>
				</view>
			</template>
			<template v-else>
				<view class="list-noFigure">
					<image class="noFigure-img" src="../static/album/icon07.png"></image>
					<view class="noFigure-text">
						三宫格须先下载照片, 才能设置<text @click="clickActFun(1)">去下载</text>
					</view>
				</view>
			</template>
		</view>
		<!--点击放大后相片遮罩-->
		<view class="myPhoto-mask" v-if="blowUpMaks==true" :style="{'top': albumBoxTop + 'px' }">
			<swiper class="swiper" circular @change="projectNumFun" :current="currentNum">
				<swiper-item v-for="(item,index) in pictureFrameList" :key="index">
					<image :src="item.image" @click="stopPhoto(index)" :style="{'width': item.width, 'height': item.height}"></image>
					<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" v-if="checkTypeFun==true">
						<checkbox value="val" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
					</checkbox-group>
				</swiper-item>
			</swiper>
		</view>
		<!--获取照片-->
		<image v-if="pictureFrameListNum==0" class="myPhoto-getPhotos" src="../static/album/icon08.png"></image>
		<!--脚部选择相片、加入购物车、直接购买-->
		<view class="myPhoto-bottom" v-if="pictureFrameListNum>0">
			<view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view>
			<view class="bottom-feature">
				<!--加入相册列表-->
				<view class="feature-list">
					<template v-for="(item,index) in pictureFrameList">
						<view class="feature-case" v-if="item.pickerChoose==true" :key="index">
							<image class="feature-img" :src="item.image"></image>
							<image class="feature-close" src="../static/album/icon05.png" @click="stopPhoto(index)"></image>
						</view>
					</template>
				</view>
				<!--选中的张数、加入购物车、立即购买、开始拼图   titleclick等于1显示购物车和立即购买  等于其他 显示开始拼图 进入拼图界面-->
				<view class="feature-message">
					<view class="message-selectNum" v-if="titleclick==1">
						已选中
						<text class="selectNum-color">{{pictureFrameListNum}}张</text>
					</view>
					<view class="message-selectNum" v-else>
						<text class="selectNum-color">最多选择{{maxChooseImg}}张</text>
					</view>
					<view class="message-trading" v-if="titleclick==1">
						<view class="trading-btn trading-left">
							<image src="../static/album/icon06.png"></image>
							<view class="trading-num">2</view>
						</view>
						<view class="trading-btn trading-right">购买</view>
					</view>
					<view class="message-jigsaw" v-else>开始拼图</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
  components: {
    
  },
  data() {
    return {
      titleclick:1,//1单照片 2二宫格 3三宫格 4六宫格
      frameNum:1,//相框选择参数
      show: false,//遮罩显隐---项目
      columns: [//遮罩列表---项目
        [{
          label: '雪月夜1',
          // 其他属性值
          id: 2021
          // ...
        }, {
          label: '冷夜雨2',
          id: 804
        }, {
          label: '冷夜雨3',
          id: 804
        }, {
          label: '冷夜雨4',
          id: 804
        }, {
          label: '冷夜雨5',
          id: 804
        }, {
          label: '冷夜雨6',
          id: 804
        }, {
          label: '冷夜雨7',
          id: 804
        }, {
          label: '冷夜雨8',
          id: 804
        }]
      ],
      showAddress:'重庆',//显示内容---项目
      pictureFrameList:[
        {
          image:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
          checkType:false,
          pickerChoose:false,
        },
        {
				  image:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
				  checkType:false,
          pickerChoose:false,
        },
        {
				  image:'https://img1.baidu.com/it/u=2652134479,594912468&fm=253&fmt=auto&app=138&f=JPEG?w=878&h=493',
				  checkType:false,
          pickerChoose:false,
        },
        {
				  image:'https://img0.baidu.com/it/u=2602636891,3687528369&fm=253&fmt=auto&app=120&f=JPEG?w=1087&h=612',
				  checkType:false,
          pickerChoose:false,
        },
        {
				  image:'https://img2.baidu.com/it/u=635571518,763366960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1131',
				  checkType:false,
          pickerChoose:false,
        },
      ],
      checkTypeFun:true,//刷新选项
      
      statusBarHeight: 0,//状态栏高度
      capsule: 0,// 胶囊大小、位置数据
      navHeight: 0,// 导航栏高度
      albumBoxTop:0,//顶部高度
			
      blowUpMaks:false,//放大显示的遮罩
      blowUpNumNew:0,//当前的位置
      currentNum:0,//当前所在滑块的 index
			
      bottomShow:false,//脚部的显隐
      pictureFrameListNum:0,//当前选择了多少张
      maxChooseImg:0,//最多选择多少张
    }
  },
  onLoad(option) {
    this.pictureFrameList.forEach(item=>{//判断每一张图片的宽高，根据宽高设置图片大小
      //await
      let imageInfoObj =  uni.getImageInfo({
        src: item.image,
        success: function (imageInfo) {
          
          if(imageInfo.height>imageInfo.width){
            item['width'] = '680rpx'
            item['height'] = '956rpx'
          }else{
            item['width'] = '680rpx'
            item['height'] = '510rpx'
          } 
        },
        fail: function (error) {
          console.error(error)
          // 获取图片信息失败后的操作
        }
      })
			
    })
    this.recordDeviceInfo()
  },
  methods: {
    clickActFun(num){//宫格选择
      this.checkTypeFun = false
      this.titleclick = num
      this.pictureFrameList.forEach(item=>{
        item.checkType = false
        item.pickerChoose = false
      })
      this.pictureFrameListNum = 0
      if(this.titleclick==2){
        this.maxChooseImg = 2
      }else if(this.titleclick==3){
        this.maxChooseImg = 3
      }else if(this.titleclick==4){
        this.maxChooseImg = 6
      }
      this.checkTypeFun = true
    },
    frameFun(num){//相框选择
      this.frameNum = num
    },
    addressFun(e){//项目选择
      this.showAddress = e.value[0].label
      this.show=false
    },
    stopPhoto(index){//相片选择
      this.checkTypeFun = false
      
      if(this.titleclick==1||this.titleclick!=1&&this.pictureFrameListNum<this.maxChooseImg||this.titleclick!=1&&this.pictureFrameListNum==this.maxChooseImg&&this.pictureFrameList[index].checkType == true){//+this.maxChooseImg+
        this.stopPhotoNumFun(index)
      }else if(this.titleclick!=1&&this.pictureFrameListNum>=this.maxChooseImg){
        this.pictureFrameList[index].checkType = true
        this.$nextTick(function() {
				  this.pictureFrameList[index].checkType = false
        })
        uni.showToast({
          title: '最多选择'+this.maxChooseImg+'张',
				  icon:'error',
          duration: 2000
        })
      }
      if(this.pictureFrameListNum>0){
        this.bottomShow = true
      }
		  this.checkTypeFun = true
    },
    stopPhotoNumFun(index){//相片选择开关
      if(this.pictureFrameList[index].checkType==false){
			  this.pictureFrameList[index].checkType = true
        this.pictureFrameList[index].pickerChoose = true
      }else{
			  this.pictureFrameList[index].checkType = false
        this.pictureFrameList[index].pickerChoose = false
      }
      this.pictureFrameListNum = 0
      this.pictureFrameList.forEach(item=>{//判断 是否有照片被选择
			  if(item.checkType==true){
			    this.pictureFrameListNum +=1
			  }
      })
    },
    blowUpFun(index){//相片放大 遮罩显隐
      this.blowUpMaks = true
      this.blowUpNumNew = index+1
      this.currentNum = index
    },
    projectNumFun(e){//当前滑动到第几张  
		  this.blowUpNumNew = e.target.current+1
    },
    recordDeviceInfo() { //---记录设备信息
		  this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
		  this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
		  this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
      this.albumBoxTop = this.statusBarHeight+this.navHeight
    },
    returnClick() {//头部 点击返回
		  uni.navigateBack({
		    delta: 1
		  })
    },
  }
}
</script>

<style scoped lang="scss">
	.albumBox{
		display: flex;
		flex-direction:column;
		height: 100vh;
		background-color: #fff;
	}
	.albumBoxAct{
		background-color: #F5F7FA;
	}
	.nav-bar {
		width: 100%;
		justify-content:center;
		font-size: 36rpx;
		font-weight: 700;
		padding: 0 24rpx 0 24rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		/deep/ .u-icon{
			margin: auto;
			position: absolute;
			left: 24rpx;
			top: 0;
			bottom: 0;
		}
	}
	.myPhoto-title{
		width: 100%;
		height: 100rpx;
		padding: 32rpx 60rpx 0 60rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		.title-click{
			height: 68rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #999999;
			line-height: 28rpx;
			position: relative;
			.click-line{
				display: none;
				width: 100%;
				height: 6rpx;
				background: #000000;
				border-radius: 4rpx;
				position: absolute;
				bottom: 18rpx;
				left: 0;
			}
		}
		.title-clickAct{
			font-size: 30rpx;
			color: #333333;
			.click-line{
				display: block;
			}
		}
	}
	.myPhoto-search{
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 102rpx;
		padding: 20rpx 24rpx 0 24rpx;
		background: #F5F7FA;
		.search-left{
			display: flex;
			.left-frame{
				font-size: 24rpx;
				color: #666666;
				line-height: 64rpx;
				padding: 0 20rpx 0 20rpx;
			}
			.left-frameAct{
				width: 160rpx;
				height: 64rpx;
				padding:0;
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				line-height: 60rpx;
				text-align: center;
				background: #E6E9F4;
				border-radius: 8rpx;
				border: 2rpx solid #DAE0EB;
			}
		}
		.search-right{
			display: flex;
			.right-addressClick{
				display: flex;
				font-weight: 600;
				font-size: 24rpx;
				color: #333333;
				line-height: 64rpx;
				position: relative;
				.address-triangle{
					width: 0px;
					height: 0px;
					margin: auto;
					margin-left: 12rpx;
					border: 10rpx solid transparent;
					border-top: 10rpx solid #D8D8D8;
				}
			}
		}
	}
	.myPhoto-list{
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content:flex-start;
		background-color: #F5F7FA;
		overflow: auto;
		position: relative;
		.list-pictureFrame{
			height: 248rpx;
			margin-bottom: 4rpx;
			position: relative;
			.pictureFrame-img{
				width: 248rpx;
				height: 248rpx;
			}
			.pictureFrame-check{
				width: 32rpx;
				height: 32rpx;
				background: transparent;
				position: absolute;
				top: 24rpx;
				left: 192rpx;
				z-index: 9;
				/deep/ .wx-checkbox-input{
					width: 32rpx;
					height: 32rpx;
					background: rgba(255,255,255,0.5);//transparent;
					border: 2rpx solid #C7C7C7;
				}
				/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
					background: #FE6600; // 选中的颜色
				}
				/deep/ .wx-checkbox-input.wx-checkbox-input-checked::before {
					color: #fff; // 选中后的图标默认是对号，这里吧对号变成透明颜色，就看不出来了
				}
			}
			.pictureFrame-checkAct{
				/deep/ .wx-checkbox-input{
					border: solid 1px #FE6600;
				}
			}
			.pictureFrame-blowUp{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				bottom: 24rpx;
				left: 192rpx;
				z-index: 9;
			}
			.pictureFrame-boxTop,
			.pictureFrame-boxBottom{
				width: 248rpx;
				height: 124rpx;
				position: absolute;
				left: 0;
				z-index: 5;
			}
			.pictureFrame-boxTop{
				top: 0;
			}
			.pictureFrame-boxBottom{
				bottom: 0;
			}
		}
		.list-pictureFrame:nth-last-child(1){
			flex: 1;
		}
		.list-noFigure{
			width: 100%;
			height: 456rpx;
			margin: auto;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			.noFigure-img{
				display: block;
				width: 400rpx;
				height: 400rpx;
				margin: 0 auto;
			}
			.noFigure-text{
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				line-height: 36rpx;
				text-align: center;
				text{
					color: #165DFF;
					margin-left: 10rpx;
				}
			}
		}
	}
	.myPhoto-listAct{
		padding-bottom: 320rpx;
	}
	.myPhoto-mask{
		width: 100%;
		height: 100%;
		background: #F5F7FA;
		position: fixed;
		left: 0;
		z-index: 10;
		.swiper{
			width: 680rpx;
			height: 956rpx;//510rpx
			margin: 0 auto;
			background: #F5F7FA;
			margin-top: 80rpx;
			/deep/ swiper-item{
				display: flex;
				align-items:center;
			}
			.pictureFrame-check{
				width: 32rpx;
				height: 32rpx;
				background: transparent;
				position: absolute;
				right: 56rpx;
				bottom: 60rpx;
				z-index: 11;
				/deep/ .wx-checkbox-input{
					width: 32rpx;
					height: 32rpx;
					background: rgba(255,255,255,0.5);//transparent;
					border: 2rpx solid #C7C7C7;
				}
				/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
					background: #FE6600; // 选中的颜色
				}
				/deep/ .wx-checkbox-input.wx-checkbox-input-checked::before {
					color: #fff; // 选中后的图标默认是对号，这里吧对号变成透明颜色，就看不出来了
				}
			}
			.pictureFrame-checkAct{
				/deep/ .wx-checkbox-input{
					border: solid 1px #FE6600;
				}
			}
		}
	}
	.myPhoto-bottom{
		width: 100%;
		height: 314rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 30;
		.bottom-tips{
			width: 726rpx;
			height: 64rpx;
			background: #FFF6E8;
			border-radius: 8rpx 8rpx 0rpx 0rpx;
			border: 2rpx solid #FE6600;
			box-sizing: border-box;
			font-weight: 400;
			font-size: 24rpx;
			color: #FE6600;
			text-align: center;
			line-height: 60rpx;
			margin: 0 auto;
		}
		.bottom-feature{
			width: 100%;
			height: 250rpx;
			background-color: #fff;
			padding: 20rpx 24rpx 0 24rpx;
			.feature-list{
				display: flex;
				width: 100%;
				overflow: auto;
			}
			.feature-case{
				width: 142rpx;
				height: 142rpx;
				padding: 10rpx 10rpx 0 0;
				margin-right: 15rpx;
				position: relative;
				.feature-img{
					width: 132rpx;
					height: 132rpx;
				}
				.feature-close{
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
			}
			.feature-message{
				display: flex;
				justify-content: space-between;
				height: 64rpx;
				margin-top: 6rpx;
				.message-selectNum{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 64rpx;
					.selectNum-color{
						color: #333333;
						margin-left: 10rpx;
					}
				}
				.message-trading{
					display: flex;
					position: relative;
					.trading-btn{
						width: 160rpx;
						height: 64rpx;
						position: relative;
					}
					.trading-left{
						background: #FF9F43;
						border-radius: 200rpx 0rpx 0rpx 200rpx;
						image{
							width: 40rpx;
							height: 40rpx;
							margin: auto;
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
						}
					}
					.trading-num{
						width: 42rpx;
						height: 44rpx;
						border-radius: 50%;
						background: #FFFFFF;
						line-height: 44rpx;
						text-align: center;
						font-weight: bold;
						font-size: 28rpx;
						color: #FE6600;
						position: absolute;
						right: 12rpx;
						top: -22rpx;
					}
					.trading-right{
						background: #FE6600;
						border-radius: 0rpx 200rpx 200rpx 0rpx;
						text-align: center;
						line-height: 64rpx;
						font-size: 28rpx;
						font-weight: 600;
						text-align: center;
						color: #FFFFFF;
					}
				}
				.message-jigsaw{
					width: 160rpx;
					height: 64rpx;
					background: #FE6600;
					border-radius: 32rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
				}
			}
		}
	}
	.myPhoto-getPhotos{
		width: 174rpx;
		height: 174rpx;
		position: fixed;
		right: 32rpx;
		bottom: 58rpx;
	}
</style>