<!--
 * @Description:记录体重页面
 * @Author: Aimee·Zhang
 * @Date: 2022-01-07 12:32:50
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-14 09:37:42
-->

<template>
    <view class="weight">
        <!-- 体重表 -->
        <view class="progress-top">
            <view class="unit">
                <span
                    :class="isJin === 2?'active':''"
                    @click="isJin = 1"
                >斤</span>
                <span
                    :class="isJin === 1?'active':''"
                    @click="isJin = 1"
                >公斤</span>
            </view>
            <view class="progress">
                <view>{{weightInfo.text}}</view>
                <u-count-to
                    class="uCountTo"
                    :startVal="0"
                    :endVal="weightInfo.change"
                    :decimals="1"
                    color="#333"
                    fontSize="36"
                    :bold="true"
                />
                <view>保持 / 塑性</view>
            </view>
            <view
                class="add-weight"
                @click="addWeightShow = true"
            >记录体重</view>
            <view class="des-title">以最后一次记录为主且每日只能更新一次</view>
        </view>
        <!-- 体重列表 -->
        <view
            class="weight-list"
            v-if="lists.length>0"
        >
            <view
                class="list-item"
                v-for="item in lists"
                :key="item.wight_id"
            >
                <view class="list-left">
                    <view class="list-title">
                        <span>{{item.weight}}</span>公斤
                    </view>
                    测量结果
                </view>
                <view class="list-right">
                    <span>开始保持 / 塑性</span>
                    {{item.created_at}}
                </view>
            </view>
        </view>
        <view
            class="no-lists"
            v-else
        >还没有体重信息，记录下呗~</view>
        <!-- 记录体重弹窗 -->
        <u-popup
            :show="addWeightShow"
            :round="10"
            @close="addWeightShow = false"
            :closeable="true"
        >
            <view class="addWeightContent">
                <view class="date">今天</view>
                <view class='count'><span>{{weight}}</span>公斤</view>
                <vue-scale
                    :min="10"
                    :max="100"
                    :int="false"
                    :single="10"
                    :h="80"
                    :styles="styles"
                    @scroll="scroll"
                    :scrollLeft="Number(weight)"
                />
                <view
                    class="addBtn"
                    @click="addWeight"
                >确认添加</view>
            </view>
        </u-popup>
    </view>
</template>
<script>
import vueScale from "@/components/vueScale";
import { weights, addWeight } from "@/apis/interfaces/weight.js";
import moment from "moment";
import l from "../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center";
export default {
    components: {
        vueScale,
    },
    data() {
        return {
            isJin: 1, // 是公斤 2 是斤 所有用到斤的直接乘以这个字段即可
            addWeightShow: false, // 是否添加体重展示
            styles: {
                line: "#dbdbdb",
                bginner: "#fbfbfb",
                bgoutside: "#ffffff",
                font: "#404040",
                fontColor: "#404040",
                fontSize: 16,
            },
            weight: "",
            date: "",
            weightInfo: {},
            lists: [],
            has_more: true,
            page: 1,
        };
    },
    onShow() {
        this.getWeights();
        this.date = moment(new Date()).format("YYYY-MM-DD");
    },
    onReachBottom() {
        if (!this.has_more) {
            uni.showToast({
                title: "没有更多啦~",
                icon: "none",
            });
        } else {
            this.page = this.page + 1;
            this.getWeights();
        }
    },

    methods: {
        //获取体重首页接口
        getWeights() {
            weights(this.page).then((res) => {
                console.log(res);
                this.lists = this.lists.concat(res.lists.data);
                this.has_more = res.lists.page.has_more;
                this.weightInfo = res.weight;
                this.weight = res.weight.now;
            });
        },
        addWeight() {
            let data = {
                weight: this.weight,
                date: this.date,
            };
            addWeight(data).then((res) => {
                this.addWeightShow = false;
                this.page = 1;
                this.has_more = true;
                this.lists = [];
                this.getWeights();
            });
        },
        // 滚动标尺触发事件
        scroll(msg) {
            this.weight = msg;
        },
    },
};
</script>
<style lang="scss" scoped>
//体重top
.progress-top {
    padding: $padding * 2 $padding;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: solid 1rpx #f7f7f7;
    // 单位
    .unit {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        span {
            display: inline-block;
            width: 100rpx;
            font-size: $title-size-m;
            color: $border-color;
            padding: $padding * 0.5 0;
            text-align: center;
            border: solid 1rpx $border-color;
            border-radius: 50rpx 0 0 50rpx;
        }
        span:nth-child(1) {
            border-radius: 50rpx 0 0 50rpx;
            border-style: solid;
            border-color: $border-color $main-color $border-color $border-color;
        }
        span:nth-child(2) {
            border-radius: 0 50rpx 50rpx 0;
            border-style: solid;
            border-color: $border-color $border-color $border-color $main-color;
        }
        span.active {
            background-color: $main-color;
            color: #fff;
            border: solid 1rpx $main-color;
        }
    }

    // 展示圈
    .progress {
        width: 360rpx;
        height: 360rpx;
        border: solid $padding * 0.7 #f7f7f7;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        color: $text-gray-m;
        font-size: $title-size-m;
        .uCountTo {
            padding: $padding * 0.5;
        }
    }
    //  记录按钮
    .add-weight {
        font-size: $title-size + 2;
        border-radius: $radius * 3;
        border: solid 2rpx $main-color;
        color: $main-color;
        padding: $padding * 0.6 $padding * 2.8;
        margin-top: $margin * 2;
        font-weight: bold;
    }
    .des-title {
        padding: $padding;
        color: $text-gray-m;
        font-size: $title-size-m - 4;
    }
}
// 列表
.weight-list {
    font-size: $title-size-m;
    color: $text-gray-m;
    padding: $padding;

    .list-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-between;
        border-bottom: solid 1rpx #f9f9f9;
        padding: $padding 0;
        .list-title {
            color: $text-color;
            font-size: $title-size-m;
            margin-bottom: $margin * 0.4;
            span {
                font-size: $title-size + 14;
                font-weight: 500;
                margin-right: 10rpx;
            }
        }
        .list-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            box-sizing: border-box;
            margin-top: $margin * 0.4;
            span {
                margin-bottom: 10rpx;
            }
        }
    }
}
.no-lists {
    padding: $padding;
    color: $text-gray-m;
    font-size: $title-size-m;
}

// 弹窗
.addWeightContent {
    width: 100%;
    height: 54vh;
    padding: $padding * 4 0;
    box-sizing: border-box;
    color: $text-gray;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    .date {
        font-size: $title-size + 9;
        text-align: center;
    }
    .count {
        color: $main-color;
        text-align: center;
        margin-top: $margin * 2;
        margin-bottom: $margin * 0.1;
        font-size: $title-size + 2;
        span {
            font-weight: bold;
            font-size: $title-size * 2.2;
            margin-right: $margin * 0.3;
        }
    }
    .addBtn {
        background-color: $main-color;
        color: #fff;
        margin-top: $margin * 2;
        font-size: $title-size * 1.2;
        padding: $padding * 0.7 $padding * 4;
        border-radius: $radius * 3;
        font-size: $title-size + 6;
        box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
    }
}
</style>