<template>
  <div class="header-box">
    <!-- 信息 -->
    <div class="baby-info clearfix">
      <div class="btn-box fr clearfix">
        <div class="add-body fl" @click="showModel(1, true)">添加宝宝</div>
        <img class="check-body fl" @click="showModel(2)" src="../../assets/images/body-util/icon_check.png" mode="heightFix">
        <img class="explain fl" @click="toExplain" src="../../assets/images/body-util/explain.png" mode="heightFix">
      </div>
      <div class="info-box fl">
        <div class="name">
          {{babyInfo && babyInfo.name || '--'}}
          <img v-if="babyInfo && babyInfo.gender === 1" src="../../assets/images/body-util/icon_boy.png">
          <img v-if="babyInfo && babyInfo.gender === 2" src="../../assets/images/body-util/icon_girl.png">
        </div>
        <div class="age">{{babyInfo && babyInfo.babyAge || '--'}}</div>
      </div>
    </div>
    <!-- 标题 -->
    <div class="title-box clearfix">
      <div class="add-log fr" @click="showModel(1)">添加记录</div>
      <div class="title"><span></span>数据详情</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['babyInfo'],
  data () {
    return {
    }
  },
  methods: {
    // 显示弹窗
    showModel (block, isNew = false) {
      this.$emit('showModel', {block, isNew})
    },

    // 跳转说明页
    toExplain () {
      wx.navigateTo({
        url: '/pages/explain/main'
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.btn-add(){
  padding: 0 10px;
  width: 85px;
  height: 24px;
  line-height: 22px;
  border-radius: 14px;
  border: solid 1px @themeColor;
  font-size: 12px;
  text-align: center;
  box-sizing: border-box;
}
.baby-info{
  padding: @spacing 0;
  border-bottom: solid 1px #DDDDDD;
  .info-box{
    .name{
      margin: 0 0 10px 0;
      height: 24px;
      line-height: 24px;
      font-size: 18px;
      font-weight: 500px;
      color: #000;
      img{
        display: inline-block;
        margin: 4px 0 4px 8px;
        width: 16px;
        height: 16px;
        vertical-align: middle;
      }
    }
    .age{
      height: 20px;
      line-height: 20px;
      font-size: 11px;
      color: #999999;
    }
  }
  .btn-box{
    margin: 13px auto;
    .add-body{
      .btn-add();
      margin-left: 10px;
      color: @themeColor;
    }
    .check-body, .explain{
      margin: 2px 0 2px 10px;
      width: auto;
      height: 20px;
    }
  }
}
.title-box{
  margin: 10px 0 @spacing;
  .title{
    height: 28px;
    line-height: 28px;
    font-size: 18px;
    font-weight: 500;
    span{
      display: inline-block;
      margin: 8px 8px 8px 0;
      width: 5px;
      height: 12px;
      background: #AFBEF2;
      vertical-align: middle;
    }
  }
  .add-log{
    .btn-add();
    margin: 2px 0;
    background: @themeColor;
    color: #fff;
  }
}
</style>
