<template>
	<view class="albumBox">
		<!--头部-->
		<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/img/album/myPhoto01.png"></image>
				</view>
				<u-picker mode="selector" v-model="orderShow"  :default-selector="[orderType]" :range="option" range-key="cateName" @confirm="industrysTypeConfirm($event)" @cancel="cancel"></u-picker>
				<view class="left-project" :class="[projectCheck==0?'left-projectDe':'']" @click="projectClick(0)" >
					长江索道
					<i>6</i>
				</view>
				<view class="left-project" :class="[projectCheck==1?'left-projectDe':'']" @click="projectClick(1)" >
					定制旅拍
					<i>8</i>
				</view>
			</view>
			<view class="address-right" @click="projectMoreFun()">
				<u-icon name="more-dot-fill"></u-icon>
			</view>
		</view>
		<!--头部更多-->
		<view class="album-addressMore" v-if="projectMoreType==true">
			<view class="addressMore-name">长江索道(6)</view>
			<view class="addressMore-name">定制旅拍(8)</view>
		</view>
		<!--全选按钮-->
		<view class="album-checkAll">
			<u-checkbox v-model="checkProjectAll" >全选</u-checkbox>
			<view class="checkAll-tips">未下载影像保留15天</view>
		</view>
		<!--主体循环-->
		<view class="album-subject">
			<view class="subject-List">
				<image class="list-image" src="../../../static/img/hghg/dialog.png"></image>
				<u-checkbox v-model="checkProjectAll" shape="circle" class="list-uCheck" ></u-checkbox>
				<view class="list-mask">预览</view>
			</view>
			<view class="subject-List">
				<image class="list-image" src="../../../static/img/hghg/dialog.png"></image>
				<u-checkbox v-model="checkProjectAll" shape="circle" class="list-uCheck" ></u-checkbox>
				<view class="list-mask">预览</view>
			</view>
			<view class="subject-List">
				<image class="list-image" src="../../../static/img/hghg/dialog.png"></image>
				<u-checkbox v-model="checkProjectAll" shape="circle" class="list-uCheck" ></u-checkbox>
				<view class="list-mask">预览</view>
			</view>
			<view class="subject-List">
				<image class="list-image" src="../../../static/img/hghg/dialog.png"></image>
				<u-checkbox v-model="checkProjectAll" shape="circle" class="list-uCheck" ></u-checkbox>
				<view class="list-mask">预览</view>
			</view>
			<view class="subject-List">
				<image class="list-image" src="../../../static/img/hghg/dialog.png"></image>
				<u-checkbox v-model="checkProjectAll" shape="circle" class="list-uCheck" ></u-checkbox>
				<view class="list-mask">预览</view>
			</view>
			<view class="subject-List">
				<image class="list-image" src="../../../static/img/hghg/dialog.png"></image>
				<u-checkbox v-model="checkProjectAll" shape="circle" class="list-uCheck" ></u-checkbox>
				<view class="list-mask">预览</view>
			</view>
		</view>
		<!--脚部-->
		<view class="album-bottom">
			<view class="bottom-left" v-if="maskDetail==false">
				<view class="left-oldMoney">￥15.00</view>
				<view class="left-newMoney">￥10.00</view>
				<view class="left-detail" @click="maskDetail=true">
					<text>明细</text>
					<u-icon name="arrow-up"></u-icon>
				</view>
				
				<view class="left-num">1</view>
				<view class="left-mask">
					多够更省
					<view class="mask-transparent"></view>
				</view>
			</view>
			<view class="bottom-Detail" v-if="maskDetail==true">
				<view class="detail-total">合计：￥8.00</view>
				<view class="detail-favorable">优惠减：￥2.00</view>
			</view>
			<view class="bootom-btn">去下载</view>
		</view>
		<!--预览-->
		<view class="album-maskPreview">
			<view class="maskPreview-Num">{{previewNum+1}}/{{previewData.length}}</view>
			<view class="maskPreview-img" @touchstart="start" 	@touchend="end" 	@touchmove="move">
				<template v-if="previewData.length==1">
					<image class="img-center" :src="previewData[previewNum].src"></image>
				</template>
				<template v-else>
					<image class="img-left" v-if="previewNum==0" :src="previewData[previewData.length-1].src"></image>
					<image class="img-left" v-else :src="previewData[previewNum-1].src"></image>
					
					<image class="img-center" :style="{'right':touchRight,'left':touchLeft}" :src="previewData[previewNum].src"></image>
					
					<image class="img-right" v-if="previewNum==previewData.length-1" :src="previewData[0].src"></image>
					<image class="img-right" v-else :src="previewData[previewNum+1].src"></image>
				</template>
			</view>
			<view class="maskPreview-check">
				<u-checkbox v-model="previewData[previewNum].type" shape="circle" class="maskPreview-Check" ></u-checkbox>
			</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">1*10.00=10.00</view>
				</view>
				<view class="content-favorable">
					<view class="favorable-name">优惠</view>
					<view class="favorable-text">-￥2.00</view>
				</view>
			</view>
		</view>
	</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'
export default {
  components: {
    uPicker,
    uCheckboxGroup,
    uCheckbox,
  },
  data() {
    return {
      orderShow:false,//头部城市选择
      option: [
        { cateName: '全部', id: 0 },
        { cateName: '景区', id: 1 },
        { cateName: '酒店', id: 2 },
        { cateName: '餐饮', id: 3 },
        { cateName: '特产', id: 4 },
        // { cateName: '运营车', id: 5 },
        // { cateName: '组合订单', id: 10 },
      ],
      cityName:'重庆',
      projectCheck:0,//当前选择的产品
      projectMoreType:false,//是否显示更多产品
      checkProjectAll:false,//所有产品全选
      maskDetail:false,
      previewData:[//图片预览
        {
          type:false,
          src:'../../../static/img/hghg/dialog.png'
        },
        {
          type:false,
          src:'../../../static/img/coupon/coupon.jpg'
        },
        {
          type:false,
          src:'../../../static/img/common/getTicketBg.jpg'
        },
      ],
      previewNum:0,//当前是第几张图片
      //左右滑动监听开始
      startData: {
        clientX: '',
        clientY: '',
      },
      transition:'',
      touch: {},
      touchLeft:0,
      touchRight:0,
      //左右滑动 监听结束
    }
  },
  onLoad(option) {
			
  },
  methods: {
    industrysTypeConfirm(e) {//单列----分类 点击确定 城市
		  this.cityName = this.option[e].cateName
    },
    cancel() {//单列 点击取消
		  this.orderShow = false
    },
    projectClick(num){//产品选择
      this.projectCheck = num
    },
    projectMoreFun(){//更多产品显示
      if(this.projectMoreType==false){
        this.projectMoreType = true
      }else{
        this.projectMoreType = false
      }
    },
    // 触摸touch事件
    start(e){  //@touchstart 触摸开始
      this.transition = '.1s'
      this.startData.clientX = e.changedTouches[0].clientX   //手指按下时的X坐标         
      this.startData.clientY = e.changedTouches[0].clientY   //手指按下时的Y坐标
    },
    end(e){  //@touchend触摸结束
      this.transition = '.5s'
      if(Math.abs(this.touch.clientX-this.startData.clientX) > 100) {  //在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
        console.log('执行查看跳转事件')
        // this.touch = {};
      } else {
        console.log('滑动距离不够，不执行跳转')
        // this.touch = {};
      }
    },
    move(event) {  //@touchmove触摸移动
      let touch = event.touches[0]  //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
      this.touch = touch
      let data = touch.clientX - this.startData.clientX
      if(touch.clientX < this.startData.clientX) {  //向左移动
        console.log('左滑动')
        console.log(touch.clientX)
        console.log(this.startData.clientX)
        this.touchRight = touch.clientX-this.startData.clientX
      }
      if(touch.clientX > this.startData.clientX) {  //向右移动
        console.log('右滑动')
        console.log(touch.clientX)
        console.log(this.startData.clientX)
        this.touchLeft = touch.clientX-this.startData.clientX
      }
    },
  }
}
</script>

<style scoped lang="scss">
page{
	background-color: #F7F7F7;
}
.albumBox{ // 76=16 - 44 - 16   98 =34 - 32 - 32
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #F7F7F7;
	padding-bottom: 98rpx;
	padding-top: 174rpx;
	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-checkAll{
	display: flex;
	width: 100%;
	height: 98rpx;
	padding: 32rpx 24rpx 0 24rpx;
	overflow: hidden;
	position: fixed;
	top: 76rpx;
	left: 0;
	z-index: 20;
	/deep/ .u-checkbox{
		line-height: 34rpx !important;
	}
	/deep/ .u-checkbox__label{
		font-size: 24rpx !important;
	}
	.checkAll-tips{
		font-size: 24rpx;
		color: #999999;
		line-height: 46rpx;
		margin-left: 24rpx;
	}
}
.album-subject{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex: 1;
	padding: 0 24rpx 0 24rpx;
	overflow: auto;
	.subject-List{
		width: 344rpx;
		height: 460rpx;
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		.list-image{
			display: block;
			width: 344rpx;
			height: 460rpx;
		}
		.list-mask{
			width: 344rpx;
			height: 64rpx;
			background-color: rgba(0, 0, 0, 0.2);
			font-size: 28rpx;
			color: #fff;
			line-height: 64rpx;
			text-align: center;
			position: absolute;
			left: 0;
			bottom: 0;
		}
		.list-uCheck{
			position: absolute;
			right: 0;
			top: 24rpx;
		}
	}
}
.album-bottom{
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 98rpx;
	padding: 0 0 0 24rpx;
	box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0,0,0,0.08);
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 22;
	.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: 350rpx;
			top: -24rpx;
			.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: 19;
	background-color: rgba(0,0,0,.3);
	.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;
			}
		}
	}
}
.album-maskPreview{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 98rpx;
	left: 0;
	z-index: 22;
	background-color: rgba(0,0,0,.3);
	.maskPreview-Num{
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		position: fixed;
		top: 72rpx;
		right: 32rpx;
	}
	.maskPreview-img{
		display: flex;
		width: 100%;
		height: 794rpx;
		position: fixed;
		top: 152rpx;
		left: 0;
		.img-left{
			width: 520rpx;
			height: 692rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: auto;
			position: absolute;
			left: -466rpx;
			top: 0;
			bottom: 0;
		}
		.img-right{
			width: 520rpx;
			height: 692rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: auto;
			position: absolute;
			right: -466rpx;
			top: 0;
			bottom: 0;
		}
		.img-center{
			width: 596rpx;
			height: 794rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: auto;
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			left: 0;
		}
	}
	.maskPreview-check{
		width: 48rpx;
		height: 48rpx;
		margin: auto;
		position: fixed;
		top: 968rpx;
		left: 0;
		right: 0;
		/deep/ .u-checkbox__icon-wrap{
			width: 50rpx !important;
			height: 50rpx !important;
			color: #fff !important;
			border:solid 2px #fff;
		}
	}
}
</style>
