<template>
<div>
    <div class="contentBox " >
      <img class="logo" :src="imgUrl" alt="">
      <h3>宝宝档案</h3>
      <div class="inputBox">
        <van-radio-group v-model="sex">
          <van-radio class='boy' @click="changeActi(1)" name="1">
            <span :class="{activity:activity==1}">男</span>
            <img
              slot="icon"
              :src="activity==1 ? bbdaIcon.boy2 : bbdaIcon.boy1"
            >
          </van-radio>
          <van-radio  class="girl" @click="changeActi(2)" name="2">
            <span :class="{activity:activity==2}">女</span>
            <img
              slot="icon"
              :src="activity==2 ? bbdaIcon.girl2 : bbdaIcon.girl1"
            >
          </van-radio>
        </van-radio-group>
      </div>
      <div class="inputBox">
        <div class="subName">宝宝昵称</div>
        <input type="text" @blur="fun"
            @focus="focus" v-model='baby_name' placeholder="请输入宝宝昵称" >
      </div>
      <div class="inputBox">
        <div class="subName">宝宝生日</div>
        <div @click="dateShow=true" class="btnShadow"> </div>
        <input type="text" v-model='birthday'  placeholder="请选择生日" >
        <!-- <span class="birthday" v-if="birthday&&birthday!='0000-00-00'" @click="dateShow=true">{{birthday}}</!-->
      </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 {bbdaIcon} from "../../util/imgUrl";
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:{},
        bbdaIcon:bbdaIcon,
        activity:'1',
        keyUp:false
      }
    },
    watch: {
    keyUp() {
      setTimeout(() => {
          if (!this.keyUp) {
            console.log(this.keyUp, 65);
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
          }
        }, 100);
      }
    },
    created() {
      this.$sa.track('ViewBabypage',{
      });
      this.userDesc=JSON.parse(localStorage.getItem('userDesc'))
      this.imgUrl = imgUrl
      if(this.userDesc.birthday=='0000-00-00'){
        this.birthday = null
      }else{
        this.birthday = this.userDesc.birthday
        this.currentDate = new Date(this.birthday)
      }
      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.activity = this.sex
      // console.log(this.$route.params.index)
      // this.getBannerListApi();
    },
    methods:{
      focus() {
      this.keyUp = true;
      console.log("focus");
    },
    fun() {
      this.keyUp = false;
      console.log("fun");
    },
      changeActi(name){
        // console.log(name)
        this.activity = name
      },
     putBabyInfo(){
      //  console.log(this.$common.dateFmt(new Date(this.currentDate),"yyyy/MM/dd"))
       this.$sa.quick('trackHeatMap',this.$refs.btn)
       if(this.baby_name==''){
         Toast('昵称不能为空')
         return
       }
       let json = {
         birthday:this.$common.dateFmt(new Date(this.currentDate),"yyyy/MM/dd"),
         sex:this.sex,
         baby_name:this.baby_name
       }
       putBabyInfoApi(json).then(res =>{
         Toast('保存成功')
         getUserDetailApi().then(res=>{
          localStorage.setItem('userDesc',JSON.stringify(res));
          if(this.$route.params.index==1){
            this.$router.push({
            name:"index"
           })
          }else{
            this.$router.push({
            name:"mine"
           })
          }
          
        })
       })
      },
      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 59*@toVw;
    text-align: center;
    .logo{width: 100*@toVw;}
  }
  .van-popup{
    width: 100%;
    .van-picker{width: 100%;}
  }
  .btn{
      width: 156*@toVw;height: 50*@toVw;background:#40A9FF;color: white;line-height:47*@toVw; border-radius: 4px;border-radius:23*@toVw; margin: 97*@toVw auto 0;
  }
  .inputBox{text-align:left;
  text-align: center;
  width: 258*@toVw;
  margin-top: 15*@toVw;
  position: relative;
  // line-height: 48*@toVw;
  .subName{color: #666666;}
  input{border: none;height: 40*@toVw;width: 258*@toVw;text-align: center;margin-top: 10*@toVw;
  border-radius: 19*@toVw;
  background: #F3F3F3;}
  .van-radio-group{height: 40*@toVw;
  display: flex;justify-content: space-between;
  span{color: #999999;}
  }
  .van-radio{display: inline-block;
   width: 100*@toVw;
   height: 38*@toVw;
   line-height: 38*@toVw;
   border-radius: 19*@toVw;
   background: #F3F3F3;
  }
  .girl{img{width: 29*@toVw;}}
  .boy{img{width: 24*@toVw;}}
  .girl .activity{color: #FBBCD8;}
  .boy .activity{color: #4A90E2;}
  .birthday{height: 40*@toVw;width: 258*@toVw;border-radius: 19*@toVw;background: #F3F3F3;display: block;line-height: 40*@toVw;margin-top: 10*@toVw;}
  .btnShadow{position: absolute;width: 258*@toVw;height: 60*@toVw;top:24*@toVw;}
  }
</style>