<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">
			<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" 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':''">
			<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="val" :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>
		</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>
		<view class="myPhoto-bottom">
			<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.checkType==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>
				<view class="feature-message"></view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
  components: {
    
  },
  data() {
    return {
      titleclick:1,//1单照片 2二宫格 3三宫格 4六宫格
      frameNum:1,//相框选择参数
      show: false,//遮罩显隐---项目
      columns: [//遮罩列表---项目
        [{
          label: '雪月夜',
          // 其他属性值
          id: 2021
          // ...
        }, {
          label: '冷夜雨',
          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,
        },
        {
				  image:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
				  checkType:false,
        },
        {
				  image:'https://img1.baidu.com/it/u=2652134479,594912468&fm=253&fmt=auto&app=138&f=JPEG?w=878&h=493',
				  checkType:false,
        },
        {
				  image:'https://img0.baidu.com/it/u=2602636891,3687528369&fm=253&fmt=auto&app=120&f=JPEG?w=1087&h=612',
				  checkType:false,
        },
        {
				  image:'https://img2.baidu.com/it/u=635571518,763366960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1131',
				  checkType:false,
        },
      ],
      checkTypeFun:true,//刷新选项
      
      statusBarHeight: 0,//状态栏高度
      capsule: 0,// 胶囊大小、位置数据
      navHeight: 0,// 导航栏高度
      albumBoxTop:0,//顶部高度
			
      blowUpMaks:false,//放大显示的遮罩
      blowUpNumNew:0,//当前的位置
      currentNum:0,//当前所在滑块的 index
			
      bottomShow:false,//脚部的显隐
    }
  },
  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)
          // 获取图片信息失败后的操作
        }
      })
			
    })
    console.log(this.pictureFrameList)
    this.recordDeviceInfo()
  },
  methods: {
    clickActFun(num){//宫格选择
      this.checkTypeFun = false
      this.titleclick = num
      this.pictureFrameList.forEach(item=>{
        item.checkType = false
      })
      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.pictureFrameList[index].checkType==false){
		    this.pictureFrameList[index].checkType = true
		  }else{
		    this.pictureFrameList[index].checkType = false
		  }
      var pictureFrameListNum = 0
      this.pictureFrameList.forEach(item=>{//判断 是否有照片被选择
        if(item.checkType==true){
          pictureFrameListNum +=1
        }
      })
      if(pictureFrameListNum>0){
        this.bottomShow = true
      }
		  this.checkTypeFun = true
    },
    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;
		.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: transparent;
					border: solid 1px #fff;
				}
				/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;
		}
	}
	.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: transparent;
					border: solid 1px #fff;
				}
				/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;
				margin-top: 6rpx;
			}
		}
	}
</style>