<template>
  <view class="common">
    <view class="header" v-if="info" :style="{background:appTheme}">
      <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" @click="clickItemMethod(item)">
            <view class="time">
              <icon class="t-icon t-icon-shijian-mianxing-0"></icon>
              <text>{{item.createtime}}</text>
            </view>
            <view>{{item.weight}}<text>体重</text></view>
            <view>{{item.bmi}}<text>BMI</text></view>
            <view>{{item.fat_r}}<text>脂肪率</text></view>
            <icon class="iconfont icon-arrow-right"></icon>
          </view>
        </view>
        <view class="endtext mb-15" 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", "appTheme"])
    },
    onLoad(option) {
      // 导航栏颜色
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.appTheme,
      })
      // 
      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 => {})
      },
      // 详情
      clickItemMethod(item) {
        uni.navigateTo({
          url: "/pageTwo/me/info?index=" + JSON.stringify(item)
        })
      }
    },
  }
</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>
