<template>
	<view class="crystal">
        <!-- 公共提示弹出 start -->
        <order-tips title="温馨提示" content="恭喜您,签到成功" :tipsState="sign.signShow" @tipseject="signject" />
        <!-- 公共提示弹出 end -->
        
        <!-- 公共提示弹出 start -->
        <order-tips :title="tips.tipsTitle" :content="tips.tipsContent" :tipsState="tips.tipsState" @tipseject="tipseject" />
        <!-- 公共提示弹出 end -->
        
		<!-- 账户余额 -->
		<view class="total">
			<view class="item ellipsis"><image src="@/static/icons/gemstone-icon.png"/>原石 {{ account.coin }}</view>
			<view class="item ellipsis"><image src="@/static/icons/crystal-icon.png"/>水晶 {{ account.crystal }}</view>
		</view>
		<!-- 矿石 -->
		<view class="ore">
			<image src="/static/img/crystal-ore.png" mode="widthFix" />
			<view class="ore-lists">
				<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)">
					<block v-if="item.amount !== null">
						<image src="/static/imgs/crystal-ore-icon.png" mode="widthFix" class="icon" />
						<view class="text">水晶{{ item.amount || '-'}}</view>
					</block>
				</view>
				<navigator url="../index/index" open-type="switchTab" hover-class="none" class="oct-float ore-item-nav">
					<image src="/static/imgs/gemstone-ore-icon.png" mode="widthFix" class="icon" />
					<view class="text">购物<uni-icons type="arrowright" color="#FFFFFF" size="14"></uni-icons></view>
				</navigator>
			</view>
		</view>
		<!-- 任务分类 -->
		<scroll-view class="task-block" scroll-x="true">
             <!-- url="../index/index" open-type="switchTab" -->
             <view class="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
             	<view class="text">{{ item.remark }}</view>
             	<view class="icon">
             		<image :src="item.cover" />
             	</view>
             	<view class="title">{{ item.title }}</view>
             </view>
		</scroll-view>
		<!-- 内容 -->
		<view class="content">
			<!-- 签到 -->
			<view class="signCont">
			    <view class="content-title">
                    <view class="content-title-text">
                        每日签到
                        <view class="tips">
                            累计天数越多。水晶奖励越多
                        </view>
                    </view>
                    <view class="content-titl-btn" v-if="sign.signCan" @click="signClick">
                        立即签到
                    </view>
                </view>
			    <view class="sign">
			    	<view class="sign-list">
			    		<view class="item" v-for="(item, index) in sign.signArr" :key="index">
                            <view class="item-icon item-done" v-if="item.sign">
                                <image src="@/static/imgs/crystal-sign.png" mode="aspectFill"></image>
                            </view>
                            <view class="item-icon show" :class="{ active: index == 3 || index == 7 }" v-else><text>+{{ item.crystal }}</text></view>
			    			<view class="item-title">{{ item.text }}</view>
			    		</view>
			    	</view>
			    	<view class="sign-text">再签到{{ sign.nextTask.day }}天额外赠送{{ sign.nextTask.diff }}个水晶奖励</view>
			    </view>
			</view>
			<!-- 水晶任务 -->
            <view class="content-title">
                <view class="content-title-text">
                    水晶任务
                </view>
            </view>
			<view class="task">
				<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 class="task-label-icon" src="@/static/imgs/user-crystalMark-grey.png" @click.stop="crystalShow"></image></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { crystals, thawlog, task, category, sign, operateSign } from '@/apis/interfaces/crystal'
	export default {
		data() {
			return {
				account: {
					coin: 0,
					crystal: '0.00'
				},
				yesterday: '0.00',
				crystalArr: [],
                categoryArr: [],  // 分类列表
				ids: [],
				task: [],
                sign: {
                    signArr : [],
                    nextTask: '',
                    signCan : false,
                    signShow: false
                },
                tips        : {
                    tipsTitle   : '',   // 弹出的动态名称
                    tipsContent : '',   // 弹出的动态内容
                    tipsState   : false // 弹出的动态状态
                }
			}
		},
		onShow() {
			// 获取水晶领取信息
			crystals().then(res => {
				this.account = {
					coin: res.coin,
					crystal: res.crystal
				}
				this.crystalArr = res.crystal_array
				this.ids = res.all_ids
				this.yesterday = res.yesterday_crystal
			}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: err.message
				})
			})
			// 获取水晶任务
			task().then(res => {
				this.task = res
			})
            
            // 获取水晶分类
            category().then(res => {
                this.categoryArr = res
            })
            
            // 获取水晶签到信息
            this.signInfo();
            
		},
		methods: {
			ledCrystal(index) {
				// 领取水晶
				thawlog({
					thaw_id: this.crystalArr[index].log_id,
					all_ids: this.ids
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '+' + this.crystalArr[index].amount + '水晶',
						duration: 2000
					})
					this.$set(this.account, 'crystal', res.crystal)
					this.ids = res.all_ids
					if (JSON.stringify(res.last) === '[]') {
						this.$set(this.crystalArr, index, {
							amount: null
						})
						return
					}
					this.$set(this.crystalArr, index, res.last)
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err
					})
				})
			},
			// 商品详情
			onTack(e) {
				uni.navigateTo({
					url: '../goods/goods?id=' + e.goods_id
				})
			},
			// 提示信息
			onShowToast() {
				uni.showToast({
					title: '暂未开放，敬请期待',
					icon : 'none'
				})
			},
            // 水晶签到信息
            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
                    })
                })
            },
            // 签到
            signClick() {
                uni.vibrateShort({
                    success: () => {
                        operateSign().then(res => {
                            // 获取水晶签到信息
                            this.signInfo();
                            
                            this.sign.signShow = !this.sign.signShow
                        }).catch(err => {
                        	uni.showToast({
                        		icon: 'none',
                        		title: err
                        	})
                        })
                    }
                })
            },
            // 提示语-组件返回参数
            signject(val) {
                console.log(val)
                this.sign.signShow = val.tipsState
            },
            
            // 水晶分类跳转
            JumpUrl(open, title) {
                var type = open.openType;
                 switch(type){
                    case 'switchTab': 
                        uni.switchTab({
                            url: open.path
                        })
                        break;
                    case 'web':
                        uni.navigateTo({
                            url: `/pages/web-view/index?title=${title}&url=${open.url}`
                        })
                        break;
                    case 'navigateTo':
                        uni.navigateTo({
                            url: open.path
                        })
                        break;
                }
            },
            
            // 水晶原则提示语
            crystalShow () {
                this.tips.tipsTitle   = '水晶规则'
                this.tips.tipsContent = '水晶是用户获取原石的影响因子，同一时段内，水晶越高，获取的原石越多.'
                this.tips.tipsState = !this.tips.tipsState
            },
            // 水晶原则提示语-组件返回参数
            tipseject(val) {
                this.tips.tipsState = val.tipsState
            },
		}
	}
</script>
<style scoped>
	/* 水晶漂浮动画 */
	.oct-float {
		animation: 4s octfloat infinite;
	}
	@keyframes octfloat {
		0% {
			margin-top: 0;
		}

		50% {
			margin-top: 15rpx;
		}

		100% {
			margin-top: 0;
		}
	}
</style>

<style lang="scss" scoped>
	// 背景
	.crystal{
		background: $mian-color-deep;
		min-height: 100vh;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		background-image: url(@/static/background/crystal-background.png);
		background-size: 100%;
		background-position: top center;
		background-repeat: no-repeat;
	}
	// 底部内容
	.content{
		margin-top: $margin * 2;
		padding: $padding;
		background: white;
		border-radius: $radius $radius 0 0;
		// 标题
		.content-title{
			padding: 0 $padding / 2;
            width: 100%;
            box-sizing: border-box;
			color: $text-color;
            position: relative;
            .content-title-text {
                font-weight: bold;
                font-size: $title-size + 4;
                width: calc(100% - 160rpx);
                margin-bottom: $margin;
                .tips {
                    font-weight: normal;
                    font-size: $title-size-sm;
                    margin-top: $margin - 10;
                    color: $uni-text-color;
                }
            }
            .content-titl-btn {
                position: absolute;
                right: 0;
                top: $margin;
                background-image: linear-gradient(to left, $mian-color-deep, $mian-color);
                color: $uni-text-color-inverse;
                font-size: $title-size-sm;
                line-height: 60rpx;
                line-height: 60rpx;
                border-radius: $radius * 2;
                width: 160rpx;
                text-align: center;
            }
		}
		// 签到
		.sign{
			padding-top: $padding;
			padding-bottom: $padding * 2;
			.sign-list{
				display: flex;
				justify-content: space-around;
				.item{
					text-align: center;
					.item-icon{
						display: inline-block;
						background-image: linear-gradient(to left, $mian-color-deep, $mian-color);
						color: white;
						width: 54rpx;
						height: 54rpx;
						line-height: 50rpx;
						border-radius: 50%;
						border:solid 2rpx $mian-color;
						box-sizing: border-box;
                        &.item-done {
                            background-image: linear-gradient(to left, #999, #999);
                            border-color: #999;
                        }
                        image {
                            width: 34rpx;
                            height: 34rpx;
                            margin-top: 8rpx;
                        }
                        &.active {
                            background-image: linear-gradient(to left, #ee1d23, #ef8c85);
                            border-color: #fd6165;
                        }
                        text {
                            font-size: $title-size-sm;
                            transform: scale(.8);
                            display: block;
                        }
					}
					.item-title{
						color: $text-gray;
						padding-top: $padding / 2;
						font-size: $title-size-sm - 2;
					}
				}
			}
			.sign-text{
				padding: $padding ($padding / 2) 0;
				color: $mian-color-deep;
				font-size: $title-size-m;
			}
		}
		// 水晶任务
		.task{
			padding: 0 ($padding / 2) $padding * 2;
			.task-item{
				position: relative;
				margin: 0 ($margin / 2);
				border-bottom: solid 1rpx $border-color;
				padding: $padding 200rpx $padding 90rpx;
				&:last-child{
					border-bottom: none;
				}
				.task-icon{
					position: absolute;
					top: $padding + 8;
					left: 0;
					width: 70rpx;
					height: 70rpx;
					// background: $border-color-lg;
				}
				.task-title{
					font-size: $title-size;
					color: $text-color;
					line-height: 50rpx;
				}
				.task-subtitle{
					color: $text-gray;
					font-size: $uni-font-size-sm;
					line-height: 30rpx;
				}
				.task-label{
					position: absolute;
					right: 0;
					top: $padding;
					line-height: 80rpx;
					font-size: $uni-font-size-sm;
					color: $text-color;
                    display: flex;
                    .task-label-icon {
                        width: $uni-img-size-sm - 6;
                        height: $uni-img-size-sm - 6;
                        margin: $margin + 4 0 0 $margin - 10;
                    }
				}
			}
		}
	}
	// 数据统计
	.total {
		position: relative;
		margin: $margin ($margin + $margin/2);
		background: rgba($color: $mian-color-deep, $alpha: .6);
		padding: 0;
		display: flex;
		border-radius: $radius;
		.item {
			width: 50%;
			padding: 0 $padding;
			text-align: center;
			color: white;
			font-size: $title-size-m;
			line-height: 90rpx;
			image{
				width: 38rpx;
				height: 38rpx;
				vertical-align: top;
				margin-top: calc((90rpx - 38rpx) / 2);
				margin-right: $margin / 2;
			}
		}
	
		&::before {
			position: absolute;
			top: 0;
			bottom: 0;
			content: "";
			width: 2rpx;
			left: 50%;
			background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .7), transparent);
		}
	}
	// 矿石
	.ore {
		position: relative;
		&>image {
			width: 100%;
		}
		.ore-lists {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			.oct-float-item{
				position: absolute;
				text-align: center;
				.text {
					margin-top: $margin / 2;
					color: white;
					font-size: $title-size-sm;
					line-height: 40rpx;
					text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
				}
				.icon {
					width: 58rpx;
					vertical-align: top;
				}
			}
			.ore-item-nav{
				@extend .oct-float-item;
				right: $margin * 3;
				top: 12%;
			}
			.ore-item {
				@extend .oct-float-item;
				&:nth-child(1) { top: 16%; left: 13%; }
				&:nth-child(2) { top: 50%; right: 10%; }
				&:nth-child(3) { top: 23%; right: 20%; }
				&:nth-child(4) { top: 70%; left: 33%;}
				&:nth-child(5) { top: 40%; left: 20%; }
				&:nth-child(6) { top: 58%; left: 10%;}
				&:nth-child(7) { top: 10%; right: 43%;}
				&:nth-child(8) { top: 46%; right: 29%;}
			}
		}
	}
	// 任务
	.task-block {
		white-space: nowrap;
		.item {
			background: rgba($color: $mian-color, $alpha: .2);
			display: inline-block;
			margin-left: $margin;
			width: 210rpx;
			padding: $padding * 2 $padding;
			border-radius: $radius;
			box-sizing: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .06);
			text-align: center;
			&:first-child {
				margin-left: $margin + $margin/2;
			}
			&:last-child {
				margin-right: $margin + $margin/2;
			}
			.icon {
				display: inline-block;
				margin: $margin 0;
				width: 98rpx;
				height: 98rpx;
				line-height: 98rpx;
				background: $mian-color-deep;
				border-radius: 50%;
				text-align: center;
				image {
					width: 56rpx;
					height: 56rpx;
					vertical-align: middle;
				}
			}
			.text {
				font-size: $title-size-m;
				color: $mian-color;
			}
			.title {
				font-size: $title-size;
				color: white;
				font-weight: bold;
			}
		}
	}
</style>
