<template>
  <div class="mask-box" v-if="isShow">
    <!-- 添加宝宝 -->
    <div class="content-box add-baby-box" v-if="block === 1 && newBabyInfo">
      <img v-if="babyList.length > 0" class="close" @click="close" src="../../assets/images/body-util/icon_close.png" />
      <div class="title">{{newBabyInfo.id ? '添加成长记录' : '添加宝宝'}}</div>
      <div v-if="newBabyInfo.id" class="info-box clearfix">
        <div class="age fr">{{newBabyInfo.birthday}}</div>
        <div class="name">
          {{newBabyInfo.name}}
          <img v-if="newBabyInfo.gender === 1" src="../../assets/images/body-util/icon_boy.png">
          <img v-if="newBabyInfo.gender === 2" src="../../assets/images/body-util/icon_girl.png">
        </div>
      </div>
      <div v-else>
        <input type="text" placeholder="请输入宝宝姓名" v-model="newBabyInfo.name">
        <div class="sex-box clearfix">
          <div class="sex fl" :class="{'boy': newBabyInfo.gender === 1}" @click="newBabyInfo.gender = 1"><img src="../../assets/images/body-util/icon_boy.png">男宝宝</div>
          <div class="sex fl" :class="{'girl': newBabyInfo.gender === 2}" @click="newBabyInfo.gender = 2"><img src="../../assets/images/body-util/icon_girl.png">女宝宝</div>
        </div>
        <picker mode="date" @change="changeBirthday" :end="end">
          <input type="text" placeholder="点击选择出生日期" disabled v-model="newBabyInfo.birthday">
        </picker>
      </div>

      <div class="label">记录时间</div>
      <picker mode="date" @change="changeNowDate" :end="end" :value="newBabyInfo.recordDate">
        <div class="value icon">{{newBabyInfo.recordDate}}</div>
      </picker>

      <div class="label">宝宝身高</div>
      <picker mode="selector" :range="heightArr" range-key="text" @change="changeHeight">
        <div class="value">{{newBabyInfo.heightText}}</div>
      </picker>

      <div class="label">宝宝体重</div>
      <picker mode="selector" :range="weightArr" range-key="text" @change="changeWeight">
        <div class="value">{{newBabyInfo.weightText}}</div>
      </picker>

      <div class="label">宝宝头围</div>
      <picker mode="selector" :range="headerArr" range-key="text" @change="changeHead">
        <div class="value">{{newBabyInfo.headText}}</div>
      </picker>

      <div class="submit" @click="submit">
        <img src="../../assets/images/button_bg.png">
        <div class="text">确定</div>
      </div>
    </div>

    <!-- 切换宝宝 -->
    <div class="content-box baby-list-box" v-if="block === 2">
      <img class="close" @click="close" src="../../assets/images/body-util/icon_close.png" />
      <div class="title">切换宝宝</div>
      <div class="scroll-list">
        <div
          v-for="(item, key) in babyList"
          :key="key"
          @click="checkBaby(item.id)"
          class="baby-list">
          <div class="check" :class="{'active': item.id === babyId}"></div>
          <div class="name">
            {{item.name}}
            <img v-if="item.gender === 1" src="../../assets/images/body-util/icon_boy.png">
            <img v-if="item.gender === 2" src="../../assets/images/body-util/icon_girl.png">
          </div>
          <div class="age">{{item.babyAge}}</div>
        </div>
      </div>
      <div class="submit" @click="showModel(1, true)">
        <div class="text">添加宝宝</div>
      </div>
    </div>

    <!--指导1 -->
    <div class="content-box guide-box-1" v-if="block == 3">
      <div class="title">宝宝成长工具小科普</div>
      <img class="img" src="../../assets/images/body-util/guide_img_1.png">
      <div class="content">
        利用生长发育曲线图对宝宝的生长发育指标进行定期的、连续的测量，最好在每月差不多的日子进行测量，从而动态观察生长的趋势，及早发现生长迟缓现象，采取措施，促进生长发育。
      </div>
      <div class="index">1/2</div>
      <div class="submit" @click="block = 4">
        <img src="../../assets/images/body-util/button_bg.png">
        <div class="text">下一步</div>
      </div>
    </div>

    <!--指导2 -->
    <div class="content-box guide-box-2" v-if="block == 4">
      <div class="guide-tips-1">点击可切换数据维度</div>
      <img class="guide-img-1" src="../../assets/images/body-util/guide_img_2.png">
      <img class="guide-img-2" src="../../assets/images/body-util/guide_img_3.png">
      <div class="guide-tips-2">点击可切换时间范围</div>
      <div class="index">2/2</div>
      <div class="submit" @click="showModel(1, true)">
        <img src="../../assets/images/body-util/button_bg.png">
        <div class="text">知道了</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['isShow', 'block', 'isNew', 'babyId', 'babyInfo', 'babyList'],
  watch: {
    block (val) {
      if (val === 1) {
        this.newBabyInfo = {...this.babyInfoTpl}
        if (!this.isNew) {
          this.newBabyInfo = {...this.newBabyInfo, ...this.babyInfo}
        }
      }
    }
  },
  data () {
    return {
      // 提交数据
      newBabyInfo: null,
      babyInfoTpl: {
        id: '',
        name: '',
        gender: 1,
        birthday: '',
        recordDate: '',
        height: '',
        weight: '',
        head: '',
        heightText: '',
        weightText: '',
        headText: ''
      },
      // 选择框数据
      heightArr: [
        {
          value: 10,
          text: '10厘米'
        },
        {
          value: 15,
          text: '15厘米'
        },
        {
          value: 20,
          text: '20厘米'
        },
        {
          value: 25,
          text: '25厘米'
        }
      ],
      weightArr: [
        {
          value: 4.9,
          text: '4.9公斤'
        },
        {
          value: 5.0,
          text: '5.0公斤'
        },
        {
          value: 5.1,
          text: '5.1公斤'
        },
        {
          value: 5.2,
          text: '5.2公斤'
        }
      ],
      headerArr: [
        {
          value: 10,
          text: '10厘米'
        },
        {
          value: 15,
          text: '15厘米'
        },
        {
          value: 20,
          text: '20厘米'
        },
        {
          value: 25,
          text: '25厘米'
        }
      ],
      end: ''
    }
  },
  created () {
    let time = new Date()
    let month = time.getMonth() + 1
    let day = time.getDate()
    let nowData = time.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day)
    this.end = nowData
    this.babyInfoTpl.recordDate = nowData
  },
  methods: {
    // 显示弹窗
    showModel (block, isNew = false) {
      this.$emit('showModel', {block, isNew})
    },

    // 提交数据
    submit () {
      let { birthday, name, head, height, weight, recordDate } = this.newBabyInfo

      if ([birthday, name, head, height, weight, recordDate].some(item => { return item === '' })) {
        wx.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return false
      }
      this.close()
      this.$emit('submit', this.newBabyInfo)
    },

    // 切换宝宝
    checkBaby (id) {
      this.close()
      this.$emit('checkBaby', {id})
    },

    // 关闭弹窗
    close () {
      this.$emit('showModel', {block: '', isNew: false, isShow: false})
    },
    changeBirthday (e) {
      this.newBabyInfo.birthday = e.mp.detail.value
    },
    changeNowDate (e) {
      this.newBabyInfo.recordDate = e.mp.detail.value
    },
    changeHeight (e) {
      let {text, value} = this.heightArr[e.mp.detail.value]
      this.newBabyInfo.height = value
      this.newBabyInfo.heightText = text
    },
    changeWeight (e) {
      let {text, value} = this.weightArr[e.mp.detail.value]
      this.newBabyInfo.weight = value
      this.newBabyInfo.weightText = text
    },
    changeHead (e) {
      let {text, value} = this.headerArr[e.mp.detail.value]
      this.newBabyInfo.head = value
      this.newBabyInfo.headText = text
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.mask-box{
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  .content-box{
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 20px 26px 10px;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    .close{
      z-index: 99;
      position: absolute;
      top: 0;
      right: 0;
      padding: 15px;
      width: 15px;
      height: 15px;
    }
    .title{
      margin: 0 0 20px;
      line-height: 26px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      color: #000;
    }
    .submit{
      position: relative;
      margin-top: 24px;
      width: 100%;
      height: 40px;
      color: #FFF;
      img{
        width: 100%;
        height: 100%;
      }
      .text{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        line-height: 40px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
      }
    }
  }
}
.add-baby-box{
  width: 240px;
  height: auto;
  input{
    margin: 0 0 20px;
    line-height: 40px;
    font-size: 13px;
    border-bottom: solid 1px #C3C3C3;
  }
  .label{
    padding: 6px 0 4px;
    font-size: 12px;
    color: #868686;
  }
  .value{
    position: relative;
    padding: 4px 12px;
    width: 100%;
    height: 28px;
    line-height: 20px;
    font-size: 13px;
    border-radius: 4px;
    box-sizing: border-box;
    background: #F4F4F4;
    color: #404040;
    &.icon::before{
      content: '';
      position: absolute;
      top: 50%;
      right: 10px;
      margin-top: 3px;
      transform: translate(0, -50%);
      border: solid 5px transparent;
      border-top-color: #676767;
    }
  }
  .sex-box{
    .sex{
      margin: 0 0 20px;
      width: 50%;
      height: 28px;
      line-height: 28px;
      border-radius: 4px;
      font-size: 13px;
      text-align: center;
      color: #404040;
      img{
        display: inline-block;
        margin: 6px 5px 6px 0;
        width: 16px;
        height: 16px;
        vertical-align: top;
      }
      &.boy{
        background: #D8F6FF
      }
      &.girl{
        background: #f8c5d0
      }
    }
  }
  .info-box{
    margin: 0 0 10px;
    line-height: 30px;
    font-size: 13px;
    border-bottom: solid 1px #C3C3C3;
    .name{
      font-weight: 500;
      color: #000;
      img{
        display: inline-block;
        margin: 7px 0 7px 8px;
        width: 16px;
        height: 16px;
        vertical-align: bottom;
      }
    }
    .age{
      font-size: 11px;
      color: #999999;
    }
  }
}
.baby-list-box{
  width: 240px;
  height: auto;
  .scroll-list{
    max-height: 350px;
    overflow: auto;
  }
  .baby-list{
    position: relative;
    margin-bottom: 6px;
    padding: 10px @spacing 10px;
    border-radius: 2px;
    box-sizing: border-box;
    background: #F6F5F5;
    .check{
      position: absolute;
      top: 50%;
      right: @spacing;
      transform: translate(0, -50%);
      width: 12px;
      height: 12px;
      border: solid 1px #ADADAD;
      border-radius: 50%;
      background: #fff;
      overflow: hidden;
      box-sizing: border-box;
      &.active{
        border: 0 none;
        background: url('../../assets/images/body-util/icon_checkbox.png');
        background-size: 100% auto;
      }
    }
    .name{
      margin-bottom: 8px;
      font-weight: 500;
      color: #000000;
      img{
        display: inline-block;
        margin: 2px 0 2px 5px;
        width: 16px;
        height: 16px;
        vertical-align: top;
      }
    }
    .age{
      font-size: 11px;
      color: #999999;
    }
  }
  .submit{
    border: solid 1px @themeColor;
    border-radius: 20px;
    .text{
      color: @themeColor;
    }
  }
}
.mask-box .guide-box-1, .mask-box .guide-box-2{
  top: 10%;
  padding: 20px 40px 10px;
  width: 100%;
  color: #fff;
  background: none;
  .title{
    margin-bottom: 24px;
    color: #fff;
  }
  .img{
    margin: 0 auto 30px;
    width: 125px;
    height: 125px;
  }
  .content{
    margin-bottom: 62px;
    line-height: 20px;
    font-size: 15px;
    letter-spacing: 2px;
  }
  .index{
    margin-bottom: 8px;
    font-size: 12px;
    text-align: center;
  }
  .submit{
    margin: auto;
    width: 132px;
    height: 40px;
  }
}
.mask-box .guide-box-2{
  top: 0;
  .guide-tips-1{
    margin: 30px auto 12px;
    line-height: 20px;
    text-indent: 30px;
    text-align: center;
  }
  .guide-tips-2{
    margin: 0 auto 36px;
    line-height: 20px;
    text-indent: 60px;
    text-align: center;
  }
  .guide-img-1{
    margin: 0 auto 210px;
    width: 40px;
    height: 50px;
  }
  .guide-img-2{
    margin: 0 auto 6px;
    width: 56px;
    height: 52px;
  }
}
</style>
