<template>
<div>
    <div class="contentBox " >
      <img class="logo" :src="imgUrl" alt="">
      <div class="inputBox">
        <span class="subName">宝宝昵称</span><input type="text" v-model='baby_name' placeholder="请输入宝宝昵称" >
      </div>
      <div class="inputBox">
        <span class="subName">宝宝生日</span><span @click="dateShow=true">{{birthday}}</span>
      </div>
      <div class="inputBox" >
        <span class="subName">宝宝性别</span>
        <van-radio-group v-model="sex">
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
      </div>
      <div class="btn" ref="btn" @click="putBabyInfo">保存</div>
    </div>
    <van-popup v-model="dateShow" position="bottom">
      <van-datetime-picker
      @confirm="dateConfirm"
      @cancel='dateShow=false'
        v-model="currentDate"
        type="date"
      />
    </van-popup>
</div>

</template>

<script>
  import {
  bannerListApi,
  putBabyInfoApi,
  getUserDetailApi
} from "../../service/api";
import imgUrl from "../../assets/bbda.png";
import { DatetimePicker,Popup,RadioGroup, Radio, Toast } from 'vant';
  export default {
    name: "bbda",
    components:{
      [DatetimePicker.name]:DatetimePicker,
      [Popup.name]:Popup,
      [RadioGroup.name]:RadioGroup,
      [Radio.name]:Radio,
    },
    data(){
      return{
        medList:[],
        imgUrl:imgUrl,
        dateShow:false,
        currentDate: new Date(),
        birthday:"",
        sex:'1',
        baby_name:"",
        userDesc:{}
      }
    },
    created() {
      this.$sa.track('ViewBabypage',{
        
      });
      this.userDesc=JSON.parse(localStorage.getItem('userDesc'))
      console.log(imgUrl)
      this.imgUrl = imgUrl
      if(this.userDesc.birthday){
        this.birthday = this.userDesc.birthday
        this.currentDate = this.userDesc.birthday
      }else{
        this.birthday = this.currentDate.toLocaleDateString()
      }
      if(this.userDesc.baby_name){
        this.baby_name = this.userDesc.baby_name
      }
      this.userDesc.sex? this.sex = this.userDesc.sex.toString():this.sex='1'

      // this.getBannerListApi();
    },
    methods:{
     putBabyInfo(){
       console.log(this.birthday)
       this.$sa.quick('trackHeatMap',this.$refs.btn)
       if(this.baby_name==''){
         Toast('昵称不能为空')
         return
       }
       let json = {
         birthday:this.birthday,
         sex:this.sex,
         baby_name:this.baby_name
       }
       putBabyInfoApi(json).then(res =>{
         Toast('保存成功')
         getUserDetailApi().then(res=>{
          localStorage.setItem('userDesc',JSON.stringify(res));
        })
       })
      },
      goMed(index){
        this.showObj.audioIndex = index;
        this.showObj.show = true
      },
      dateConfirm(val){
        this.dateShow = false
        this.birthday = this.currentDate.toLocaleDateString()
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  *{margin: 0;}
  .child-view{background: white;}
  .contentBox{
    padding: 30*@toVw;
    text-align: center;
    .logo{width: 100*@toVw;}
  }
  .van-popup{
    width: 100%;
    .van-picker{width: 100%;}
  }
  .btn{
      width: 100%;height: 47*@toVw;background:#4A90E2;color: white;line-height:47*@toVw; border-radius: 4px;border-radius:23*@toVw; margin-top: 97*@toVw;
  }
  .inputBox{height: 48*@toVw;border-bottom:1px solid #CCCCCC;text-align:left;display: flex;
  justify-content: flex-start;
  line-height: 48*@toVw;
  .subName{margin-right: 68*@toVw}
  input{border: none;height: 40*@toVw;width: 140*@toVw;}
  .van-radio-group{height: 40*@toVw;}
  .van-radio{display: inline-block;}
  }
</style>