<template>
	<view class="content">
		<!-- 水宣传图 -->
		<image class="banner" src="@/static/imgs/banner.png" mode="widthFix"></image>
		<!-- 快捷入口 -->
		<view class="tools">
			<view class="tools-box tools-flex">
				<view class="item item-sm" @click="$Router.push({name: 'purineIndex'})">
					<view class="item-content">
						<view class="title">嘌呤查询</view>
						<view class="submit">知识小科普</view>
					</view>
					<image class="item-icon" src="@/static/icons/tool_icon_00.png" mode="widthFix"></image>
				</view>
				<view class="item item-sm" @click="$Router.push({name: 'Indexdetails'})">
					<view class="item-content">
						<view class="title">锶源昆仑</view>
						<view class="submit">天然矿泉水</view>
					</view>
					<image class="item-icon" src="@/static/icons/tool_icon_01.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="tools-box">
				<view class="item item-lg" @click="hasClick">
					<view class="item-content">
						<swiper
							class="swiper-content"
							easing-function="easeInOutCubic"
							indicator-active-color="#4490ff"
							indicator-color="rgba(68,144,255, .2)"
							:indicator-dots="true"
							:autoplay="true"
							:vertical="true"
							:circular="true"
							>
							<swiper-item>
								<view class="swiper-item">
									<view class="title">血糖</view>
									<view class="submit">最近一次记录</view>
									<view class="value">
										<text>{{ caseData ? caseData.quantity : 0 }}</text>mmol/L
									</view>
									<view class="time">{{ caseData ? caseData.created_at : '暂无记录时间' }}</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">
									<view class="title">血脂</view>
									<view class="submit">最近一次记录</view>
									<view class="value">
										<text>{{ caseData ? caseData.quantity : 0 }}</text>mmol/L
									</view>
									<view class="time">{{ caseData ? caseData.created_at : '暂无记录时间' }}</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">
									<view class="title">血压</view>
									<view class="submit">最近一次记录</view>
									<view class="value">
										<text>{{ caseData ? caseData.quantity : 0 }}</text>mmHg
									</view>
									<view class="time">{{ caseData ? caseData.created_at : '暂无记录时间' }}</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<!-- <image class="item-icon" src="@/static/icons/tool_icon_02.png" mode="widthFix"></image> -->
				</view>
			</view>
		</view>
        <!-- 创建名片前提条件 -->
        <view class="authBack" v-if="authState"></view>
        <view class="authPop" v-if="authState">
            <image @tap="authTap" class="authPop-cloes" src="/static/icons/uricacidClose.png"></image>
            <image class="authPop-img" src="/static/imgs/authPop_img.png" mode="aspectFill"></image>
            <view class="authPop-cont">
                请先添加个人档案，成功后可添加尿酸
            </view>
            <view class="authBtn" @tap="authUrl">去添加</view>
        </view>
	</view>
</template>

<script>
    import {
    	index
    } from '@/apis/interfaces/mall'
	export default {
		data() {
			return {
                adverts    : [],    //轮播
                goodsData  : '',    //商品
                caseData   : '',    //今日尿酸量
                authState  : false,
                hasCase    : ''
			}
		},
        onShow() {
            // 获取首页数据
            this.mallData();
        },
		methods: {
            // 首页数据
            mallData() {
            	index().then(res => {
                    this.caseData    = res.last_case_log
                    this.goodsData   = res.goods
                    this.hasCase     = res.hasCase
                    this.adverts     = res.banners
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 是否认证
            hasClick() {
                if(this.$store.getters.getToken) {
                    if(!this.hasCase) {
                        this.authState = !this.authState
                        return
                    }
                    this.$Router.push({ name: 'uricacidIndex' });
                    return
                }
                this.$Router.push({ name: 'Login' });
            },
            
            // 去认证
            authUrl() {
                this.$Router.push({ name: 'Attestation', params: { editState: false } });
                this.authState = !this.authState
            },
            
            // 关闭认证提示弹出层
            authTap() {
                this.authState = !this.authState
            },
            
            // 能量跳转
            JumpUrl(open) {
                let type = open.openType
            	switch (type) {
            		case 'switchTab':
            			this.$Router.pushTab({
            				name: open.path
            			})
            			break;
            		case 'web':
            			window.location.href = open.url
            			break;
            		case 'navigateTo':
                        this.$Router.push({path: open.path + '?' + open.params})
            			break;
            	}
            }
		}
	}
</script>
<style lang="scss" scoped>
	.content{
		overflow: hidden;
		min-height: calc(100vh - 60px);
		background: #ecf4f6;
		box-sizing: border-box;
	}
	.banner{
		width: 100%;
	}
	// 快速入口
	.tools{
		display: flex;
		padding: 0 $padding/2;
		.tools-box{
			padding: 0 $padding/2;
			width: 50%;
			box-sizing: border-box;
			.item-lg{
				height: 280rpx + $margin;
				.item-icon{
					position: absolute;
					right: 0;
					bottom: 0;
					width: 128rpx;
				}
			}
		}
		.tools-flex{
			.item-sm{
				height: 140rpx;
				&:last-child{
					margin-top: $margin;
				}
				.item-icon{
					position: absolute;
					right: 0;
					bottom: 0;
					width: 100rpx;
				}
			}
		}
		.item{
			position: relative;
			padding: 0 $padding;
			background: white;
			border-radius: $radius;
			font-size: $title-size-m;
			box-shadow: 0 0 5rpx 5rpx rgba($color: $border-color, $alpha: .5);
			overflow: hidden;
			.item-content{
				padding: 30rpx 0;
				.title{
					font-weight: bold;
					font-size: $title-size-lg;
					color: $text-color;
					line-height: 40rpx;
				}
				.submit{
					line-height: 40rpx;
					font-size: $title-size-sm;
					color: $text-gray;
				}
				.value{
					padding: 10rpx 0;
					color: $text-gray;
					line-height: 100rpx;
					font-size: $title-size-sm;
					& > text{
						color: $text-color;
						font-weight: bold;
						font-size: $title-size + 26;
						padding-right: 10rpx;
					}
				}
				.time{
					color: $text-gray;
					font-size: $title-size-sm;
					line-height: 40rpx;
				}
			}
			.swiper-content{
				height: calc(171px - 60rpx);
				box-sizing: border-box;
				z-index: 9;
			}
		}
	}
	// 精选推荐
	.news-title{
		padding: $padding;
		font-size: $title-size;
		font-weight: bold;
		color: $text-color;
	}
	.news-item{
		margin: 0 $margin $margin;
		background: white;
		border-radius: $radius;
		padding: $padding;
		box-shadow: 0 0 5rpx 5rpx rgba($color: $border-color, $alpha: .5);
		.item-title{
			font-weight: bold;
			font-size: $title-size + 2;
			color: $text-color;
		}
		.item-cover{
			width: 100%;
			padding-top: 50%;
			position: relative;
			margin: ($margin - 10) 0;
			& > image{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: $border-color-light;
			}
		}
		.item-time{
			display: flex;
			justify-content: space-between;
			font-size: $title-size-sm;
			color: $text-gray;
		}
	}
    
    
    /* 认证弹出 */
    .authBack {
        background: rgba(0, 0, 0, .35);
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 9;
    }
    
    .authPop {
        background-color: #ffffff;
        position: fixed;
        left: 50%;
        top: 50%;
        width: 400rpx;
        height: 500rpx;
        margin-left: -200rpx;
        margin-top: -250rpx;
        z-index: 10;
        border-radius: 10rpx;
        text-align: center;
        padding: 40rpx 0;
        box-sizing: border-box;
    }
    
    .authPop-img {
        width: 200rpx;
        height: 200rpx;
    }
    
    .authPop-cont {
        padding: 0 40rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        line-height: 44rpx;
        color: #999;
        margin-bottom: 40rpx;
    }
    
    .authBtn {
        background: #6d79ec;
        margin: 0 40rpx;
        color: white;
        font-size: 30rpx;
        line-height: 74rpx;
        border-radius: 6rpx;
        width: calc(100% - 80rpx);
        text-align: center;
    }
    
    .authPop-cloes {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        z-index: 11;
        width: 36rpx;
        height: 36rpx;
    }
</style>
