<template>
	<view id="sign">
	    <view class="sign_head">
	        <view class="user_picture">
				<image :src="userImg" mode="" v-if="userImg"></image>
	        <image v-else src="https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%A4%B4%E5%83%8F_%E7%94%BB%E6%9D%BF%201.png"  />
	        </view>
	        <view class="sign_message">
	            <view class="user_name">{{userName}}</view>
	            <view class="user_message">
	                <view class="fs_12" style="width:100px">积分：{{point}}</view>
	                <view @tap="sign_rule" class="fs_10 activity_rule">活动规则</view>
	            </view>
	        </view>
	    </view>
	    <view class="sign_box">
	        <view class="sign_body">
	            <view class="row_first"> 
	                <view class="sign_bar_single"></view>
	                <view v-for="(item,index) in rules" :key="index" class="row_box">
	                    <view :class="days < 7 ?'sign_bar':'sign_afterBar'" v-if="index ==7"></view>
	                    <view :class="days < 14 ?'sign_bar':'sign_afterBar'" v-if="index == 14"></view>
	                        <view style="width:57.5rpx;position:relative">
	                            <view class="sign_gift" v-if="index == 6 || index == 13 || index == 20" @tap='getGift'>
	                                <view class="angel"></view>
	                                <image src="../../../static/gift.png"/> 
	                            </view>
	                                <view :class="index+1>days ?'sign_point_false':'sign_point'">
	                                    <text>+{{item}}</text>
	                                </view> 
	                                <view class="iconfont icon-check-circle  signed_today" v-if="is_sign && days==index+1"></view>
	                                <view class="sign_day">第{{item}}天</view>
	                        </view>
	                    <view :class="index+1>days ?'sign_bar':'sign_afterBar'" v-if="index<20"></view>
	                </view>
	            </view>
	            <view class="signed_days color"  v-if="!is_sign" @tap="sign">今日签到
	            </view>
	            <view class="signed_days" v-if="is_sign">已连续签到 <text>{{days}}</text> 天 
	            </view>
	            <view class="sign_data">
	                <view @tap="signData">签到记录 </view>
	                <view style="margin-left:6rpx">></view><text class="arrows" style="padding-left:5px">></text>
	            </view>
	        </view>
	    </view>  
	   <view class="image_box"> 
	            <view :class="'img'+index" v-for="(item,index) in microData.data.pages" :key="index" :style="'background:'+item.meta.background_color">
	                <image :src="item.value[0].image" mode="aspectFit" v-if="index!=2 && index!==4" />
	                <image :src="item.value[0].image" mode="aspectFit" v-if="index==2 && index!==4" />
	                <view v-if="index==4">
	                    <indexGrouping :grouping-data="item.value" :meta="item.meta"></indexGrouping>
	                </view>
	            </view>
	    </view>
	    <view class="mask_form" v-if="show" @tap="close"  catchtouchmove="true">
	        <view class="rule_box">
	            <text class="mask" decode="decode">
	            {{rule}}
	            </text>
	            <view bindtap="close" class="close_rule">
	            <i class="iconfont icon-close"></i>
	            </view>       
	        </view> 
	    </view>
	</view>
</template>

<script>
	var app = getApp();
	import {pageLogin, getUrl} from '@/common/js/utils.js';
	import indexGrouping from "@/components/index-grouping/index-grouping.vue" 
	export default {
		data() {
			return {
				point: '',
				text: "This is page data",
				signId: '',
				action: [],
				recommend_goods: [],
				days:0,
				nodes: '',
				microData:{
					data:{
						pages:[]
					}
				},
				index: 0,
				userImg: '',
				userName: '',
				rule: '',
				show:false,
				rules:[],
				is_sign:''
			};
			},
			components:{
				indexGrouping
			},
			watch:{
				microData:{
					deep:true,
					handler(val){
						this.microData=val
						
					}
				}
			},
		methods:{
			// 签到
			   sign(){
			       wx.showLoading({
			           title: '正在签到',
			           mask: true
			       });
			       this.$http.post({
			           api: "api/sign/doSign",
			           data: {
			               sign_id: this.signId
			           },
			           header: {
			               Authorization: this.$cookieStorage.get('user_token')
			           },
			       }).then(res => {
			           if (res.statusCode == 200) {
			               res = res.data;
			               if (res.status) {
			                   wx.showModal({
			                       content: res.data.message || "签到成功",
			                       showCancel: false,
			                       success: res => {
			                           if (res.confirm || (!res.cancel && !res.confirm)) {
			                               this.record(); //签到成功重新请求数据
			                           }
			                       }
			                   })
			               } else {
			                   wx.showModal({
			                       content: res.message || '签到失败',
			                       showCancel: false
			                   })
			               }
			           } else {
			               wx.showModal({
			                   content: res.message || "请求失败",
			                   showCancel: false
			               })
			           }
			           wx.hideLoading();
			       }).catch(res => {
			           wx.hideLoading();
			           wx.showModal({
			               content: '请求失败',
			               showCancel: false
			           })
			       })
			   },
			   // 签到记录
			   signData() {
			       wx.navigateTo({
			           url: "/pages/user/signData/signData"
			       })
			   },
			   record() {
			       this.$http.get({
			           api: 'api/sign/getSignReward',
			           header: {
			               Authorization: this.$cookieStorage.get('user_token')
			           }
			       }).then(res => {
			           if (res.statusCode == 200) {
			                   this.point= res.data.data.point,
			                   this.signId=res.data.data.sign.id,
			                   this.action=res.data.data.sign.action, //数组
			                   this.rules= res.data.data.sign.rules,
			                   this.recommend_goods= res.data.data.sign.recommend_goods,
			                   this.days= res.data.data.sign.days, //修改item
			                   this.nodes= res.data.data.sign.rule_desc,
			                   this.is_sign= res.data.data.is_sign,
			                   this.rule= res.data.data.sign_rule
						console.log("signId",this.signId)
			           }
			       }).catch(rej => {
			           console.log(rej);
			       })
			           this.userImg= this.$cookieStorage.get('userInfoImg'),
			           this.userName= this.$cookieStorage.get('userInfoName')
			       wx.hideLoading()
			   },
			   // 礼物
			   getGift() {
			       console.log("gift");
			   },
						
			   integral() {
			       this.$http.get({
			           api: 'api/micro/page/Integral?name=Integral',
			       }).then(res => {
			           if (res.statusCode == 200) {
			                   this.microData=res.data
							   console.log("microData.data.pages",this.microData.data.pages)
							   console.log("this.microData",this.microData)
			           }
			       }).catch(rej => {
			           console.log(rej);
			       })
			   },
			   // 签到规则
			   sign_rule() {
			           this.show=true;
			   },
			   close(){
			           this.show=false;
			   },
			  },
			   // onLoad: function() {
			   //     wx.showLoading({
			   //         title: "加载中",
			   //         mask: true
			   //     });
			   //     this.record()
			   // },
			   created() {
					this.record()
			   },
			   						
			   onShow: function() {
			       this.integral()
		}
		}
</script>

<style lang="less">
	@import "sign.less";
</style>
