<template>
	<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
		<!--头部 选择产品-->
		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
			<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
			选择产品
		</view>
		<!--当没有相片时显示-->
		<view v-if="photoList.length==0" class="scanCode-noPhoto">
			<image src="../static/album/icon12.png"></image>
			<view>暂无下载相片</view>
		</view>
		<!--横线-->
		<view class="casnCode-Line"></view>
		<!--当图片列表-->
		<view class="casnCode-photoCase">
			<template v-for="(item,index) in photoList">
				<!--:class="item.checkType==true?'photoCase-listAct':''" 点击后红线 暂时放弃-->
				<view class="photoCase-list" :key="index" @longtap="longTapDel(index)" @click="photoDelHide(index)">
					<!-- <view class="list-title">已下载</view> -->
					<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" v-if="photoListShow==true">
						<checkbox :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''" />
					</checkbox-group>
					<image class="list-img" :src="item.url"></image>
					<view class="list-delCase" @click.stop.native="longTapDelHide(index)" v-if="item.delType==true">
						<view class="list-del" @click.stop.native="()=>{}">
							<u-icon name="trash-fill"></u-icon>
						</view>
					</view>
					
					<!-- <view class="list-bttom">点击图片编辑</view> -->
				</view>
			</template>
			<view class="photoCase-add">
				<view class="add-label">
					<u-icon name="plus-circle-fill"></u-icon>
					<view class="label-text">添加照片</view>
				</view>
			</view>
		</view>
		<!--脚部按钮显示-->
		<view class="scanCode-btn">
			<view class="btn-style" v-if="photoListType!=true">
				本地上传
			</view>
			<view class="btn-style" v-else @click="compometsBuyFun()">
				下一步
			</view>
		</view>
		<!--脚部提示文字-->
		<view class="scanCode-tips">
			禁止上传反动、色情、暴力等非法及涉密图片，如有违反, 所有责任由用户自行承担.
		</view>
		<!--购买-->
		<compometsBuy v-if="compometsBuyType==true"></compometsBuy>
	</view>
</template>

<script>
import compometsBuy from './../albumComponets/compometsBuy/compometsBuy.vue'
export default {
  components: {
	  compometsBuy
  },
  data() {
    return {
      statusBarHeight: 0,//状态栏高度
      capsule: 0,// 胶囊大小、位置数据
      navHeight: 0,// 导航栏高度
      albumBoxTop:0,//顶部高度
			
      photoList:[
        {
          url:'https://i1.hdslb.com/bfs/archive/f2fb0e1e4da68f67efa9fc831200bd31699976f7.jpg',
          checkType:false,
          delType:false,
        },
        {
          url:'https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20240716/2/2/f808b789231e61009385f81a96ec400e.jpg',
          checkType:false,
          delType:false,
        },
      ],//相片列表
      photoListType:false,//当有相片选择为true
      photoListShow:true,//选择后显隐刷新页面
			
      compometsBuyType:false,//点击下一步 限时购买按钮
    }
  },
  onLoad(option) {
    this.recordDeviceInfo()
  },
  methods: {
    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
		  })
    },
    stopPhoto(index){//相片选择
      this.photoListShow = false
      if(this.photoList[index].checkType==true){
        this.photoList[index].checkType=false
      }else{
        this.photoList[index].checkType=true
      }
      this.photoListType = false
      this.photoList.forEach((item,index)=>{//是否被选中的图片 有则底部按钮显示未下一步
        if(item.checkType==true){
          this.photoListType = true
        }
      })
      this.photoListShow = true
    },
    longTapDel(index){//长按删除相片按钮出现
      this.photoList[index].delType=true
    },
    longTapDelHide(index){//点击删除按钮隐藏
      this.photoList[index].delType=false
    },
    photoDelHide(index){//点击若无删除 则触发多选
      if(this.photoList[index].delType==true){
        return
      }else{
        this.stopPhoto(index)
      }
    },
    compometsBuyFun(){//点击下一步显示购买页面
      this.compometsBuyType = true
    },
  }
	
}
</script>

<style scoped lang="scss">
	.albumBox{
		display: flex;
		flex-direction:column;
		height: 100vh;
		background-color: #fff;
		padding-bottom: 230rpx;
		overflow: auto;
	}
	.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;
		}
	}
	.scanCode-noPhoto{
		width: 400rpx;
		height: 400rpx;
		margin: auto;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		image{
			display: block;
			width: 400rpx;
			height: 400rpx;
		}
		view{
			width: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
			position: absolute;
			left: 0;
			bottom: 16rpx;
		}
	}
	.scanCode-btn{
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		border-top: solid 2rpx #EDEDED;
		padding-top: 18rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		.btn-style{
			width: 670rpx;
			height: 80rpx;
			margin: 0 auto;
			background: linear-gradient( 119deg, #FFA000 0%, #FE6600 100%);
			border-radius: 40rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}
	.casnCode-Line{
		width: 750rpx;
		height: 20rpx;
	}
	.casnCode-photoCase{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		padding: 24rpx;
		.photoCase-list{
			width: 340rpx;
			height: 470rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx #ECF0FB;
			border-radius: 8rpx;
			border: 4rpx solid #E6E6E6;
			box-sizing: border-box;
			padding: 2rpx;
			margin-bottom: 24rpx;
			position: relative;
			.list-img{
				width: 100%;
				height: 100%;
			}
			.list-title{
				width: 100rpx;
				height: 52rpx;
				background: #333333;
				border-radius: 8rpx 0rpx 8rpx 0rpx;
				opacity: 0.5;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 52rpx;
				text-align: center;
				position: absolute;
				top: 6rpx;
				left: 6rpx;
			}
			.list-bttom{
				width: 328rpx;
				height: 52rpx;
				margin: auto;
				background: #333333;
				border-radius: 0rpx 0rpx 8rpx 8rpx;
				opacity: 0.5;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 52rpx;
				text-align: center;
				position: absolute;
				bottom: 4rpx;
				left: 6rpx;
			}
			.pictureFrame-check{
				width: 32rpx;
				height: 32rpx;
				background: transparent;
				position: absolute;
				top: -1rpx;
				right: 7rpx;
				z-index: 11;
				/deep/ .wx-checkbox-input{
					width: 32rpx;
					height: 32rpx;
					background: rgba(255,255,255,1);//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;
				}
			}
			.list-del{
				width: 150rpx;
				height: 150rpx;
				border-radius: 100rpx;
				background: #333333;
				opacity: 0.5;
				margin: auto;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				/deep/ .u-icon--right{
					height: 150rpx;
				}
				/deep/ .u-icon__icon{
					color: #FFFFFF !important;
					font-size: 90rpx !important;
					margin: 0 auto;
				}
			}
			.list-delCase{
				width: 340rpx;
				height: 470rpx;
				margin: auto;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
		}
		.photoCase-listAct{
			border: 4rpx dashed #F53F3F;
		}
		.photoCase-add{
			width: 340rpx;
			height: 470rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx #ECF0FB;
			border-radius: 8rpx;
			border: 2rpx solid #F5F5F5;
			position: relative;
			margin-bottom: 24rpx;
			.add-label{
				width: 100%;
				height: 162rpx;
				margin: auto;
				position: absolute;
				top: 0;
				bottom: 0;
				.label-text{
					margin-top: 34rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: center;
				}
				/deep/ .u-icon--right{
					height: 90rpx;
				}
				/deep/ .u-icon__icon{
					color: #165DFF !important;
					font-size: 90rpx !important;
					margin: 0 auto;
				}
			}
		}
	}
	.scanCode-tips{
		width: 686rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
		margin: auto;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 160rpx;
	}
</style>
