<!--
 * @Description:喝水记录 ，记录当前的喝水情况
 * @Author: Aimee·Zhang
 * @Date: 2022-01-06 14:48:07
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-12 16:23:01
-->

<template>
    <view class="drink" v-if="loaded">
        <!-- 自定义导航部分 -->
        <u-navbar :safeAreaInsetTop="true" :fixed='true' bgColor="#34ce98" :autoBack="true">
            <view class="u-nav-slot" slot="left">
                <u-icon name="arrow-leftward" :bold="true" size="20" color="#fff" />
            </view>
            <view class="u-nav-slot u-center" slot="center" @click="dateShow = true,dateLists()">
                <u-icon name="play-left-fill" size="14" color="#fff" @click="datePreNext('before')" />
                <view class="date">
                    <u-icon name="calendar" color="#fff" label-color="#fff" width="150" :label="today" label-size="14"
                        size="20" />
                </view>
                <u-icon name="play-right-fill" size="14" color="#fff" @click="datePreNext('after')" />
            </view>
            <view class="u-nav-slot" slot="right">
                <u-icon :name="require('@/static/icon/sign-icon.gif')" :bold="true" size="30"
                    @click="$Router.push({name:'signIndex'})" />
            </view>
        </u-navbar>
        <!-- 喝水及水杯文字 -->
        <view class="drink-content">
            <view class="title" v-if="!water.is_complete"> 再喝 <span class="num">{{ water.lack.cup }}</span> 杯 <span
                    class="total">（约{{ water.lack.value }}ml）</span> </view>
            <view class="title" v-if="water.is_complete">
                已喝 <span class="num">{{ water.total }}ml</span>
                <u-image class="is_complete" :src="require('../../static/imgs/target.png')" :lazy-load="true"
                    mode="widthFix" width="140rpx" />
            </view>
            <!-- 水杯动态图片 -->
            <view class="wave-content">
                <u-image class="grass" :src="require('../../static/imgs/gress.png')" :lazy-load="true"
                    mode="scaleToFill" width="320rpx" height="520rpx" />
                <view class="wave" :style="{ '--ballPercent': -ballPercent + 40 + '%' }"></view>
            </view>
            <!-- 目标 -->
            <view class="water-target">
                <view class="target-item" @click="targetShow = true"> 今日目标
                    <u-icon class="target-icon" name="arrow-right" color="#666" size="14" :bold="true"
                        :label="water.target + 'ml'" labelPos="left" labelSize="16" labelColor="#666" space="6" />
                </view>
                <view class="target-item" @click="waterCShow = true"> 水杯容量
                    <u-icon class="target-icon" name="arrow-right" color="#666" size="14" :bold="true"
                        :label="water.ml + 'ml'" labelPos="left" labelSize="16" labelColor="#666" space="6" />
                </view>
            </view>
            <!-- 目标弹出层 -->
            <view>
                <u-picker :show="targetShow" :columns="tagerts" title="每天喝水目标" keyName="label" confirmColor="#34ce98"
                    :closeOnClickOverlay="true" @close="targetShow = false" @confirm="targetSure('1', $event)"
                    :defaultIndex="tagertsDefaultIndex" />
                <u-picker :show="waterCShow" :columns="cup_mls" title="设置水杯容量" keyName="label" confirmColor="#34ce98"
                    :closeOnClickOverlay="true" @close="waterCShow = false" @confirm="targetSure('2', $event)"
                    :defaultIndex="cupDefaultIndex" />
            </view>
            <!-- 加水 -->
            <view class="add-water" @click="drinkWater">
                <u-image class="grass" :src="require('../../static/imgs/gress2.png')" :lazy-load="true"
                    mode="scaleToFill" width="60rpx" height="80rpx" />
                <span>一杯水</span>
                <u-icon class="add-icon" name="plus-circle-fill" color="#34ce98" size="24" />
            </view>
        </view>
        <!-- 喝水记录 -->
        <view class="--history">
            <view class="title">喝水记录</view>
            <template v-if="logs.length > 0">
                <view class="lists" v-for="item in logs" :key="item.water_log_id"
                    @longpress="delWater(item.water_log_id)">
                    <view class="lists-water">
                        <u-icon size="30" :name="require('../../static/icon/water-icon.png')" />
                    </view>
                    <view class="list-item">
                        <view class="list-item-title"> 水 <span>{{ item.time }}</span> </view> {{ item.ml }}ml
                    </view>
                </view>
            </template>
            <view v-else class="no-drink">今天一杯水还没有喝呢，来一杯吧~</view>
        </view>

        <!-- 选择日历 -->
        <dateTemplate :lists="calendarList" :today="today" :month="month" :dateShow="dateShow" type='drink'
            @backDate="backDate" @dateClick="dateClick" @closeDate="closeDate" @datePreNext="datePreNext" />
    </view>
</template>
<script>
    import {
        waters,
        setWaters,
        drinkWater,
        delDrinkWater,
        dateList
    } from '@/apis/interfaces/drink';
    import moment from 'moment';
    import dateTemplate from '@/components/date-template/index.vue'
    export default {
        components: {
            dateTemplate
        },
        data() {
            return {
                ballPercent: 0, // 喝水比例
                logs: [], // 水记录
                water: {}, // 水基本信息
                targetShow: false,
                tagerts: [], // 目标列表
                tagertsDefaultIndex: ['1'], // 目标默认index
                waterCShow: false,
                cup_mls: [], // 水杯列表
                cupDefaultIndex: ['2'], // 目标默认index
                loaded: false,
                today: moment(new Date()).format('YYYY-MM-DD'), // 当前时间
                month: moment(new Date()).format('YYYY-MM'), //当前月份
                dateShow: false, // 日历展示
                calendarList: [],
                dateType: '', // before after ''
            };
        },
        onShow() {
            this.getWaters();
            this.dateLists();
        },
        methods: {
            // 获取喝水页面信息
            getWaters() {
                let data = {
                    date: this.today,
                    // type:this.dateType
                }
                waters(data).then(res => {
                    this.cup_mls = [res.cup_mls];
                    this.tagerts = [res.tagerts];
                    this.water = res.water;
                    this.logs = res.logs;
                    this.ballPercent = res.water.lack.ratio;
                    this.cupDefaultIndex = [res.cup_mls.findIndex(item => item.number === res.water.ml)];
                    this.tagertsDefaultIndex = [res.tagerts.findIndex(item => item.number === res.water
                        .target)];
                    this.loaded = true;
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                });
            },
            // 确认方法index===1 每日目标 2，水杯容量
            targetSure(index, e) {
                let params = {};
                if (index === '1') {
                    params = {
                        type: 'target',
                        ml: e.value[0].number,
                        date: moment(new Date()).format('YYYY-MM-DD')
                    };
                } else {
                    params = {
                        type: 'ml',
                        ml: e.value[0].number,
                        date: moment(new Date()).format('YYYY-MM-DD')
                    };
                }
                setWaters(params).then(res => {
                    this.getWaters();
                    this.waterCShow = false;
                    this.targetShow = false;
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                });
            },
            // 喝水
            drinkWater() {
                let data = {
                    date: this.today
                }
                drinkWater(data).then(res => {
                    this.getWaters();
                    this.dateLists()
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                });
            },
            // 删除和喝水记录
            delWater(id) {
                uni.showModal({
                    content: '确认删除么？',
                    confirmText: '确认删除',
                    confirmColor: '#34ce98',
                    cancelText: '再想想',
                    cancelColor: '#ddd',
                    success: res => {
                        if (res.confirm) {
                            delDrinkWater(id)
                                .then(res => {
                                    this.getWaters();
                                })
                                .catch(err => {
                                    uni.showToast({
                                        title: err.message,
                                        icon: "none",
                                        duration: 2000,
                                        mask: true
                                    })
                                });
                        }
                    }
                });
            },
            //#region 日历操作相关
            // 日历列表
            dateLists() {
                let data = {
                    month: this.month,
                    type: this.dateType
                }
                dateList(data).then(res => {
                    this.calendarList = res.calendar
                    this.dateType = ''
                    this.month = res.month
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                })
            },
            // 选择日期
            dateClick(item) {
                this.today = item.today
                this.month = item.today
                this.reset()
            },
            // 返回到今日
            backDate() {
                this.today = moment(new Date()).format('YYYY-MM-DD')
                this.reset()
            },
            //  上一个月或者下一个月
            datePreNext(type) {
                this.dateType = type
                this.dateLists()
            },
            // 关闭日历
            closeDate() {
                this.month = this.today
                this.dateShow = false
            },
            // 重置日历数据
            reset() {
                this.calendarList = []
                this.dateLists()
                this.getWaters()
                this.closeDate()
            }
            //#endregion 日历操作相关
        }
    };
</script>
<style lang="scss" scoped>
    .drink {
        padding-top: 120rpx;

        // 顶部日历筛选部分
        .u-center {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;

            .date {
                background-color: rgba($color: #000000, $alpha: .1);
                color: #fff;
                min-width: 340rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                padding: 8rpx 20rpx;
                border-radius: $radius * 2;
                margin: 0 10rpx;
                font-size: $title-size - 2;
            }

            .play-right-fill {
                padding: $padding !important;
                background-color: pink;
            }
        }

        // 喝水 水杯及文字

        .drink-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            // padding: $padding  0;
            position: relative;

            // 标题 再喝水
            .title {
                font-size: $title-size + 4;
                color: $main-color;
                font-weight: normal;
                margin: $margin * 2;
                position: relative;

                .is_complete {
                    position: absolute;
                    top: 30rpx;
                    right: -120rpx;
                }

                .num {
                    font-size: $title-size * 2.3;
                    padding: 0 $padding * 0.3;
                    font-weight: bold;
                }

                .total {
                    font-size: $title-size;
                    color: $text-gray-m;
                    padding-left: $padding * 0.2;
                }
            }

            // 加一杯水
            .add-water {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                font-size: $title-size;
                color: $text-color;
                margin-top: $margin * 2;
                position: relative;

                span {
                    padding-top: $padding * 0.4;
                    color: $text-gray-m;
                    font-size: $title-size;
                }

                .add-icon {
                    position: absolute;
                    top: $margin + 8;
                    right: 0;
                }
            }

            // 目标
            .water-target {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                color: $text-gray-m;
                font-size: $title-size;
                position: absolute;
                z-index: 110;
                right: $padding * 1.4;
                top: 50%;

                .target-item {
                    margin-top: $margin * 1.6;

                    .target-icon {
                        padding-top: $padding * 0.5;
                    }
                }
            }
        }

        // 喝水记录
        .--history {
            padding: $padding;

            .no-drink {
                color: $text-gray-m;
                font-size: $title-size-m;
                padding-top: $padding + 10;
            }

            // 标题
            .title {
                font-size: $title-size + 4;
                font-weight: bold;
                color: $text-color;
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                box-sizing: border-box;
                padding-left: $padding;
                padding-bottom: $padding;

                &::before {
                    position: absolute;
                    content: '';
                    width: 8rpx;
                    height: 45rpx;
                    left: 0;
                    background-color: $main-color;
                    border-radius: 10rpx;
                }
            }

            // 列表
            .lists {
                // background-color: pink;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
                border-bottom: solid 1rpx #f7f7f7;

                .lists-water {
                    background-image: linear-gradient(to right, $main-color, $main-color);
                    width: 90rpx;
                    height: 90rpx;
                    border-radius: 50%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                }

                .list-item {
                    flex: 1;
                    margin-left: $margin * 0.7;
                    font-size: $title-size;
                    color: $text-gray-m;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    box-sizing: border-box;
                    margin: $margin 0 $margin $margin * 0.7;

                    .list-item-title {
                        font-size: $title-size + 3;
                        color: $text-color;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: center;
                        box-sizing: border-box;
                        font-weight: bold;

                        span {
                            margin-top: $margin * 0.4;
                            background-color: #f7f7f7;
                            padding: 4rpx 10rpx;
                            border-radius: 50rpx;
                            font-weight: normal;
                            font-size: $title-size - 3;
                        }
                    }
                }
            }
        }
    }

    // 水杯动画
    .wave-content {
        position: relative;
        z-index: 1;

        .grass {
            position: relative;
            z-index: 1;
        }

        .wave {
            position: absolute;
            width: 290rpx;
            height: 500rpx;
            background-color: rgba($color: $main-color, $alpha: 0.6);
            background-size: 100%;
            overflow: hidden;
            top: 10rpx;
            left: 20rpx;
            z-index: 1;

            &::before,
            &::after {
                content: '';
                position: absolute;
                width: 1000rpx;
                height: 1000rpx;
                top: var(--ballPercent);
                left: 50%;
                background-color: rgba(255, 255, 255, 0.4);
                border-radius: 45%;
                transform: translate(-50%, -70%) rotate(0);
                animation: rotate 4s linear infinite;
                z-index: 1;
            }

            &::after {
                border-radius: 47%;
                background-color: rgba(255, 255, 255, 0.9);
                transform: translate(-50%, -70%) rotate(0);
                animation: rotate 6s linear -5s infinite;
                z-index: 20;
            }
        }

        @keyframes rotate {
            50% {
                transform: translate(-50%, -73%) rotate(180deg);
            }

            100% {
                transform: translate(-50%, -70%) rotate(360deg);
            }
        }
    }
</style>
