<!--
 * @Description:日历模板
 * @Author: Aimee·Zhang
 * @Date: 2022-02-08 09:06:45
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-02-08 09:06:45
-->

<template>
    <view class="date">
        <u-popup :show="dateShow" zIndex="10099890" @close="closeDate" mode="bottom" :safeAreaInsetBottom="true">
            <view class="date-content">
                <view class="title"><span @click="datePreNext('before')">上一月</span>{{month}}<span
                        @click="datePreNext('after')">下一月</span></view>
                <view class="date-item">
                    <view class="week">
                        <view class="week-item" v-for="(item,index) in weekList" :key="index">{{item}}</view>
                    </view>
                    <!-- 饮食模块 -->
                    <block v-if="type === 'foods'">
                        <view class="week" style="padding-top: 30rpx;">
                            <view v-for="item in lists" :key="item.today" @click="dateClick(item)"
                                :class="['week-item',{'is_past':!item.is_month},{'is_today':item.today ===  today},{'is_intake0':item.intake === 1},{'is_intake1':item.intake === 2},{'is_intake2':item.intake === 3}]">
                                {{item.day}}
                            </view>
                        </view>
                        <view class="des">
                            <block>
                                <view class="des-item">吃少了</view>
                                <view class="des-item">正好</view>
                                <view class="des-item">吃多了</view>
                            </block>
                            <view class="back" @click="backDate"> 回今天 </view>
                        </view>
                    </block>
                    <!-- 喝水模块 -->
                    <block v-if="type === 'drink'">
                        <view class="week" style="padding-top: 30rpx;">
                            <view v-for="item in lists" :key="item.today" @click="dateClick(item)"
                                :class="['week-item',{'is_past':!item.is_month},{'is_today':item.today ===  today}]">
                                {{item.day}}
                                <u-image class='waterIcon' :src="require('@/static/imgs/water-1.png')"
                                    v-if="item.drink === 2" :lazy-load="true" width="20rpx" radius="10rpx"
                                    mode="widthFix" />
                                <u-image class='waterIcon' :src="require('@/static/imgs/water-2.png')"
                                    v-if="item.drink === 1" :lazy-load="true" width="20rpx" radius="10rpx"
                                    mode="widthFix" />
                            </view>
                        </view>
                        <view class="drink">
                            <block>
                                <view class="drink-item">
                                    <u-image class='waterIcon' :src="require('@/static/imgs/water-1.png')"
                                        :lazy-load="true" width="22rpx" radius="10rpx" mode="widthFix" />未完成指标
                                </view>
                                <view class="drink-item">
                                    <u-image class='waterIcon' :src="require('@/static/imgs/water-2.png')"
                                        :lazy-load="true" width="22rpx" radius="10rpx" mode="widthFix" />
                                    完成指标
                                </view>
                            </block>
                            <view class="back" @click="backDate"> 回今天 </view>
                        </view>
                    </block>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                weekList: ['日', '一', '二', '三', '四', '五', '六'],
            };
        },
        props: {
            /** 
             *  lists 传过来的列表
             *  type foods（食物运动） drink（饮水）weight（体重）
             *  today 勾选时间
             *  month 勾选日期
             *  dateShow 页面是否显示
             **/
            lists: {
                type: Array,
                default: [],
            },
            type: {
                type: String,
                default: "",
            },
            today: {
                type: String,
                default: moment(new Date()).format('YYYY-MM-DD')
            },
            month: {
                type: String,
                default: moment(new Date()).format('YYYY-MM')
            },
            dateShow: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            // 选择日期
            dateClick(item) {
                this.$emit('dateClick', item)
            },
            // 返回今天
            backDate() {
                this.$emit('backDate', '')
            },
            // 点击上一个月或者下一个月 before 上一月 after下一个月
            datePreNext(type) {
                this.$emit('datePreNext', type)
            },
            // 关闭日历
            closeDate() {
                this.$emit('closeDate')
            }
        },
    };
</script>
<style lang="scss" scoped>
    .date {

        // 日历弹窗
        .date-content {
            width: 100%;
            padding: $padding *2;
            min-height: 800rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;

            .title {
                font-size: $title-size + 4;
                color: #20845f;
                font-weight: bold;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
                width: 100%;

                span {
                    display: inline-block;
                    padding: $padding;
                    font-size: $title-size-m;
                    color: #cacaca;
                    font-weight: normal;
                }
            }

            .date-item {
                padding-top: $padding;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;

                .drink {
                    display: flex;
                    color: #cacaca;
                    flex-direction: row;
                    align-items: center;
                    box-sizing: border-box;
                    font-size: $title-size-m;
                    justify-content: center;
                    margin-top: $margin;
                    width: 100%;

                    .drink-item {
                        padding-right: 40rpx;
                        position: relative;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;
                        u-image{
                            padding-right: 10rpx;
                        }
                    }
                }

                .des {
                    display: flex;
                    color: #cacaca;
                    flex-direction: row;
                    align-items: center;
                    box-sizing: border-box;
                    font-size: $title-size-m;
                    justify-content: center;
                    margin-top: $margin;
                    width: 100%;

                    .des-item {
                        padding-left: 40rpx;
                        padding-right: 10rpx;
                        position: relative;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;

                        &:before {
                            content: '';
                            position: absolute;
                            left: 14rpx;
                            width: 20rpx;
                            height: 20rpx;
                            border-radius: 50%;
                            background: #fa624d;
                        }

                        &:nth-child(2):before {
                            background: #fbbf0f;
                        }

                        &:nth-child(1):before {
                            background: #02c7bd;
                        }
                    }
                }

                .back {
                    margin-left: 100rpx;
                    background-color: rgba($color: $main-color, $alpha: 1);
                    color: #fff;
                    padding: 10rpx $padding;
                    border-radius: $radius + 10;
                }

            }



            .week {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                box-sizing: border-box;
                flex-wrap: wrap;
                width: 100%;

                .week-item {
                    width: 14.28%;
                    height: 90rpx;
                    line-height: 90rpx;
                    font-size: $title-size-m + 2;
                    color: #888;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;

                    &::before {
                        content: '';
                        width: 14rpx;
                        height: 14rpx;
                        border-radius: 50%;
                        position: absolute;
                        bottom: 0;
                        // background: #02c7bd;
                    }
                }

                .waterIcon {
                    position: absolute;
                    width: 30rpx !important;
                    bottom: -12rpx;
                    padding-left: 10rpx;
                }

                &:nth-child(1),
                &:nth-child(7),
                &:nth-child(8),
                &:nth-child(14),
                &:nth-child(15),
                &:nth-child(21),
                &:nth-child(22),
                &:nth-child(28),
                &:nth-child(29),
                &:nth-child(35),
                    {
                    color: rgba($color: #000000, $alpha: 0.4);

                }
            }

            // 吃饭样式
            .is_intake0::before {
                background: #02c7bd !important;
            }

            .is_intake1::before {
                background: #fbbf0f !important;
            }

            .is_intake2::before {
                background: #fa624d !important;
            }

            .is_today {
                color: #fff !important;
                position: relative;
                z-index: 1;

                &:after {
                    content: '';
                    width: 50rpx;
                    height: 50rpx;
                    position: absolute;
                    border-radius: 50%;
                    background-color: $main-color;
                    color: #Fff;
                    z-index: -1;
                }
            }

            .is_past {
                color: rgba($color: #000000, $alpha: 0.1) !important;
            }



        }
    }
</style>
