<template>
  <div>
    <!--标题-->
    <ToPBarNormal :title="title"></ToPBarNormal>
    <!--提示信息-->
    <div class="result-cont">
      <p style="padding:10px;text-align: center">更改邮箱需要短信验证。</p>
      <div  class="phone_edit">
        <group>
          <x-input title="邮箱" v-model="email" placeholder="请输入邮箱" is-type="email"></x-input>
        </group>
      </div>
      <div style="margin-top: 20px" class="login-exit" @click="_next">下一步</div>
    </div>
  </div>
</template>

<script>
  import ToPBarNormal from '../../../components/topBar/TopBarNormal'
  import {XInput, Group} from 'vux'

  export default {
    components: {
      ToPBarNormal,
      XInput,
      Group,
    },
    data() {
      return {
        title: '邮箱',
        email: ''
      }
    },
    methods: {
      //获取验证码
      _next() {
        if (this.email) {
          let myReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          if (myReg.test(this.email)) {
            this._ok();
          } else {
            this._msg('邮箱填写错误');
          }
        } else {
          this._msg('请输入邮箱');
        }
      },
      _ok() {
        let data = {
          email: this.email,
        };
        this.$store.dispatch('SystemManage/getEmailCode', data).then(() => {
          if (this.$store.state.SystemManage.success) {
            this.$router.push({path: '/sys/email_sms', query: {email: this.email}});
          } else {
            this._msg('验证码发送失败');
          }
        });
      },
      //提示
      _msg(msg) {
        this.$vux.toast.show({
          type: 'text',
          width: '10em',
          text: msg,
          time: 1000
        });
      },
    }
  }
</script>
