<template>
	<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}">
		<view class="nav-bar" :style="{'top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
			摄影/旅拍
		</view>
		<view class="body">
			<view class="scroll-view" >
				<view class="item" @click="jumpToScanFaceClick">
					<image class="img" src="../../static/img/album/myAlbum.png"></image>
					<text class="title">我的相片</text>
				</view>
				<view class="item">
					<image class="img" src="../../static/img/album/DIY.png"></image>
					<text class="title">影像DIY</text>
				</view>
				<view class="item" @click="jumpToCustomClick">
					<image class="img" src="../../static/img/album/custom.png"></image>
					<text class="title">旅拍定制</text>
				</view>
				<view class="item">
					<image class="img" src="../../static/img/album/myVlog.png"></image>
					<text class="title">我的Vlog</text>
				</view>
			</view>
			
			<view class="private-custom">
				<view class="title">私人定制</view>
				<u-waterfall v-model="list" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="left demo-water" v-for="(item, index) in leftList" :key="index" @click="jumpToClick(item.title)">
							<image :src="item.image" mode="aspectFill"></image>
							<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> -->
							<view class="info-box" :style="{'background-color': item.color}">
								<view class="item-title">{{item.title}}</view>
								<view class="slogan">一句宣传语</view>
								<view class="bottom">
									<view class="img-btn">
										点击定制
										<u-icon name="arrow-right"></u-icon>
									</view>
									<text class="count">{{item.count}}</text>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-water" v-for="(item, index) in rightList" :key="index" @click="jumpToClick(item.title)">
							<image :src="item.image" mode="aspectFill"></image>
							<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> -->
							<view class="info-box" :style="{'background-color': item.color}">
								<view class="item-title">{{item.title}}</view>
								<view class="slogan">快来定制吧</view>
								<view class="bottom">
									<view class="img-btn">
										点击定制
										<u-icon name="arrow-right"></u-icon>
									</view>
									<text class="count">{{item.count}}</text>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
		</view>
		<u-mask :show="showtip" >
			<view class="mask">
				<view class="img-box">
					<image src="../../static/img/album/postcardTip.png" mode="aspectFit"></image>
					<u-icon class="close" name="close-circle" @click="showtip = false"></u-icon>
				</view>
				<u-button type="primary" shape="circle" @click="showtip = false">知道了</u-button>
			</view>
		</u-mask>
	</view>
</template>

<script>
import UWaterfall from '@/uview-ui/components/u-waterfall/u-waterfall.vue'
import ULazyLoad from '@/uview-ui/components/u-lazy-load/u-lazy-load.vue'
import UMask from '@/uview-ui/components/u-mask/u-mask.vue'

export default {
  components: {
	  UWaterfall,
	  ULazyLoad,
    UMask
  },
  data() {
    return {
      showtip: false,//领取提示
      statusBarHeight: 0,
      capsule: 0,
      navHeight: 0,
      list: [
        {
          title: '精彩瞬间',
          count: '10W+',
          image: '../../static/img/album/wonderfulMoment.png',
          color: '#037EFF'
        },
        {
          title: '网红旅拍',
          count: '8W+',
          image: '../../static/img/album/travalphoto.png',
          color: '#826847'
        },
        {
          title: '抱枕DIY',
          count: '4W+',
          image: '../../static/img/album/pillow.png',
          color: '#1175B4'
        },
        {
          title: '明信片',
          count: '4W+',
          image: '../../static/img/album/postcard.png',
          color: '#3478DC'
        },
        {
				  title: '旅游台历定制',
				  count: '4W+',
				  image: '../../static/img/album/deskCalender.png',
          color: '#1A9B45'
        },
        {
				  title: '定制相册',
				  count: '4W+',
				  image: '../../static/img/album/customPic.png',
          color: '#D48D46'
        }
      ]
    }
  },
  methods: {
    jumpToScanFaceClick() {//---跳转扫脸页面
      const openid = uni.getStorageSync('openid')
			
      this.$request('wechatUser/pdFace/checkScanFace',{openid}).then(res => {//创建任务
			  if (res.code === '00') {
			    if(res.data.isScanFace === 0) {//未扫脸
            uni.navigateTo({
              url: './getPortrait'
            })
          }else if(res.data.isScanFace === 1) {//已扫脸
            this.jumpToCustomClick()
          }
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    jumpToCustomClick() {//---跳转旅拍定制页面
		  uni.navigateTo({
			  url: './myPhotoAlbum/myPhotoAlbum'
		  })
    },
    jumpToClick(title) {
      if(title === '精彩瞬间') {
        this.jumpToScanFaceClick()
      }
      if(title === '网红旅拍') {
        uni.navigateTo({
				  url: './myPhotoAlbum/myPhotoAlbum'
        })
      }
    },
    recordDeviceInfo() {//---记录设备信息
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
      this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
      this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
    }	
  },
  onLoad(option) {
    if(option.tip === 'true') this.showtip = true
    this.recordDeviceInfo()
  }		
}
</script>

<style lang="scss" scoped>
	.big-box {
		position: relative;
		padding: 0 24rpx;
		background: linear-gradient(to right bottom, #c778f350, #66ddad50, #68d6de50);
		z-index: 0;
		&::after {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;	
			bottom: 0;
			left: 0;
			z-index: -1;
			background: linear-gradient(to top, #f7f7f7, #f7f7f7 80%, transparent 100%);
		}
		/deep/.u-mask {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.nav-bar {
		font-size: 36rpx;
		font-weight: 700;
		z-index: 9;
	}	
	.scroll-view {
		display: flex;
		width: calc(100% + 48rpx);
		position: relative;
		top: 0;
		left: -24rpx;
		overflow-x: auto;
		padding: 46rpx 0 0 24rpx;
		margin-bottom: 48rpx;
		&::-webkit-scrollbar {
			display: none;
		}
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 24rpx;
		}
		.img {
			width: 200rpx;
			height: 136rpx;
			border-radius: 16rpx;
			// padding: 10rpx 12rpx 8rpx 12rpx;
			margin-bottom: 16rpx;
			box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.12);
			overflow: hidden;
		}
		.title {
			font-size: 28rpx;
			font-weight: 700;
		}
	}
	.private-custom {
		.title {
			position: relative;
			margin-bottom: 24rpx;
			font-size: 32rpx;
			font-weight: 700;
			&::after {
				content: '';
				width: 128rpx;
				height: 44rpx;
				position: absolute;
				left: -8rpx;
				bottom: -24rpx;
				background: url('@/static/img/album/private-custom.png') no-repeat;
			}
		}
		.demo-water {
			image {
				border-radius: 16rpx 16rpx 0 0;
				width: 100%;
			}
			/deep/.u-wrap,
			/deep/.u-lazy-item {
				broder-radius: 16rpx 16rpx 0 0 !important;
			}
		}
		.left.demo-water {
			margin-right: 14rpx;
		}
		.info-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 170rpx;
			position: relative;
			top: -16rpx;
			padding: 16rpx;
			box-sizing: border-box;
			border-radius: 0 0 16rpx 16rpx;
			color: #fff;
			.item-title {
				font-size: 28rpx;
				font-weight: 700;
			}
			.slogan {
				font-size: 24rpx;
			}
			.img-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background-color: #E1E1D9;
				color: #333;
				font-size: 22rpx;
			}
			.bottom {
				display: flex;
				justify-content: space-between;
				.count {
					font-size: 28rpx;
					color: #ececec;
				}
			}
		}
	}
	.mask {
		.img-box {
			position: relative;
			margin-bottom: 32rpx;
			.close {
				position: absolute;
				top: -54rpx;
				right: 24rpx;
				color: #fff;
				&::after {
					position: absolute;
					content: '';
					top: 24rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 0;
					height: 32rpx;
					border-left: 1px dashed #fff;
				}
			}
		}
		image {
			width: 504rpx;
			height: 720rpx;
		}
		/deep/.u-btn {
			width: 304rpx	;
		}
	}
</style>