<template>
  <view class="integral-details" ref="container">
    <!-- <view class="header acea-row row-between row-middle">
			<view class="acea-row row-column row-between">
				<view class="integral">{{ info.integral }}</view>
				<view class="rule">
					<text>积分规则</text>
					<text class="icon-font"></text>
				</view>
			</view>
			<view class="integral-shop">积分商城</view>
    </view> -->
		<view class="week-signIn-box">
			<view class="signIn-box-title acea-row row-between-wrapper">
				<view class="title-l">可用积分：<text class="colR">{{ integral }}</text></view>
				<view class="title-r" @click="toShop">去兑换 <text class="iconfont icon-jiantou"></text></view>
			</view>
			<view class="day-list acea-row row-between">
				<view class="day-item acea-row row-column row-center row-middle" 
				:class=" index+1 <= signNum ? 'active' : '' " 
				v-for="(item,index) in signInfos" 
				:key="index"
				v-if="index < signInfos.length - 1">
					<view>{{item.day}}</view>
					<image src="../../../../../static/glod.png"></image>
					<text class="fz20">+{{item.signNum}}积分</text>
				</view>
				<view class="day-item day-item-last acea-row row-center row-middle"
				 :class=" signNum == signInfos.length+1 ? 'active' : '' " v-else>
					<view class="acea-row row-column row-center">
						<view>{{signInfos[signInfos.length-1].day}}</view>
						<text class="colG">签到大礼包</text>
						<text class="fz20">+{{signInfos[signInfos.length-1].signNum}}积分</text>
					</view>
					<image src="../../../../../static/glod.png"></image>
				</view>
			</view>
			<view class="tips-box acea-row">
				<image src="../../../../../static/tips.png"></image>
				<text>连续签到积分累加</text>
			</view>
			<view class="signIn-btn acea-row row-column row-center row-middle" :class="isDaySign ? 'default' : ''" @click="handelSignin">
				<text class="b-word">{{isDaySign ? '今日已签到' : '立即签到'}}</text>
				<text>本轮累计签到{{signNum}}天</text>
			</view>
		</view>
    <view class="wrapper">
			<!-- <view class="content-title">做任务赚积分</view> -->
			<view class="menu-list">
				<view class="menu-item acea-row row-between row-middle noBorder">
					<view class="menu-item-l acea-row row-middle">
						<view class="icon"><image src="../../../../../static/jifen1.png" mode=""></image></view>
						<view class="acea-row row-column">
							<text>完成个人信息</text>
							<text class="integral">+{{completedNum}}积分</text>
						</view>
					</view>
					<view class="btn" @click="toPersonalData" :class="isCompleted ? 'default' : ''">{{isCompleted ? '已完成' : '去完成'}}</view>
				</view>
				<view class="menu-item acea-row row-between row-middle">
					<view class="menu-item-l acea-row row-middle">
						<view class="icon"><image src="../../../../../static/jifen2.png" mode=""></image></view>
						<view class="acea-row row-column">
							<text>每日签到</text>
						</view>
					</view>
					<view class="btn" :class="isDaySign ? 'default' : ''">{{isDaySign ? '已签到' : '去签到'}}</view>
				</view>
				<view class="menu-item acea-row row-between row-middle">
					<view class="menu-item-l acea-row row-middle">
						<view class="icon"><image src="../../../../../static/jifen3.png" mode=""></image></view>
						<view class="acea-row row-column">
							<text>报名学习打榜</text>
						</view>
					</view>
					<view class="btn" @click="toCourse">去完成</view>
				</view>
			</view>
      <!-- <view class="nav acea-row">
        <view
          class="item acea-row row-center-wrapper"
          :class="current === navListIndex ? 'on' : ''"
          v-for="(item, navListIndex) in navList"
          :key="navListIndex"
          @click="nav(navListIndex)"
        >
          <text class="iconfont" :class="item.icon"></text>
          {{ item.name }}
        </view>
      </view> -->
      <!-- <view class="list" :hidden="current !== 0"> -->
        <!--<view class="tip acea-row row-middle">-->
        <!--<text class="iconfont icon-shuoming"><text-->
        <!--&gt;提示：积分数值的高低会直接影响您的会员等级-->
        <!--</view>-->
        <!-- <view
          class="item acea-row row-between-wrapper"
          v-for="(item, listIndex) in list"
          :key="listIndex"
        >
          <view>
            <text class="state">{{ item.title }}</text>
            <div>{{ item.createTime }}</div>
          </view>
          <text class="num" v-if="item.pm == 1">+{{ item.number }}</text>
          <text class="num font-color-red" v-if="item.pm == 0">-{{ item.number }}</text>
        </view> -->
      <!-- </view> -->
      <!--<view class="list2" :hidden="current !== 1">-->
      <!--<view class="item acea-row row-between-wrapper" @click="goHome()">-->
      <!--<view class="pictrue"><image :src="`${$VUE_APP_RESOURCES_URL}/images/score.png`" /></view>-->
      <!--<view class="name">购买商品可获得积分奖励</view>-->
      <!--<view class="earn">赚积分</view>-->
      <!--</view>-->
      <!--<view-->
      <!--class="item acea-row row-between-wrapper"-->
      <!--@click="goSignIn()"-->
      <!--&gt;-->
      <!--<view class="pictrue"><image :src="`${$VUE_APP_RESOURCES_URL}/images/score.png`" /></view>-->
      <!--<view class="name">每日签到可获得积分奖励</view>-->
      <!--<view class="earn">赚积分</view>-->
      <!--</view>-->
      <!--</view>-->
    </view>
    <!-- <Loading :loaded="loaded" :loading="loading"></Loading> -->
  </view>
</template>
<script>
import { getIntegralList, postSignUser, signIntegral, integral } from "@/api/user";
import Loading from "@/components/Loading";
import { dataFormat } from "@/utils";

export default {
  name: "Integral",
  components: {
    Loading,
  },
  props: {},
  data: function() {
    return {
      navList: [
        { name: "分值明细", icon: "icon-mingxi" }
        // { name: "分值提升", icon: "icon-tishengfenzhi" }
      ],
      current: 0,
      where: {
        page: 1,
        limit: 15
      },
      data: {
        sign: 1,
        integral: 1,
        all: 1
      },
      list: [],
      info: [],
			isDaySign: false,
			integral: 0,
			signInfos: [],
			isCompleted: false,
			completedNum: 0,
			signNum:null,
      loaded: false,
      loading: false
    };
  },
	onShow(){
		this.getIntegral();
	},
  mounted: function() {
    
    // this.getInfo();
  },
  // onReachBottom() {
  //   !this.loading && this.getInfo();
  // },
  methods: {
		getIntegral(){
			uni.showLoading({
				title: '正在加载中...'
			})
			integral().then((res)=>{
				console.log(res)
				if(res.success){
					this.signInfos = res.data.signInfos
					this.signNum = res.data.signNum
					this.isDaySign = res.data.isDaySign
					this.integral = res.data.integral
					this.isCompleted = res.data.isCompleted
					this.completedNum = res.data.completedNum
				}
				uni.hideLoading()
			})
		},
		handelSignin(){
			signIntegral().then((res)=>{
				if(res.success){
					uni.showToast({
						title: '签到成功！'
					})
					this.getIntegral();
				} else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		toShop(){
			this.$yrouter.switchTab("/pages/shop/GoodsClass/index");
		},
		toPersonalData(){
			this.$yrouter.push("/pages/user/PersonalData/index");
		},
		toCourse(){
			this.$yrouter.switchTab("/pages/course/index");
		},
    dataFormat,
    goSignIn() {
      this.$yrouter.push("/pages/user/signIn/Sign/index");
    },
    goHome() {
      this.$yrouter.switchTab("/pages/home/index");
    },
    nav: function(index) {
      this.current = index;
    },
    // getInfo: function() {
    //   let that = this;
    //   if (that.loaded == true || that.loading == true) return;
    //   that.loading = true;
    //   getIntegralList(that.where).then(
    //     res => {
    //       that.loading = false;
    //       that.loaded = res.data.length < that.where.limit;
    //       that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
    //       that.where.page = that.where.page + 1;
    //       that.list.push.apply(that.list, res.data);
    //     },
    //     err => {
    //       uni.showToast({
				// 		title: err.msg || err.response.data.msg|| err.response.data.message,
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
    //     }
    //   );
    // },
    // getIntegral: function() {
    //   let that = this;
    //   postSignUser(that.data).then(
    //     res => {
    //       that.info = res.data;
    //     },
    //     err => {
    //       uni.showToast({
				// 		title: err.msg || err.response.data.msg|| err.response.data.message,
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
    //     }
    //   );
    // }
  }
};
</script>
<style lang="less" scoped>
.integral-details {
	height: 100vh;
	background: #EEEEEE;
	box-sizing: border-box;
	padding: 20rpx 30rpx;
	.week-signIn-box{
		width: 100%;
		background: #fff;
		padding: 30rpx 30rpx 40rpx;
		font-size: 28rpx;
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
		border-radius: 22rpx;
		margin: 20rpx 0;
		.signIn-box-title{
			.title-l{
				font-size: 32rpx;
				color: #222;
				.colR{
					color: #FF0D0D;
				}
			}
			.title-r{
				font-size: 20rpx;
				color: #f8c06f;
				width: 104rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				background: #F3F3F3;
				border-radius: 14rpx;
				.icon-jiantou{
					font-size: 20rpx;
					margin-top: 2rpx;
				}
			}
		}
		.day-list{
			.day-item{
				width: 148rpx;
				height: 160rpx;
				background: #EFEFF1;
				border-radius: 12rpx;
				color: #fff;
				font-size: 24rpx;
				color: #333;
				margin-top: 28rpx;
				.fz20{
					font-size: 20rpx;
					color: #AFAFAF;
				}
				image{
					width: 72rpx;
					height: 72rpx;
				}
			}
			.day-item-last{
				width: 312rpx;
				.colG{
					color: #AFAFAF;
					margin: 10rpx 0 0;
				}
				image{
					width: 106rpx;
					height: 106rpx;
					margin-left: 30rpx;
				}
			}
			.active{
				color: #fff;
				background: #F7C37A;
				.fz20{
					color: #fff;
				}
				.colG{
					color: #fff;
				}
			}
		}
		.tips-box{
			font-size: 24rpx;
			color: #D1D1D1;
			margin: 28rpx 0 48rpx;
			image{
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
		}
		.signIn-btn{
			width: 424rpx;
			height: 110rpx;
			background: linear-gradient(320deg, #FBBE66 0%, #FABF69 100%);
			box-shadow: 0px 6rpx 12rpx #F7D08E;
			border-radius: 56rpx;
			margin: 0 auto;
			font-size: 20rpx;
			color: #fff;
			.b-word{
				font-size: 40rpx;
				line-height: 56rpx;
			}
		}
		
	}
	.default{
		color: #999 !important;
		background: #EFEFF1 !important;
		box-shadow: 0px 6rpx 12rpx #EFEFF1  !important;
	}
	.header{
		background-image: none;
		width: 750rpx;
		height: 266rpx;
		padding: 0 40rpx;
		background: linear-gradient(176deg, #EC1C07 0%, #F94F0F 100%);
		border-radius: 0px 0px 60rpx 60rpx;
		.integral{
			font-size: 80rpx;
			color: #fff;
		}
		.rule{
			width: 150rpx;
			height: 44rpx;
			background: rgba(0,0,0,.2);
			border-radius: 27rpx;
			text-align: center;
			line-height: 44rpx;
			font-size: 24rpx;
		}
		.integral-shop{
			width: 206rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background: linear-gradient(133deg, #FEF2D7 0%, #FCD86D 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #F53D0D;
		}
	}
	.wrapper{
		background: #fff;
		padding: 30rpx;
		font-size: 28rpx;
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
		border-radius: 22rpx;
		.content-title{
			font-size: 36rpx;
			font-weight: 600;
			color: #222222;
			line-height: 50rpx;
			margin: 50rpx 0;
		}
		.menu-list{
			margin-top: 20rpx;
			.menu-item{
				width: 100%;
				height: 100rpx;
				border-top: 1px solid #ececec;
				font-size: 28rpx;
				color: #222;
				image{
					width: 76rpx;
					height: 76rpx;
				}
				.icon{
					margin-right: 20rpx;
				}
				.integral{
					font-size: 24rpx;
					color: #FCBF64;
				}
				.btn{
					width: 122rpx;
					height: 52rpx;
					background: #FCBF64;
					border-radius: 30rpx;
					text-align: center;
					line-height: 52rpx;
					color: #fff;
				}
			}
			.noBorder{
				border: none;
			}
		}
	}
}
</style>
