<template>
	<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}" v-if="show">

		<view class="nav-bar"
			:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
			<u-icon name="arrow-left" color="#333" v-if="options.index" @click="returnClick"></u-icon>
			摄影/旅拍
		</view>
		
		<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
		
		<view class="photo-acquire">
			<view class="acquire-box acquire-boxBlue" @click="jumpToScanFaceClick">
				<view class="box-title">获取相片</view>
				<view class="box-text">获取拍摄相片</view>
				<image class="box-img" src="./../static/album/icon02.png"></image>
			</view>
			<view class="acquire-box acquire-boxGreen">
				<view class="box-title">相片DIY</view>
				<view class="box-text">编辑手机相片</view>
				<button class="acquire-input" @click="chooseImg"></button>
				<image class="box-img" src="./../static/album/icon03.png"></image>
			</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>
						<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>
						<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>
</template>

<script>
export default {
  data() {
    return {
      couponTip: false, //券领取提示
      showUseRule: false, //使用规则提示
      statusBarHeight: 0,
      capsule: 0,
      navHeight: 0,
      show: false, //是否显示首页
      isHaveCoupon: false, //是否有劵
      list: [{
        title: '精彩瞬间',
        count: '10W+',
        image: './../static/album/wonderfulMoment.png',
        color: '#037EFF'
      },
      {
        title: '网红旅拍',
        count: '8W+',
        image: './../static/album/travalphoto.png',
        color: '#826847'
      },
      {
        title: '抱枕DIY',
        count: '4W+',
        image: './../static/album/pillow.png',
        color: '#1175B4'
      },
      {
        title: '明信片',
        count: '4W+',
        image: './../static/album/postcard.png',
        color: '#3478DC'
      },
      {
        title: '旅游台历定制',
        count: '4W+',
        image: './../static/album/deskCalender.png',
        color: '#1A9B45'
      },
      {
        title: '定制相册',
        count: '4W+',
        image: './../static/album/customPic.png',
        color: '#D48D46'
      }
      ],
      rules: [], //使用规则
      options: {}, //路由参数
      couponPrice: '', //优惠券金额
      openid: '',
      userId: '',
    }
  },
  methods: {
    chooseImg(){
      uni.chooseImage({
        count: 6, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          console.log(JSON.stringify(res.tempFilePaths))
        }
      })
    },
    returnClick() {
      uni.navigateBack({
        delta: 1
      })
    },
    closeMask() { //---关闭遮罩
      this.couponTip = false
      this.showUseRule = false
    },
    jumpToScanFaceClick() { //---跳转扫脸页面
      this.$request('wechatUser/pdFace/checkScanFace', {
        openid: this.openid
      }).then(res => {
        if (res.code === '00') {
          const merchantId = this.options.merchantId || 'z0015605022691a5945bbe463141668c' // 默认长江索道
          if (res.data.isScanFace === 0) { //未扫脸
            uni.navigateTo({
              url: `./getPortrait?merchantId=${merchantId}`
            })
          } else if (res.data.isScanFace === 1) { //已扫脸
            const faceIds = JSON.stringify(res.data.faceIds)
            const companyId = this.options.companyId
            uni.navigateTo({
              url: `./myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId=${merchantId}`
            })
          }
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none'
        })
      })
    },
    jumptoVlog() { //---跳转到vlog页面
      uni.redirectTo({
        url: '/pages/vlog/vlogIndex/vlogIndex'
      })
    },
    jumpToClick(title) {
      if (title === '精彩瞬间' || title === '网红旅拍') {
        this.jumpToScanFaceClick()
      }
    },
    judgeWhether(url, data) { //---判断是否成功的封装函数
      return new Promise((resolve, reject) => {
        this.$request(url, data).then(res => {
          if (res.code === '00') {
            resolve(res.data)
          } else {
            reject(false)
          }
        }).catch(() => {
          reject(false)
        })
      })
    },
    async handleWhetherToVotePage() { //---判断是否跳转投票页面
      try{
        // 1.获取调查列表id
        const surveyQueryData = {
          pageCode: 'albumIndex', //默认前端写死
          channelId: this.options.channelId //游客扫码携带的channelId
        }
        const surveyList = await this.judgeWhether('scenic/market/findPageMarket', surveyQueryData)
				
        // 2.判断商店是否在做投票活动，获取模板
        let surveyIds
        let surveyResult = []

        if (surveyList.length) {
          surveyIds = surveyList.map(item => item.surveyId)
          surveyResult = await this.judgeWhether('scenic/albumConfig/getSurveyConfig', {
            surveyIds
          })
        }else {// 调查模板为空则直接展示首页
          this.show = true
          this.couponIsUse()
          return
        }

        // 3.判断用户是否已经投过票
        let voteObj = {} // 用户投票信息

        if (surveyResult.length) {
          const votedQueryData = {
            merchantId: surveyResult[0].merchantId,
            openid: uni.getStorageSync('openid')
          }
          voteObj = await this.judgeWhether('wechatUser/pdAlbum/checkVisitorSurvey', votedQueryData)
        }else {
          this.show = true
          this.couponIsUse()
          return
        }

        // 4.判断是否跳转投票页面
        if (voteObj.alreadySurvey === 0) { // 未投过票	
          uni.navigateTo({
            url: `./chooseFavorite?surveyConfig=${JSON.stringify(surveyResult)}`
          })
        } else if (voteObj.alreadySurvey === 1) { // 已投票
          this.show = true
          this.couponIsUse()
        }
			
      }catch(e){
        this.show = true
        this.couponIsUse()
        console.log(e)
      }
    },
    getCoupon() { //---获取优惠券
      var data = {
        pageCode: 'albumIndex',
        marketingStatus: 1,
        openid: this.openid,
        userId: this.userId
      }
      this.$request('scenic/market/findPageMarket', data).then((res) => {
        if (res.code === '00') {
          if(res.data.length) {
            this.couponTip = true
          }
        } else if(res.code === '04') {
          this.isHaveCoupon = false
        }else {
          uni.showToast({
					  title: res.message,
					  icon: 'none'
          })
        }
      })
    },
    couponIsUse() { //---判断是否有劵
      this.$request('wechatUser/myPage/getUserCouponList', {
        openid: this.openid
      }).then(res => {
        if (res.code === '00') {
          const albumCoupon = res.data.filter(item => item.useRange === 11 && item.couponStatus === 1) // 过滤 相册的劵

          if(!albumCoupon.length) return
					
          const firstItem = albumCoupon[0]
					
          this.isHaveCoupon = true
          this.couponPrice = firstItem.deductPrice
					
          // 处理使用规则数据结构
          this.handleDataStructure(firstItem.couponRule, '规则说明')
          this.handleDataStructure(firstItem.couponRuleRemind, '补充说明')
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none'
        })
      })
    },
    handleDataStructure(str, title) { //---处理使用规则数据结构
      let ruleContents = str ? str.split(';') : []
      ruleContents = ruleContents.map(value => {
			  return {
			    value
			  }
      })
      this.rules.push({
			  ruleName: title,
			  contents: ruleContents
      })
    },
    recordDeviceInfo() { //---记录设备信息
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
      this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
      this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
    }
  },
  onLoad(options) {
    this.$commonjs.getCompanyId(options)
    this.openid = uni.getStorageSync('openid')
    this.userId = uni.getStorageSync('userId')
    this.recordDeviceInfo()
    this.options = options
    if (this.options.template === 'true') { // 从模板选择页进入
      this.show = true
      this.couponTip = true
    }else if (this.options.channelId) { // 扫码进入本页
      this.handleWhetherToVotePage()
    } else if (this.options.index == 1) { // 从vlog首页进入
      this.show = true
      this.couponIsUse()
    }
		
    if (uni.getStorageSync('location')) return

    uni.getLocation({ //获取定位
      type: 'wgs84',
      success: res => {
        uni.setStorageSync('location', JSON.stringify(res))
      },
      fail() {
        console.log('获取经纬度失败')
      }
    })
  }
}
</script>

<style lang="scss" scoped>
	.big-box {
		position: relative;
		padding: 0;
		//background: linear-gradient(to right bottom, #c778f350, #66ddad50, #68d6de50);
		// background: #F7F8FA;
		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-transition {
			display: flex;
			justify-content: center;
			align-items: center;
			transform: scale(1);
		}

		.coupon {
			position: fixed;
			right: -30rpx;
			bottom: 200rpx;
			width: 180rpx;
			height: 180rpx;

			.coupon-img {
				width: 100%;
				height: 100%;
			}

			.coupon-price {
				position: absolute;
				bottom: 64rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 40rpx;
				font-weight: 700;
				color: #fff;
			}

			.r-symbol {
				font-size: 10rpx;
			}
		}
	}

	.nav-bar {
		font-size: 36rpx;
		font-weight: 700;
		padding: 0 24rpx 0 24rpx;
		z-index: 10;
	}

	.swiper {
		width: 750rpx;
		height: 520rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.swiper-item {
		display: block;
		height: 520rpx;
		line-height: 520rpx;
		text-align: center;
		background-color: red;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
	/deep/ .wx-swiper-dots-horizontal{
		bottom: 80rpx;
	}

	.photo-acquire{
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 32rpx;
		margin-top: 292rpx;
		margin-bottom: 20rpx;
		.acquire-box{
			width: 334rpx;
			height: 240rpx;
			border-radius: 16rpx;
			position: relative;
			.box-title{
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: center;
				margin-top: 40rpx;
				margin-bottom: 12rpx;
			}
			.box-text{
				font-weight: 500;
				font-size: 24rpx;
				color: #A5D3FF;
				line-height: 28rpx;
				text-align: center;
				position: relative;
				z-index: 8;
			}
			.acquire-input{
				width: 334rpx;
				height: 240rpx;
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 19;
			}
			.box-img{
				width: 168rpx;
				height: 144rpx;
				margin: auto;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 3;
			}
		}
		.acquire-boxBlue{
			background: linear-gradient( 132deg, #3465F7 0%, #659EF3 100%);
		}
		.acquire-boxGreen{
			background: linear-gradient( 132deg, #5CB18F 0%, #81D2B1 100%);
			.box-text{
				color: #DAFFF0;
			}
		}
	}

	.private-custom {
		background-color: #fff;
		padding: 40rpx 32rpx 40rpx 32rpx;
		.title {
			position: relative;
			margin-bottom: 40rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #191919;
			line-height: 46rpx;
	
			&::after {
				content: '';
				width: 128rpx;
				height: 44rpx;
				position: absolute;
				left: -8rpx;
				bottom: -24rpx;
				// background: url('@/pages/album/static/album/private-custom.png') no-repeat;
			}
		}
	
		.demo-water {
			image {
				border-radius: 16rpx 16rpx 0 0;
				height: 458rpx;
				width: 100%;
			}
	
			/deep/.u-wrap,
			/deep/.u-lazy-item {
				broder-radius: 16rpx 16rpx 0 0 !important;
			}
		}
	
		.left.demo-water {
			margin-right: 14rpx;
	
			image {
				height: 400rpx;
			}
		}
	
		.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;
				}
			}
		}
	}
</style>
