<template>
  <view class="family-member" :class="{'family-member--elder':$uiStyle==='elder'}">
    <view class="header">
      <view class="title">成员信息</view>
      <image class="icon" mode="aspectFit" src="/static/images/my/add.png" @click="addMember" />
    </view>
    <view class="content">
      <uni-swipe-action>
        <uni-swipe-action-item
          v-for="(item, index) in memberList"
          :key="index"
          :autoClose="false"
          :right-options="options"
          @click="onClick($event, item)">
          <view class="member-info">
            <view class="name">{{item.name}}</view>
            <view class="relation">{{item.hzRelation}}</view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
  </view>
</template>

<script>
import { getFamilyMemberList, deleteFamilyMember } from '@/api/family';

export default {
  name: "familyMember",
  components: {},
  props: {},
  data() {
    return {
      userInfo: {},
      curDoorplateCode: '',
      options:[
        { text: '编辑', style: { backgroundColor: '#007aff' } }, 
        { text: '删除', style: { backgroundColor: '#dd524d' } }
      ],
      memberList: [],
      canEdit: false
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo') || {};
    const globalData = getApp().globalData;
    if (globalData.doorplateInfo.code) {
      this.curDoorplateCode = globalData.doorplateInfo.code;
    } else {
		  this.curDoorplateCode = globalData.doorInfo.baseInfo.doorplateCode;
    }
    this.getFamilyMemberList();
  },
  methods: {
    getFamilyMemberList () {
      const data = {
        doorplateCode: this.curDoorplateCode,
        userInfoId: this.userInfo.uuid
      }
      getFamilyMemberList(data).then(res =>{
        this.canEdit = res.data.memberFlag;
        this.memberList = res.data.memberSimpleVos;
      })
    },
    addMember () {
      uni.navigateTo({
        url: '/subPages/pages/familyMember/familyMemberAdd'
      });
    },
    onClick(event, item){
      if (event.index === 0) {
        uni.navigateTo({
          url: `/subPages/pages/familyMember/familyMemberUpdate?userId=${item.id}`
        });
      } else if (event.index === 1) {
        this.deleteMember(item);
      }
    },
    deleteMember (val) {
      const data = {
        userInfoId: this.userInfo.uuid,
        id: val.id
      }
      deleteFamilyMember(data).then(res => {
        this.getFamilyMemberList();
      })
    }
  },
} 
</script>

<style lang="scss" scoped>
.family-member {
  height: 100%;
  .header {
    height: 40px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 15px;
      width: calc(100% - 50px);
    }
    .icon {
      width: 20px;
      height: 20px;
    }
  }
  .content {
    height: calc(100% - 44px);
    background-color: #fff;
    overflow: auto;
    .member-info {
      width: 100%;
      padding: 10px 15px;
      background-color: #fff;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        // #ifdef MP-WEIXIN
        width: calc(100% - 90px);
        // #endif
        // #ifdef MP-ALIPAY
        width: calc(100% - 65px);
        // #endif
        font-size: 15px;
      }
      .relation {
        width: 60px;
        padding: 3px 2px;
        border-radius: 5px;
        background-color: #f67934;
        opacity: 0.4;
        text-align: center;
        font-size: 14px;
        margin-right: 30px;
      }
    }
  }
}
.family-member--elder {
  .header {
    height: calc(36px * $zlb-elder-font-scale);
    .title {
      font-size: calc(15px * $zlb-elder-font-scale);
      width: calc(100% - 50px);
    }
    .icon {
      width: calc(20px * $zlb-elder-font-scale);
      height: calc(20px * $zlb-elder-font-scale);
    }
  }
  .content {
    height: calc(100% - (36px * $zlb-elder-font-scale));
    .member-info {
      .name {
        font-size: calc(15px * $zlb-elder-font-scale);
      }
      .relation {
        width: calc(50px * $zlb-elder-font-scale);
        font-size: calc(11px * $zlb-elder-font-scale);
        margin-right: 30px;
      }
    }
  }
}
</style>