<template>
  <div class="page_getName">
    <div class="getNameTitle">
      <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
    </div>
    <div class="getNameBox">
      <div class="welcome">你好，欢迎使用酷医云</div>
      <div class="tips">接下来请完善信息，以便获取更精准的服务</div>
      <div class="problemBox">
        <span style="color:#F44746">*</span>
        <span class="problem">请问你的姓名是？</span>
      </div>
      <div class="inputBox">
        <van-field class="name" v-model="name" placeholder="请输入用户名" />
      </div>
      <div class="next" @click="setName()">下一步</div>
    </div>
  </div>
</template>

<script>
import "../../../styles/newStyle.scss";
import { setName } from "@/api/login";
import { setRem } from "@/libs/functionRem";

export default {
  data() {
    return {
      name: ""
    };
  },
  created() {
    setRem();
  },
  methods: {
    setName() {
      if (this.name.trim().length == 0) {
        this.$message.error("名字不能为空!");
        return;
      }
      let params = {
        name: this.name
      };
      setName(params).then(response => {
        if (response.data.state === 1) {
          this.$router.replace("/join");
        } else {
          this.$message.error(response.data.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page_getName {
  height: 100%;
  overflow: hidden;

  .getNameTitle {
    height: 3.125rem;
    line-height: 3.125rem;
    display: flex;
    align-items: center;
  }

  .jiantou {
    margin-left: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
  }

  .getNameBox {
    padding: 1rem 2rem 0;
  }

  .welcome {
    font-weight: bold;
    font-size: 1.125rem;
    color: #000;
  }

  .problemBox {
    margin-top: 2.625rem;
  }

  .tips {
    font-size: 0.75rem;
    margin-top: 0.875rem;
  }

  .problem {
    font-size: 0.75rem;
  }

  .inputBox {
    border-bottom: 1px solid #e8e8e8;
    margin-top: 1.25rem;
    .van-cell {
      padding: 10px 0.75rem;
    }
  }

  .next {
    width: 100%;
    height: 2.875rem;
    background: rgba(51, 138, 251, 1);
    box-shadow: 0px 1px 12px 0px rgba(51, 138, 251, 1);
    border-radius: 23px;
    text-align: center;
    line-height: 2.875rem;
    color: #fff;
    margin-top: 3.125rem;
    font-size: 1rem;
  }
}
</style>

<style lang="scss">
.page_getName{
 .inputBox{
   .van-field__control{
     font-size: 1rem;
   }
 } 
}
</style>
