<template>
  <view class="common">
    <view class="add" @click="addInfo('add')">
      <icon class="iconfont icon-tianjia"></icon>添加成员
    </view>
    <view class="box" v-if="familayList.lenght!=0">
      <view class="list" v-for="(item ,index) in familayList" :key="index" @click="datail(item.id)">
        <image :src="item.headimg" class="image1" />
        <view class="left">
          <view class="title">{{item.name?item.name:""}}</view>
          <view class="title2">
            <text>{{item.sex==0?'未知':item.sex==1?'男':'女'}}</text>
            <text>{{item.mage?item.mage:'0岁'}}</text>
            <text>{{item.type}}</text>
          </view>
          <view class="title2">最后测量时间：{{item.lasthearttime||'-'}}</view>
        </view>
      </view>
    </view>
    <view v-else>
      没有数据了！
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        visible: false,
        ranklist: [],
      }
    },
    computed: {
      ...mapState(["familayList", "user", "appTheme"])
    },
    onLoad() {
      // 导航栏颜色
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.appTheme,
      })
    },
    methods: {
      //添加
      addInfo(type) {
        uni.navigateTo({
          url: "/pageTwo/me/adduser?type=${type}"
        })
      },
      //查看 
      datail(id) {
        uni.navigateTo({
          url: `/pageTwo/me/detail?id=` + id,
        })
      },
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .common {
    padding: 15px;
    height: calc(100vh - 30px);
  }

  .add {
    width: 135px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    margin-bottom: 10px;
    color: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    background: $btncolor;
  }

  .list {
    width: auto;
    background: #fff;
    display: flex;
    border-radius: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    padding: 10px 15px;
    font-size: 14px;
    align-items: center;

    .image1 {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      margin-right: 15px;
    }
  }

  .left {
    width: 70%;

    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .title2 {
      margin-top: 5px;
      font-size: 12px;
      color: #999;

      text {
        margin-right: 10px;
      }
    }
  }
</style>
