<!--
 * @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">
        <!-- 进度模块 -->
        <block v-if="tabbarId === 0">
            <!-- 体重表 -->
            <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">
                    <view class="list-left"> <view class="list-title"> <span>{{weightInfo.begin}}</span>公斤 </view> 初始体重 </view>
                    <view class="list-right"> <span>开始保持 / 塑性</span> {{weightInfo.first_weight_time}} </view>
                </view>
                <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>
        </block>
        
        
        <!-- 曲线模块 -->
        <view v-if="tabbarId === 1">
            <!-- 健康测评 -->
            <u-image :src="require('@/static/imgs/health1.png')" class="eval-img" @click="$Router.push({ name: 'EvaluationList' })" :lazy-load="true" radius="10rpx" mode="widthFix" width="100%" />
            <view class="curve">
               <view class="title"> 体重 <span>单位：公斤</span> </view>
               <u-icon @click="addWeightShow = true" name="edit-pen-fill" color="#34ce98" size="20" :bold="true" label="更新" labelPos="right" labelSize="13" labelColor="#999" space="4" />
            </view>
            <view class="charts-box"> <qiun-data-charts type="area" :chartData="chartData" background="none" /> </view>
            <view class="progress-top">
                <view class="add-weight" @click="addWeightShow = true">记录体重</view>
                <view class="des-title">只显示最近七次测量记录</view>
            </view>
        </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>
        
        
        <!-- 底部 进度 曲线菜单 -->
        <u-tabbar :value="tabbarId" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false" activeColor="#34ce98">
            <u-tabbar-item text="进度" :icon="tabbarId === 0 ?require('../../static/imgs/speed-2.png'):require('../../static/imgs/speed-1.png')" @click="tabbarClick" />
            <u-tabbar-item text="曲线" :icon="tabbarId === 1 ?require('../../static/imgs/curve-2.png'):require('../../static/imgs/curve-1.png')" @click="tabbarClick" />
        </u-tabbar>
    </view>
</template>
<script>
    import vueScale from "@/components/vueScale";
    import {
        weights,
        addWeight,
        curves
    } 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,
                tabbarId: 0,
                chartData: {
                    "categories": ["1/1","1/2","1/3","1/4","1/5","1/6","1/7"],
                    "series": [{"name": "最近七天进度","data": [55,51,53.3,50.3,53.3]}]
                }, // 曲线部分 start
            };
        },
        onShow() {
            this.getWeights();
            this.getCurves();
            this.date = moment(new Date()).format("YYYY-MM-DD");
        },
        onReachBottom() {
            if (!this.has_more) {
                uni.showToast({
                    title: "没有更多啦~",
                    icon: "none",
                    duration: 1000,
                    mask: true
                });
            } else {
                this.page = this.page + 1;
                this.getWeights();
            }
        },

        methods: {
            //获取体重首页接口
            getWeights() {
                weights(this.page).then((res) => {
                    console.log(res)
                    if (res.lists.page.current === 1) {
                        this.lists = []
                    }
                    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;
                }).catch(err=>{
                    uni.showToast({
                        title:err.message,
                        icon:"none",
                        mask:true,
                        duration:2000
                    })
                });
            },
            // 获取曲线
            getCurves() {
                curves().then((res) => {
                  this.chartData={
                      categories:res.categories,
                      "series": [res.series]
                  }
                }).catch(err=>{
                    uni.showToast({
                        title:err.message,
                        icon:"none",
                        mask:true,
                        duration:2000
                    })
                });
            },
            
            // 更新体重
            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();
                    this.getCurves();
                }).catch(err=>{
                    uni.showToast({
                        title:err.message,
                        icon:"none",
                        mask:true,
                        duration:2000
                    })
                });
            },
            
            // 滚动标尺触发事件
            scroll(msg) {
                this.weight = msg;
            },

            // 点击底部切换
            tabbarClick(e) {
                console.log(e)
                this.tabbarId = Number(e)
            }
        },
    };
</script>
<style lang="scss" scoped>
    .charts-box{
      width: 100%;
      height:500rpx;
      margin-top: $margin;
    }
    // curve
    .curve{
        margin-top: $margin;
        padding: $padding $padding + 10;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        font-size: $title-size + 5;
        color: #333;
        span{
            color: #cacaca;
            font-size: $title-size-m;
            margin-left: 10rpx;
        }
    }
    // 评测图片
    .eval-img {
    	box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
    }
    //体重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: #cacaca;
        padding: 0 $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: 20rpx 0;
            font-size: $title-size-m - 2;

            .list-title {
                color: #555;
                font-size: $title-size-m - 2;

                span {
                    font-size: $title-size + 10;
                    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;
                color: #999;

                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>
