<template>
    <view class="common">
        <view class="header" v-if="info">
            <view class="left">
                <image :src="info.headimg" class="image1" />
                <view class="left_sm">
                    <view class="name">
                        <view>{{info.name?info.name:""}}</view>
                        <view class="right">
                            <view v-if="info.isself != 1" @click="deldet(Infoid)" class="guanliyuan">删除</view>
                            <view @click="editorInfo()" class="guanliyuan">编辑</view>
                        </view>
                    </view>
                    <view class="mt-5">
                        <text>{{info.sex==0?'未知':info.sex==2?'女':'男'}}</text>
                        <text>{{info.height}}cm</text>
                        <text>{{info.mage?info.mage:"0岁"}}</text>
                    </view>
                </view>
            </view>
        </view>
        <scroll-view scroll-y class="list ">
            <view class="history" v-if="ranklist.length">
                <view class="list-item" v-for="(item ,index) in ranklist" :key="index">
                    <view class="item">
                        <view class="time">
                            <icon class="t-icon t-icon-shijian-mianxing-0"></icon>
                            <text>{{item.createtime}}</text>
                        </view>
                        <view>{{item.height}}<text>身高</text></view>
                        <view>{{item.weight}}<text>体重</text></view>
                        <view>{{item.bmi}}<text>BMI</text></view>
                    </view>
                </view>
                <view class="endtext" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view>
            </view>
            <view class="nolist" v-else>
                <icon class="iconfont icon-zanwu"></icon>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        data() {
            return {
                ranklist: [],
                info: {},
                memberText: null,
                memberType: [],
                page: 1,
                lastPage: '',
            }
        },
        computed: {
            ...mapState(["user"])
        },
        onLoad(option) {
            this.page = 1
            this.ranklist = []
            console.log("id", option)
            if (option.id) {
                this.Infoid = option.id
            }
        },
        onShow() {
            this.ranklist = []
            this.gethistory(this.Infoid)
            this.getHistoryList(this.Infoid)
        },
        onReachBottom() {
            console.log(this.lastPage, this.page)
            if (!this.lastPage || this.page >= this.lastPage) {
                uni.showToast({
                    title: '没有更多数据！',
                    icon: 'none'
                })
                return
            }
            this.page++
            this.getHistoryList(this.Infoid)
        },
        methods: {
            // 历史记录
            getHistoryList(id) {
                this.$model.getHistoryList({
                    familyId: id,
                    pageNo: this.page,
                    pageSize: 10,
                }).then((res) => {
                    if (res.code != 0) {
                        return
                    }
                    this.ranklist = this.ranklist.concat(res.data.rows)
                    this.lastPage = res.data.totalpage
                })
            },
            // 信息
            gethistory(id) {
                this.$model.getdetail({
                    id: id
                }).then((res) => {
                    if (res.code != 0) {
                        return
                    }
                    this.info = res.data
                })
            },
            // 编辑
            editorInfo() {
                uni.navigateTo({
                    url: "/pageTwo/me/adduser?familayData=" + JSON.stringify(this.info),
                })
            },
            //删除
            deldet(id) {
                let that = this
                uni.showModal({
                    title: '友情提示',
                    content: '确定删除该成员吗',
                    success: function(res) {
                        if (res.confirm) {
                            that.$model.getdelete({
                                id: id,
                            }).then(res => {
                                if (res.code != 0) return
                                that.$tools.msg("删除成功！");
                                that.getFamilyList()
                            })
                        } else if (res.cancel) {
                            that.$tools.msg("您已取消删除！");
                        }
                    }
                });
            },
            getFamilyList() {
                let that = this
                that.$model.getFamilyList({}).then(res => {
                    that.$store.commit("changeFamilay", res)
                    that.$store.dispatch("getUserInfo", {
                        familyid: res[0].familyid
                    })
                    uni.switchTab({
                        url: '/pages/me/me'
                    });
                }).catch(e => {})
            },
        },
    }
</script>

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

    .list-item {
        width: 100%;
        height: auto;
        text-align: center;
        margin: 10px 0 15px;
    }

    .item {
        background-color: #fff;
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
        border-radius: 10px;
        align-items: center;
        text-align: center;
        font-size: 32rpx;
        font-weight: 700;
        margin-bottom: 30rpx;
        line-height: 40rpx;

        text {
            width: 100%;
            font-size: 24rpx;
            display: block;
            color: #666;
            text-align: center;
            font-weight: 400;
        }

        view {
            width: 18%;
        }

        .time {
            width: 32% !important;
            font-size: 28rpx;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;

            image {
                width: 40rpx;
                height: 40rpx;
                margin-right: 5px;
            }

            text {
                width: 100%;
                font-size: 28rpx;
                margin-top: 3px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

    }

    // 
    .common {
        padding: 0 15px;
        min-height: calc(100vh - 90px);
        height: 100%;
    }

    .header {
        height: 90px;
        background: $mainColor;
        position: fixed;
        top: 0rem;
        left: 0;
        right: 0;
        display: flex;
        z-index: 99;
        padding: 0 10px;
        justify-content: space-between;

        .left {
            width: 100%;
            display: flex;
            justify-content: start;
            align-items: center;
            position: relative;

            .left_sm {
                text-align: left;
                color: #FFFFFF;
                position: absolute;
                left: 60px;
                top: 25px;
                right: 0;

                .name {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                text {
                    display: inline-block;
                    padding-right: 10px;
                    font-size: 14px;
                }
            }

            .type,
            .type2 {
                background: #fff;
                text-align: center;
                display: inline-block;
                padding: 0 3px !important;
                font-size: 12px !important;
                border-radius: 10px;
                line-height: initial;
                color: $btncolor;
            }

            .image1 {
                width: 50px;
                height: 50px;
                float: left;
                border-radius: 50%;
            }

            p {
                text-align: left;
                margin-top: 5px;
            }
        }

        .right {
            display: flex;
            align-items: center;
            color: #fff;
            text-align: right;
            font-size: 14px;

            .guanliyuan {
                border: 1px solid #fff;
                padding: 2px 6px;
                border-radius: 10px;
                font-size: 12px;
                margin-left: 10px;
            }
        }
    }

    .leftChild {
        width: 100% !important;
        padding: 10px 0 !important;

        view {
            min-width: auto !important;
        }
    }
</style>
