<template>
    <view class="content">
        <image class="setting" src="/static/find/sign_img.png" mode="widthFix"></image>
        <view class="sign">
            <view class="signAdd">
                <view class="label">
                    <image class="picture" src="/static/find/sign.png" mode="aspectFill"></image>
                    <view class="label-day">
                        <view class="number">
                            <text>{{ dateData.total }}</text>天
                        </view>
                        本月打卡
                    </view>
                </view>
                <view class="label">
                    <image class="picture" src="/static/find/sign_active.png" mode="aspectFill"></image>
                    <view class="label-day">
                        <view class="number">
                            <text>{{ dateData.continue }}</text>天
                        </view>
                        累计打卡
                    </view>
                </view>
            </view>
            <view class="signDate">
                <view class="date">
                    {{ dateData.month }}
                </view>
                <view class="list">
                    <view class="week">
                        <view class="week-label">
                            日
                        </view>
                        <view class="week-label">
                            一
                        </view>
                        <view class="week-label">
                            二
                        </view>
                        <view class="week-label">
                            三
                        </view>
                        <view class="week-label">
                            四
                        </view>
                        <view class="week-label">
                            五
                        </view>
                        <view class="week-label">
                            六
                        </view>
                    </view>
                    <view class="day" v-for="(item, index) in dateArr" :key="index">
                        <view class="day-label" v-for="(items, index) in item" :key="index">
                            <view class="label-block" :class="{active : items.isSign}" v-if="!items.isHidden">
                                <uni-icons v-if="items.isSign" class="search-icon" custom-prefix="iconfont" type="icon-dui" color="#ffffff" size="18"></uni-icons>
                                <block v-else>{{ items.date }}</block>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="signBtn">
                    <view class="btn" @click="signClick" :class="{active : dateData.isSign}">
                        {{ dateData.isSign ? '今日已打卡' : '今日打卡'}}
                    </view>
                </view>
            </view>
            <view class="tipsText">
                ZH大健康用户打卡
            </view>
        </view>
    </view>
</template>

<script>
    import { date, sign } from '@/apis/interfaces/sign'
    export default {
    	data() {
    		return {
                dateData: '',
                dateArr : ''
    		}
    	},
        mounted() {
            this.dateList();
        },
    	methods: {
            // 用户登录
            dateList() {
            	date().then(res => {
                    this.dateData = res.base
                    this.dateArr  = res.calendar
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 签到
            signClick() {
                sign().then(res => {
                	console.log(res)
                    uni.showToast({
                    	title: '签到成功',
                    	icon: "none"
                    })
                    this.dateList();
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            }
    	}
    }
</script>

<style lang="scss" scoped>
    page {
        background: $window-color;
        height: 100vh;
    }
    .setting {
        width: 100%;
    }
    .sign {
        z-index: 9;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0 $padding + 20;
        margin-top: -$margin * 2.5;
        position: relative;
        box-sizing: border-box;
        .signTitle {
            padding: $padding * 3;
            font-size: $title-size + 20;
            color: #48988d;
            font-weight: 600;
            text-align: center;
        }
        .signAdd {
            padding: $padding $padding * 2.5;
            box-sizing: border-box;
            border-radius: $radius-m;
            background-color: white;
            margin-bottom: $margin;
            display: flex;
            .label {
                display: flex;
                font-size: $title-size-sm;
                .picture {
                    width: 74rpx;
                    height: 74rpx;
                    margin-right: $margin - 10;
                }
                .label-day {
                    color: $text-gray;
                    text {
                        font-size: $title-size-lg;
                        color: $text-color;
                        font-weight: 600;
                        padding-right: $padding - 20;
                    }
                }
                &:first-child {
                    flex: 1;
                    .label-day {
                        text {
                            color: $main-color;
                        }
                    }
                }
            }
        }
        .signDate {
            padding: $padding;
            border-radius: $radius-m;
            background-color: white;
            .date {
                text-align: center;
                font-size: $title-size + 6;
                margin-bottom: $margin;
                font-weight: 600;
            }
            .list {
                .week {
                    display: flex;
                    .week-label {
                        text-align: center;
                        font-size: $title-size-m;
                        width: 14.28%;
                        margin: $margin - 10 0;
                    }
                }
                .day {
                    flex-wrap: wrap;
                    display: flex;
                    .day-label {
                        width: 14.28%;
                        text-align: center;
                        line-height: 80rpx;
                        color: $text-color;
                        font-size: $title-size-m;
                        .label-block {
                            display: inline-block;
                            background-color: transparent;
                            color: $text-gray-m;
                            border-radius: 50%;
                            width: 56rpx;
                            height: 56rpx;
                            line-height: 56rpx;
                            text-align: center;
                            position: relative;
                            .label-icon {
                                position: absolute;
                                left: 10rpx;
                                top: 0;
                            }
                            &.active {
                                background-color: $main-color;
                                color: white;
                                border-radius: 50%;
                            }
                        }
                    }
                }
            }
            
            .signBtn {
                padding: $padding * 2 $padding * 2 0;
                .btn {
                    color: white;
                    background-color: $text-price;
                    text-align: center;
                    border-radius: $radius-m;
                    line-height: 90rpx;
                    &.active {
                        background-color: #ededed;
                        color: $text-gray;
                    }
                }
            }
        }
        
        .tipsText {
            text-align: center;
            line-height: 120rpx;
            font-size: $title-size-sm;
            color: $text-gray-m;
        }
    }
</style>
