<template>
	<view class="albumBox">
		<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">
			<view class="list-pictureFrame" v-for="(item,index) in pictureFrameList" :key="index">
				<image class="pictureFrame-img" :src="item.url"></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"></view>
				<image class="pictureFrame-blowUp" src="../static/album/icon04.png"></image>
			</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:[
        {
          url:'../static/album/DIY.png',
          checkType:false,
        },
        {
				  url:'../static/album/DIY.png',
				  checkType:false,
        },
        {
				  url:'../static/album/DIY.png',
				  checkType:false,
        },
        {
				  url:'../static/album/DIY.png',
				  checkType:false,
        },
        {
				  url:'../static/album/DIY.png',
				  checkType:false,
        },
      ],
      checkTypeFun:true,//刷新选项
    }
  },
  onLoad(option) {
    
  },
  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
		  }
		  this.checkTypeFun = true
    },
    blowUpFun(){//相片放大
			
    },
  }
}
</script>

<style scoped lang="scss">
	page {
		background: #F5F7FA;
	}
	.albumBox{
		padding-top: 202rpx;
	}
	.myPhoto-title{
		width: 100%;
		height: 100rpx;
		padding: 32rpx 60rpx 0 60rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 40;
		.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;
		position: fixed;
		left: 0;
		top: 100rpx;
		z-index: 40;
		.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{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.list-pictureFrame{
			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;
		}
	}
</style>