<template>
<div>
  <van-nav-bar
    title="基本资料"
    left-arrow
    @click-left="$router.back(-1)"
  />
  <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
    <van-field type="input"  :rules="[{ required: true , message:'请输入用户昵称' }]" v-model="user.nickName" placeholder="请输入用户昵称">
      <template #label>
        <H4 style="margin-left: 5px">*用户昵称</H4>
      </template>
    </van-field>
    <van-field type="input" v-model="user.phonenumber" :rules="[{ required: true , message:'请输入手机号码'},{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/ , message:'请输入手机号码'}]" placeholder="请输入手机号码">
      <template #label>
        <H4 style="margin-left: 5px">*手机号</H4>
      </template>
    </van-field>
    <van-field type="input"  :rules="[{ required: true, message: '邮箱地址不能为空' }]" prop="email" v-model="user.email" placeholder="请输入邮箱">
      <template #label>
        <H4 style="margin-left: 5px">*邮箱</H4>
      </template>
    </van-field>
    <van-field name="radio" label="性别">
      <template #label>
        <H4 style="margin-left: 5px">*性别</H4>
      </template>
      <template #input>
        <van-radio-group v-model="user.sex" direction="horizontal">
          <van-radio name="0">男</van-radio>
          <van-radio name="1">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>
  </van-cell-group>
  <van-row style="text-align: center;margin-top: 40px">
    <van-button color="#1D6FE9" style="border-radius: 6px;width: 90%;margin: 0 auto" @click="submit">完成</van-button>
  </van-row>
</div>
</template>

<script>
    import onlineHomeIndex from "../onlineHomeIndex";
    import {updateUserProfile,getUserProfile} from "../../api/onlineHome/my";

    export default {
      components: {
        onlineHomeIndex
      },
        name: "basicInformation",
      data() {
        return {
          user: {
            sex:0
          },
        };
      },
      created() {
        this.getUser();
      },
      methods: {
        getUser() {
          getUserProfile().then(response => {
            this.user = response.data;
          });
        },
        submit() {
          console.log(this.user)
          let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
          if (this.user.nickName ==null || this.user.nickName == "") {
            this.$dialog.alert({
              message: '用户昵称不能为空',
            });
            return false;
          }
          if (this.user.phonenumber ==null || this.user.phonenumber == "") {
            this.$dialog.alert({
              message: '手机号不能为空',
            });
            return false;
          }
          if (!myreg.test(this.user.phonenumber)) {
            this.$dialog.alert({
              message: '手机号格式不正确',
            });
            return false;
          }
          if (this.user.email ==null || this.user.email == "") {
            this.$dialog.alert({
              message: '邮箱不能为空',
            });
            return false;
          }
          updateUserProfile(this.user).then(response => {
            let _this =this
            this.$toast({
              icon: 'success', // 找到自己需要的图标
              message: '修改成功',
              duration:"1000",
              onClose:function(){
                _this.$router.back(-1);
              }
            })
          });
        },
      }
    }
</script>

<style scoped>

</style>
