<template>
  <div class="app-container">
    <van-nav-bar title="个人信息" left-text="返回" left-arrow @click-left="$router.back()" />

    <van-form @submit="onSubmit">

      <van-field
          v-model="nickName"
          name="nickName"
          label="昵称"
          placeholder="请输入昵称"
          maxlength="10"
          clearable
          required
          :rules="rules.nickName"
      />
      <van-field
          v-model="phone"
          name="phone"
          label="手机号码"
          placeholder="请输入昵称"
          maxlength="11"
          clearable
          required
          :rules="rules.phone"
      />
      <van-field
          v-model="oldPwd"
          :type="showOldPwd ? 'text' : 'password'"
          name="oldPwd"
          label="原密码"
          placeholder="请输入原密码"
          :rules="rules.oldPwd"
          clearable
      >
          <template #right-icon>
              <van-icon :name="showOldPwd ? 'eye-o' : 'closed-eye'" @click="showOldPwd = !showOldPwd" />
          </template>
      </van-field>
      <van-field
          v-model="newPwd"
          :type="showNewPwd ? 'text' : 'password'"
          name="newPwd"
          label="新密码"
          placeholder="请输入新密码"
          :rules="rules.newPwd"
          clearable
      >
          <template #right-icon>
              <van-icon :name="showNewPwd ? 'eye-o' : 'closed-eye'" @click="showNewPwd = !showNewPwd" />
          </template>
      </van-field>

      <van-field
          v-model="confirmNewPwd"
          :type="showConfirmNewPwd ? 'text' : 'password'"
          name="confirmNewPwd"
          label="确认密码"
          placeholder="请再次输入新密码"
          :rules="rules.confirmNewPwd"
          clearable
      >
          <template #right-icon>
              <van-icon :name="showConfirmNewPwd ? 'eye-o' : 'closed-eye'" @click="showConfirmNewPwd = !showConfirmNewPwd" />
          </template>
      </van-field>

      <div style="margin: 26px;">
          <van-button round block type="info" size="small" native-type="submit">确定</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>

import Vue from 'vue';
import { Form, Field, NavBar, Icon, Button } from 'vant';

Vue.use(Form);
Vue.use(Field);
Vue.use(NavBar);
Vue.use(Icon);
Vue.use(Button);

export default {
  data() {
    return {
      openid: '',
      userid: "", //手机号
      nickName: '', // 昵称
      phone: '', // 手机号码
      oldPwd: "", //原密码
      newPwd: "", //新密码
      confirmNewPwd: "", //新密码
      showOldPwd: false,
      showNewPwd: false,
      showConfirmNewPwd: false,
          
      rules: {
        nickName: [
            { required: true, message: '请输入昵称' }
        ],
        phone: [
            { required: true, message: '请输入手机号码' },
            { trigger: 'onChange', pattern: /^1[3456789]\d{9}$/, message: '请输入正确格式的手机号码' },
        ],
        newPwd: [
            { trigger: 'onChange', validator: val => {
              if (!this.oldPwd) {
                return true;
              }
              return /^[-_a-zA-Z0-9]{6,16}?$/.test();
            }, message: '密码应为6-16位，可输入字母、数字、下划线' },
        ],
        confirmNewPwd: [
            { trigger: 'onChange', validator: val => {
                return this.newPwd === this.confirmNewPwd;
            } , message: '两次密码不一致' },
        ]
      },
    };
  },
  created() {
    this.openid = localStorage.getItem("openid");
    this.userid = localStorage.getItem("userid");

    let userinfo = JSON.parse(localStorage.getItem('userinfo'));
    if (userinfo) {
      this.nickName = userinfo.realname || '';
      this.phone = userinfo.phone || '';
    }
  },
  methods: {
    /**
     * 提交
     */
    onSubmit(values) {
      this.$http.post('editProfile&userid=' + this.userid + '&openid=' + this.openid, JSON.stringify(values))
          .then(resp => {
            if (!resp.data.success) {
              this.$notify(resp.data.message || '修改失败');
              return ;
            }

            this.$notify({
              type: 'success',
              message: resp.data.message || '修改成功'
            })
            // 覆盖本地userinfo
            if (resp.data.data && resp.data.data.id) {
              localStorage.setItem('userinfo', JSON.stringify(resp.data.data));
            }

          })
          .catch(() => {
            this.$notify('出错了，请稍后重试')
          })
    },

  }
};
</script>
<style scoped="less">
</style>