<template>
    <view class="content">
        <!-- 性别start -->
        <view class="files" @click="sexShow = true">
            <view class="name">性别</view>
            <view class="text">
                <u-icon class="target-icon" :label="recordsData.sex == 1 ? '男士' : '女士'" name="arrow-right" color="#999"
                    size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
            </view>
        </view>
        <u-action-sheet :actions="sexList" title="你的性别是？" :show="sexShow" cancelText="暂不修改"
            @select=" e => { (this.recordsData.sex = e.id), (this.sexShow = false); } " @close="sexShow = false" />
        <!-- 性别 end -->

        <!-- 生日 start -->
        <view class="files" @click="birthdayShow = true">
            <view class="name">生日</view>
            <view class="text">
                <u-icon class="target-icon" :label="showBirthday" name="arrow-right" color="#999" size="14"
                    labelSize="14" labelColor="#666" labelPos="left" space="10" />
            </view>
        </view>
        <u-datetime-picker confirmColor="#34ce98" v-model="recordsData.birthday" mode="date" :show="birthdayShow"
            :formatter="formatter" :minDate="-302688000" :maxDate="maxDate"
            @confirm=" e => { this.recordsData.birthday = e.value, this.birthdayShow = false } "
            @cancel=" () => { this.birthdayShow = false; } " />
        <!-- 生日 end -->

        <!-- 身高 start-->
        <view class="files" @click="heightShow = true">
            <view class="name">身高</view>
            <view class="text">
                <u-icon class="target-icon" :label="recordsData.height + `   CM`" name="arrow-right" color="#999"
                    size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
            </view>
        </view>
        <u-popup :show="heightShow" @close="() => { heightShow = false }">
            <view class="v-scale">
                <view class="title"> 你的身高为?</view>
                <view class="total"> {{recordsData.height}} CM </view>
                <vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles"
                    @scroll="scrollAll('height',$event)" :scrollLeft="Number(recordsData.height)" />
            </view>
        </u-popup>
        <!-- 身高 end -->

        <!-- 最新体重 start -->
        <view class="files bt30" @click="weightShow = true">
            <view class="name">最新体重</view>
            <view class="text">
                <u-icon class="target-icon" :label="recordsData.weight + `   KG`" name="arrow-right" color="#999"
                    size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
            </view>
        </view>
        <u-popup :show="weightShow" @close="() => { weightShow = false }">
            <view class="v-scale">
                <view class="title"> 你的当前体重为?</view>
                <view class="total"> {{recordsData.weight}} KG </view>
                <vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles"
                    @scroll="scrollAll('weight',$event)" :scrollLeft="Number(recordsData.weight)" />
            </view>
        </u-popup>
        <!-- 生日 end -->

        <!-- 目标 start -->
        <view class="files" @click="targetShow = true">
            <view class="name">目标</view>
            <view class="text">
                <u-icon class="target-icon" :label="targetList[selectedTargetIndex].name" name="arrow-right"
                    color="#999" size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
            </view>
        </view>
        <u-action-sheet :actions="targetList" title="你的目标是？" :show="targetShow" cancelText="暂不修改"
            @select=" e => { (this.selectedTargetIndex = this.targetList.findIndex(item => e.id === item.id)), (this.targetShow = false); } "
            @close="targetShow = false" />
        <!-- 目标 end -->

        <!-- 目标体重 start-->
        <view class="files" @click="targetWeightShow = true">
            <view class="name">目标体重</view>
            <view class="text">
                <u-icon class="target-icon" :label="recordsData.goal_weight + `   KG`" name="arrow-right" color="#999"
                    size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
            </view>
        </view>
        <u-popup :show="targetWeightShow" @close="() => { targetWeightShow = false }">
            <view class="v-scale">
                <view class="title"> 你的目标体重为?</view>
                <view class="total"> {{recordsData.goal_weight}} KG </view>
                <vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles"
                    @scroll="scrollAll('goalweight',$event)" :scrollLeft="Number(recordsData.goal_weight)" />
            </view>
        </u-popup>
        <!-- 目标体重 end -->

        <!-- 运动量 start -->
        <view class="files" @click="exerciseShow = true">
            <view class="name">运动量</view>
            <view class="text">
                <u-icon class="target-icon" :label="exerciseList[selectExerciseIndex].name" name="arrow-right"
                    color="#999" size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
            </view>
        </view>
        <u-action-sheet :actions="exerciseList" title="你的运动量是？" :show="exerciseShow" cancelText="暂不修改"
            @select=" e => { (this.selectExerciseIndex = this.exerciseList.findIndex(item => e.id === item.id)), (this.exerciseShow = false); } "
            @close="exerciseShow = false" />
        <!-- 运动量 end -->
        <view class="sureBtn" @click="sureBtn"> 确认修改 </view>
        <view class="des">修改资料后可更新并查看最新方案，预算热量可能会发生变化</view>
    </view>
</template>

<script>
    import {
        editHealthBefore,
        editHealth
    } from '@/apis/interfaces/essentialInfo.js';
    import moment from 'moment';
    import vueScale from '@/components/vueScale'; // 体重标尺
    export default {
        components: {
            vueScale
        },
        data() {
            return {
                recordsData: {},
                birthdayShow: false, // 出生日期展示
                maxDate: new Date().getTime(),
                sexShow: false, // 性别弹窗是否显示
                sexList: [{
                    name: '男士',
                    id: 1
                }, {
                    name: '女士',
                    id: 2
                }],
                targetShow: false, // 目标弹窗是否显示
                targetList: [{
                    name: '减脂',
                    id: 1
                }, {
                    name: '保持体重',
                    id: 2
                }, {
                    name: '增肌',
                    id: 3
                }],
                selectedTargetIndex: 0, // 默认选择了那个target
                exerciseShow: false, // 运动量弹窗是否显示
                exerciseList: [{
                    name: '久坐不动',
                    id: 1
                }, {
                    name: '少量运动',
                    id: 2
                }, {
                    name: '中等运动量',
                    id: 3
                }, {
                    name: '超强度运动',
                    id: 4
                }],
                selectExerciseIndex: 0, //默认选择运动量是久坐不懂得
                heightShow: false,
                weightShow: false,
                targetWeightShow: false,
                styles: {
                    line: '#dbdbdb',
                    bginner: '#fbfbfb',
                    bgoutside: '#ffffff',
                    font: '#404040',
                    fontColor: '#404040',
                    fontSize: 16
                },
            };
        },
        computed: {
            showBirthday() {
                return moment(this.recordsData.birthday).format('YYYY年MM月DD日');
            }
        },

        onShow() {
            let id = this.$Route.query.id;
            editHealthBefore(id)
                .then(res => {
                    this.recordsData = res;
                    this.recordsData.birthday = moment(res.birthday).format('YYYY-MM-DD');
                    this.selectExerciseIndex = this.exerciseList.findIndex(item => item.id === res.exercise)
                })
                .catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                });
        },
        methods: {
            // 身高  体重  目标体重  滚动
            scrollAll(type, value) {
                if (type === 'height') {
                    return this.recordsData.height = value;
                }
                if (type === 'weight') {
                    return this.recordsData.weight = value;
                }
                if (type === 'goalweight') {
                    return this.recordsData.goal_weight = value;
                }
            },
            // 年龄 - 过滤 - 自定义 - 出生年月日
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                }
                if (type === 'month') {
                    return `${value}月`;
                }
                if (type === 'day') {
                    return `${value}日`;
                }
                return value;
            },
            // 提交按钮
            sureBtn() {
                let params = {
                    record_id: this.recordsData.record_id,
                    birthday: moment(this.recordsData.birthday).format('YYYY-MM-DD'),
                    sex: this.recordsData.sex,
                    height: this.recordsData.height,
                    weight: this.recordsData.weight,
                    exercise: this.exerciseList[this.selectExerciseIndex].id,
                    goal_weight: this.recordsData.goal_weight,
                    days: 1
                }
                editHealth(params.record_id, params).then(res => {
                    this.$Router.back()
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                    this.$Router.back()
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        padding: $padding;
    }

    .files {
        display: flex;
        padding: $padding + 10 $padding - 20;
        box-sizing: border-box;
        border-bottom: #f9f9f9 2rpx solid;
        font-size: $title-size;

        &:last-child {
            border: none;
        }

        .name {
            flex: 1;
        }

        .text {
            color: $text-gray;
        }
    }

    .v-scale {
        padding: $padding * 2 0;
        font-size: $title-size;

        .title {
            text-align: center;
            font-size: $title-size + 10;
            margin-bottom: $margin;
        }

        .total {
            font-size: $title-size;
            color: $main-color;
            text-align: center;
        }
    }

    .des {
        color: $text-gray-m;
        font-size: $title-size-m - 4;
        margin-top: $margin * 2;
        text-align: center;
    }

    .sureBtn {
        background-color: $main-color;
        color: #fff;
        font-size: $title-size;
        text-align: center;
        padding: $padding;
        border-radius: $radius;
        margin-top: $margin * 2;
    }

    .bt30 {
        border-bottom: #f9f9f9 20rpx solid;
    }
</style>
