<template>
	<view class="crystal">
        <!-- 签到成功弹出 -->
        <view class="signBack" v-if="sign.signShow"></view>
        <view class="signPop" v-if="sign.signShow">
            <image class="signPop-tips" src="../../static/user/sign_tips.png" mode="widthFix"></image>
            <view class="signPop-cont">
                <view class="signPop-cont-name">
                    签到成功
                </view>
                <view class="signPop-cont-text">
                    能量碎片<view class="signPop-cont-number">+{{sign.signSuccess}}</view>
                </view>
            </view>
        </view>
        
        <!-- 签到 -->
        <view class="signCont">
            <view class="content-title">
                每日签到，能量碎片多多<image @click="showHelp" class="content-title-img" src="../../static/user/sign_privilege.png" mode="aspectFill"></image>
            </view>
            <view class="sign">
            	<view class="sign-list" :class="{ active: item.sign }" v-for="(item, index) in sign.signArr" :key="index">
                    <view class="sign-tips" v-if="item.sign">
                        <view class="sign-tips-text">已签</view>
                    </view>
                    <block v-if="index == 7">
                        <image class="sign-list-img" :src="item.sign ? '../../static/user/sign_icon_last_active.png' : '../../static/user/sign_icon_last.png'" mode="aspectFill"></image>
                    </block>
                    <block v-else>
                        <image class="sign-list-img" :src="item.sign ? '../../static/user/sign_icon_active.png' : '../../static/user/sign_icon.png'" mode="aspectFill"></image>
                    </block>
            		<view class="sign-list-day">
            		    {{ item.text }}
            		</view>
            	</view>
            </view>
            <view class="sign-record">再签到{{ sign.nextTask.day }}天额外赠送{{ sign.nextTask.diff }}个能量碎片</view>
        </view>
        <view class="signBtn">
            <block v-if="sign.signCan">
                <view class="signBtn-go" @click="signClick" style="cursor:pointer" >
                    签到领取能量碎片
                </view>
            </block>
            <block v-else>
                <view class="signBtn-go" @click="$Router.push({name:'Fragment'})">
                    能量碎片记录<image class="signBtn-go-icon" src="/static/user/sign_arrow.png" mode="aspectFill"></image>
                </view>
            </block>
        </view>
        <!-- 水晶任务 -->
        <view class="task">
            <view class="task-liest">
                能量碎片任务
            </view>
            <view class="task-item" v-for="(item, index) in task" :key="index" @click="JumpUrl(item.url, item.title)">
                <image class="task-icon" :src="item.ico" mode="aspectFill"></image>
                <view class="task-title">{{item.title}}</view>
                <view class="task-subtitle">{{item.remark}}</view>
                <view class="task-label">{{item.tips}}<image @click.stop="showHelp" class="task-label-icon" src="@/static/imgs/user-crystalMark-grey.png"></image></view>
            </view>
        </view>
	</view>
</template>
<script>
	import { task, sign, operateSign } from '@/apis/interfaces/crystal'
    import { userIndex } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				task: [],
                sign: {
                    signArr : [],
                    nextTask: '',
                    signCan : false,
                    signShow: false,
                    signSuccess: ''
                },
                tips        : {
                    tipsTitle   : '',   // 弹出的动态名称
                    tipsContent : '',   // 弹出的动态内容
                    tipsState   : false // 弹出的动态状态
                },
                energyShard     : ''   // 碎片说明
			}
		},
		onShow() {
            this.sign.signShow = false
            // 获取能量领取信息
            task().then(res => {
                uni.hideLoading()
            	this.task = res
            }).catch(err => {
            	uni.showToast({
            		icon: 'none',
            		title: err.message
            	})
            })
            
            // 读取配置信息
            userIndex().then(res=>{
                this.energyShard = res.help_doc.energy_shard
            }).catch(err =>{
                uni.showToast({
                    title: err.message,
                    icon : 'none'
                })
            })
            
            // 获取水晶签到信息
            this.signInfo();
            
		},
		methods: {
            // 水晶签到信息
            signInfo() {
                sign().then(res => {
                    this.sign.signArr  = res.lists
                    this.sign.nextTask = res.next_task
                    this.sign.signCan  = res.can_sign
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err
                    })
                })
            },
            
            // 能量碎片提示信息
            showHelp() {
            	uni.showModal({
            	    title:  '能量碎片',
            	    content: this.energyShard.description,
            		showCancel: false
            	})
            },
            
            // 签到
            signClick() {
				operateSign().then(res => {
					this.sign.signSuccess = res.task_crystals
					// 获取水晶签到信息
					this.sign.signShow = true
					this.signInfo();
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err
					})
				})
            },
            
			// 能量跳转
			JumpUrl(open, title) {
			    var type = open.openType;
			    switch(type){
			        case 'switchTab': 
			            this.$Router.pushTab({name: open.path})
			            break;
			        case 'web':
                        window.location.href = open.path
			            break;
			        case 'navigateTo':
                        this.$Router.push({name: open.path})
			            break;
			    }
			}
		}
	}
</script>
<style scoped>
    page {
        background: #FFFFFF;
    }
</style>

<style lang="scss" scoped>
    // 弹出层
    .signBack {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(0,0,0,.7);
        z-index: 98;
        left: 0;
        top: 0;
        animation: cssAnimation 0s ease-in 4s forwards;
    }
    .signPop {
        width: 60%;
        position: fixed;
        z-index: 99;
        left: 20%;
        top: 30%;
        height: 160px;
        animation: cssAnimation 0s ease-in 4s forwards;
        .signPop-tips,
        .signPop-cont{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        .signPop-cont {
           color: #FFFFFF;
           text-align: center;
           padding-top: 90px;
           .signPop-cont-name {
               font-size: 34rpx;
               margin-bottom: 10rpx;
           }
           .signPop-cont-text {
               text-align: center;
               .signPop-cont-number {
                   display: inline-block;
                   color: #ffee4d;
                   font-size: 38rpx;
                   color: #f9dc4a;
                   font-weight: 600;
                   margin-left: 10rpx;
               }
           }
        }
    }
    
    @keyframes cssAnimation {
        to {
            width: 0;
            height: 0;
            visibility: hidden;
        }
    }
    
	// 签到
    .signCont {
        background: #7c52fc;
        color: #FFFFFF;
        padding-bottom: 80rpx;
        .content-title {
            font-size: 40rpx;
            padding: 50rpx 45rpx;
            box-sizing: border-box;
            display: flex;
            .content-title-img {
                width: 32rpx;
                height: 32rpx;
                margin: 12rpx 20rpx;
            }
        }
        .sign {
            margin: 0 0 30rpx;
            padding: 0 30rpx;
            box-sizing: border-box;
            .sign-list {
                width: calc(14.28% - 20rpx);
                position: relative;
                margin: 0 10rpx;
                display: inline-block;
                text-align: center;
                background-color: rgba(0,0,0,.3);
                border-radius: 10rpx;
                padding: 20rpx 0;
                box-sizing: border-box;
                .sign-tips {
                    position: absolute;
                    top: -20rpx;
                    left: calc(50% - 30rpx);
                    background-color: #ef4034;
                    font-size: 24rpx;
                    color: #FFFFFF;
                    height: 32rpx;
                    line-height: 30rpx;
                    width: 60rpx;
                    text-align: center;
                    border-radius: 6rpx;
                    .sign-tips-text {
                        transform: scale(0.85);
                    }
                    &::after {
                        position: absolute;
                        content: '';
                        left: calc(50% - 8rpx);
                        bottom: -6rpx;
                        width: 0;
                        height: 0;
                        border-left: 8rpx solid transparent;
                        border-right: 8rpx solid transparent;
                        border-top: 8rpx solid #ef4034;
                    }
                }
                .sign-list-img {
                    width: 38rpx;
                    height: 38rpx;
                    margin-bottom: 5rpx;
                }
                .sign-list-day {
                    font-size: 24rpx;
                }
                &.active {
                    background-color: #ffdb00;
                    color: #413e30;
                    box-shadow: 0 0 20rpx rgba(76,43,177,.3);
                }
            }
        }
        .sign-record {
            opacity: .8;
            padding: 0 40rpx;
            display: flex;
            line-height: 44rpx;
        }
    }
    
    // 签到按钮
    .signBtn {
        padding: 0 40rpx;
        box-sizing: border-box;
        width: 100%;
        text-align: center;
		margin-top: -50rpx;
        .signBtn-go {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            border-radius: 80rpx;
            background-color: #f9dc4a;
            color: #333333;
            font-size: 32rpx;
            font-weight: 600;
            .signBtn-go-icon {
                width: 36rpx;
                height: 36rpx;
                vertical-align: -6rpx;
            }
        }
    }
    
    // 水晶任务
    .task{
        padding: 60rpx 30rpx;
        box-sizing: border-box;
        .task-liest {
            font-weight: bold;
            font-size: 34rpx;
            margin-bottom: 20rpx;
        }
        
        .task-item {
            position: relative;
            border-bottom: solid 2rpx #F5F5F5;
            padding: 30rpx 200rpx 40rpx 90rpx;
            &:last-child {
                border: none;
            }
            .task-icon {
                position: absolute;
                top: 50rpx;
                left: 0;
                width: 58rpx;
                height: 58rpx
            }
            .task-title {
                font-size: 32rpx;
                color: #333;
                line-height: 50rpx;
                margin-bottom: 10rpx;
            }
            .task-subtitle {
                color: #999;
                font-size: 26rpx;
                line-height: 30rpx;
            }
            .task-label {
                position: absolute;
                right: 0;
                top: 38rpx;
                line-height: 80rpx;
                font-size: 26rpx;
                color: #333;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                .task-label-icon {
                    width: 34rpx;
                    height: 34rpx;
                    margin: 24rpx 0 0 20rpx;
                }
            }
        }
    }
</style>
