<template>
  <div>
    <div class="member-page">
      <div class="member-body">
        <div class="head-bg"></div>
        <div class="user-info">
          <div class="picture">
            <div class="inner">
                <img :src="mainData.picture"/>
            </div>
          </div>
          <div class="nick-name">{{mainData.name}}</div>
          <span class="mark-red">户主</span>
          <div class="member-list">
            <div class="figure" v-show="figureVisible">
                <img src="../../assets/images/figure.png" class="full-width" mode="widthFix"/>
                <div class="title">暂无添加家庭成员！</div>
            </div>
            <div>
              <ul class="nav-pills" v-show="!figureVisible">
                <li v-for="(item, index) in memberData" :key="index">
                  <div class="member-item" @click="goToUserDetail(item.userId, item.relationType)">
                    <div class="member-table">
                      <div class="cell picture">
                          <img :src="item.picture"/>
                      </div>
                      <div class="cell info">
                          <div class="name">{{item.name}}</div>
                          <div class="age">{{item.age}}</div>
                      </div>
                      <span class="editor">
                        <i class="glyphicon glyphicon-pencil"></i>
                      </span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="footer">
            <p class="text-center text-danger m-b" v-if="btnDisabled">家庭成员仅支持添加5位</p>
            <button class="btn-orange btn-block" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelCreate">添加家庭成员</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMemberByMainId } from '@/api/basic/basic'
import { getAgeByBirth } from '@/util/index'
import _iconMan from '@/assets/images/man.png'
import _iconWoman from '@/assets/images/woman.png'
import _iconBoy from '@/assets/images/boy.png'
import _iconGirl from '@/assets/images/girl.png'
import _iconOldwoman from '@/assets/images/oldwoman.png'
export default {
  name: 'member',
  data () {
    return {
      userId: parseInt(this.$route.query.userId),
      mainData: { // 户主信息
        id: '',
        name: '',
        picture: _iconMan
      },
      memberData: [], // 家庭成员信息
      figureVisible: false, // 海报提示
      btnDisabled: false // “添加家庭成员”按钮状态
    }
  },
  created () {
    this.getMemberByMainIdFn(this.userId) // 根据当前用户id获取家庭成员数据
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
  },
  methods: {
    getMemberByMainIdFn (id) {
      this.$Indicator.open()
      getMemberByMainId(id).then(res => {
        this.$Indicator.close()
        if (res.code === 0) {
          let that = this
          if (res.data.length > 0) {
            this.figureVisible = false
            if (res.data.length >= 5) {
              this.btnDisabled = true
            } else {
              this.btnDisabled = false
            }
          } else {
            this.figureVisible = true
          }
          res.data.forEach(item => {
            if (item.masterMark === 1) {
              that.mainData.id = item.userId
              that.mainData.name = item.name
              that.mainData.picture = item.sex === 1 ? _iconBoy : item.sex === 2 ? _iconGirl : _iconGirl
            } else {
              let picture = _iconBoy
              if (item.relationType === 1) { // 子女
                if (item.sex === 1) {
                  picture = _iconBoy
                } else if (item.sex === 2) {
                  picture = _iconGirl
                } else {
                  picture = _iconMan
                }
              } else if (item.relationType === 2) { // 配偶
                picture = _iconWoman
              } else if (item.relationType === 3) { // 父母
                if (item.sex === 1) {
                  picture = _iconMan
                } else if (item.sex === 2) {
                  picture = _iconOldwoman
                } else {
                  picture = _iconMan
                }
              }
              that.memberData.push({
                name: item.name,
                sex: item.sex,
                age: getAgeByBirth(item.birth),
                picture: picture,
                userId: item.userId,
                relationType: item.relationType
              })
            }
          })
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    goToUserDetail (_id, _type) { // 跳转至用户编辑页(id=成员id，type=成员角色 1=子女、2=配偶、3=父母)
      this.$router.push({
        path: '/member/edit',
        query: {
          memberId: this.mainData.id,
          type: _type,
          id: _id
        }
      })
    },
    handelCreate () { // 跳转至用户编辑页
      this.$router.push({
        path: '/member/edit',
        query: {
          memberId: this.mainData.id
        }
      })
    }
  }
}
</script>

<style scoped>
  .member-page .member-body {
    position: relative;
  }
  .member-page .member-body > .head-bg{
    background-color: #43d1be;
    height: 8em;
  }
  .member-page .member-body .user-info {
    text-align: center;
    background-color: #f4f6f7;
    position: relative;
    padding-top: 3em;
  }
  .member-page .member-body > .user-info > .picture {
    width: 8em;
    height: 8em;
    margin: 0 auto;
    padding: 1em;
    background-color: #fff;
    border-radius: 50%;
    left: 0;
    right: 0;
    top: -5em;
    position: absolute;
  }
  .member-page .member-body > .user-info > .picture .inner > img {
    width: 100%;
  }
  .member-page .member-body > .user-info > .nick-name {
    text-align: center;
    font-size: 1.2em;
    margin: 0.8em 0;
  }

  .member-list {
    margin-top: 2em;
    padding: 0 0.5em;
    min-height: 10em;
    overflow: hidden;
  }
  .member-list ul > li {
    width: 50%;
    float: left;
    margin-left: 0;
    margin-bottom: 1em;
  }

  .member-list ul > li .member-item{
    padding: 0.5em;
    background-color: #fff;
    border-radius: 5px;
    margin: 0 0.5em ;
    position: relative;
    overflow: hidden;
  }

  .member-table {
    display: table;
    width: 100%;
  }
  .member-table > .cell {
    display: table-cell;
    vertical-align: middle;
  }
  .member-table > .cell.picture {
    width: 4em;
    height: 4em;
    background-color: #a4d1f0;
    border-radius: 5px;
  }
  .member-table > .cell.picture > img {
    width: 4em;
    height: 4em;
  }
  .member-table > .cell.info {
    text-align: left;
    padding-left: 0.5em;
  }
  .member-table > .cell.info .name {
    font-size: 1.1em;
    max-width: 100%;
    white-space: nowrap;
  }
  .member-table > .cell.info .age {
    padding-right: 1.5em;
  }
  .member-table > .editor {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    display: inline-block;
    background-color: #43d1be;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    border-radius: 50%;
    color: #fff;
    text-align: center;
  }

  .member-page .member-body > .user-info > .footer {
    padding: 1em;
  }

  .figure {
    width: 20em;
    margin: 0 auto;
  }
  .figure .title {
    font-size: 1.1em;
    text-align: center;
  }
</style>