<template>
    <view class="common homePage">
        <!-- 头部 -->
        <headTop :token="token"></headTop>
        <!-- 健康报告 -->
        <view class="myinfo myinfoPage">
            <view class="mt-15" v-show="MeasureResult&&MeasureResult.muscle==0">
                <view class="unusual">体脂测量异常，请重新测量</view>
            </view>
            <view v-if="infoList.length">
                <view class="box">
                    <view class="left">
                        <text class="text">本次健康评分</text>
                        <view class="circleprogress">
                            <view class="wrapper">
                                <view class="leftprogress" :style="{ width: MeasureResult.cmi + '%'}">
                                </view>
                            </view>
                            <view class="fen">
                                <view>{{MeasureResult.cmi}}</view>分
                            </view>
                        </view>
                    </view>
                    <view class="right">
                        <view class="item">
                            <view><text>{{MeasureResult.height}}</text>cm</view>
                            <view class="tivon">身高</image>
                            </view>
                        </view>
                        <view class="item">
                            <view><text>{{MeasureResult.weight}}</text>kg</view>
                            <view>体重</view>
                        </view>
                        <!-- <view class="item">
                            <view><text>{{MeasureResult.lbm}}</text>kg</view>
                            <view class="tivon">去脂体重</image>
                            </view>
                        </view> -->
                        <view class="item">
                            <view><text>{{MeasureResult.bodyage}}</text>岁</view>
                            <view>体龄</view>
                        </view>
                        <view class="item">
                            <view><text class="f-14">{{MeasureResult.body}}</text></view>
                            <view>体型</view>
                        </view>
                    </view>
                </view>
                <view class="box1">
                    <view class="h2">
                        <icon class="yuanxing"></icon>其他人体成分分析
                    </view>
                    <view class="list" v-for="(item,index) in infoList" :key="index" @click="handleToggle(index)">
                        <view class="block">
                            <view class="name">
                                <icon class="t-icon iconfont" :class="'t-icon-'+item.key"></icon>
                                {{item.title}}
                            </view>
                            <view class="val" v-if="item.title!='肥胖等级'">
                                {{item.fvalue?item.fvalue:'0'}}{{item.dw}}
                            </view>
                            <view class="val0" v-else>{{item.fevaluation}}</view>
                            <view class="level" v-if="item.title!='肥胖等级'">
                                <view class="btnf" :style="{backgroundColor:item.color}">{{item.fevaluation}}</view>
                            </view>
                            <view class="icon">
                                <icon class="iconfont icon-arrow-down" v-if="item.desc"></icon>
                            </view>
                        </view>
                        <view class="desc" v-if="item.showCon">
                            <view v-if="item.desc">{{item.desc}}</view>
                            <view class="statuevue" v-if="item.slist">
                                <view class="bi" v-if="item.title!='基础代谢'">
                                    <view class="item" v-for="(ite , ind) in item.slist" :key="ind"
                                        :style="{backgroundColor:ite.color}">
                                        <view class="span1">{{ite.text}}</view>
                                        <view v-if="ite.text==item.fevaluation&&item.fvalue>ite.maxvalue"
                                            style="right: 10px" class="peobox">
                                            <view class="xx"></view>
                                        </view>
                                        <view v-if="ite.text==item.fevaluation&&item.fvalue<=ite.maxvalue"
                                            :style="'left:'+item.leftval+'rem'" class="peobox">
                                            <view class="xx"></view>
                                        </view>
                                        <view class="span" v-if="ind<item.slist.length-1">{{ite.maxvalue}}</view>
                                    </view>
                                </view>
                                <view v-else>
                                    <view class="kcalClass">
                                        标准值:{{item.slist[0].maxvalue}}kcal
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="introction">
                    <icon class="t-icon t-icon-tishi"></icon>
                    <span>此测量数据仅供参考，不可代替医学专业测试！</span>
                </view>
            </view>
            <view v-else class="nolist">
                <icon class="iconfont icon-zanwu"></icon>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import headTop from "@/components/header/head.vue"
    export default {
        components: {
            headTop
        },
        data() {
            return {
                token: null,
                devtype: 0,
                infoList: [],
                deviceId: null,
            };
        },
        computed: {
            ...mapState(["user", "MeasureResult"]),
        },
        onUnload: function() {
            let that = this
            uni.switchTab({
                url: "/pages/index/index"
            })
        },
        onShow() {
            let that = this;
            that.token = uni.getStorageSync('token')
            uni.onBluetoothAdapterStateChange(function(res) {
                that.$store.commit("changeBluetooth", res.available);
                console.log("报告页监听蓝牙状态openBluetoothAdapter", res.available)
            })
        },
        onLoad(options) {
            let that = this;
            console.log("options", options)
            if (options) {
                that.devtype = options.t
                that.deviceId = options.sn
            }
            this.$nextTick(() => {
                that.handleToggle(0)
            })
        },
        watch: {
            MeasureResult() {
                this.handleToggle(0)
            }
        },
        methods: {
            // 切换
            handleToggle(index) {
                let that = this
                if (!that.MeasureResult) return
                let str = this.weightInfo.infoList(that.MeasureResult).slice(1, 14)
                for (var i = 0; i < str.length; i++) {
                    if (i == index) {
                        str[i].showCon = !str[i].showCon
                    } else {
                        str[i].showCon = false
                    }
                }
                that.infoList = this.weightInfo.infoList(that.MeasureResult).slice(1, 14)
            },
        },
    }
</script>

<style lang="scss" scoped>
    .myinfo {
        margin-top: 105px;
    }

    .val0 {
        position: absolute;
        left: 40%;
        margin-left: 3px;
    }

    .wrapper {
        z-index: 9 !important;
    }

    .unusual {
        font-size: 14px;
        border-radius: 8px;
        text-align: center;
        color: #e83a1e;
        margin: 15px;
        background: #f7e4c8;
        padding: 5px 0;
    }

    .introction {
        display: flex;
        margin-left: 15px;
        margin-bottom: 20px;
        font-size: 12px;
        color: #666;

        .t-icon {
            width: 15px;
            height: 15px;
            margin-right: 5px;

        }
    }
</style>
