<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple">

      </div></el-col>
      <el-col :span="16"><div class="grid-content bg-purple">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="userName">
            {{ruleForm.userName}}
          </el-form-item>
          <el-form-item label="用户类型" prop="">
            <span>个人</span>
          </el-form-item>
          <el-form-item label="手机号" prop="phonenumber">
            {{ruleForm.phonenumber}}
          </el-form-item>
          <el-form-item label="绑定邮箱" prop="email">
            {{ruleForm.email}}  <span style="color: #1482f0" @click="toemail">去绑定>></span>
          </el-form-item>
          <el-form-item label="认证信息" prop="userName">
            <span style="color: #1482f0" @click="toauthentication">去实名认证>>>></span>
          </el-form-item>
        </el-form>
      </div></el-col>
    </el-row>

    <!--绑定邮箱-->
    <el-dialog
      title="邮箱绑定"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-form :model="EmailForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="EmailForm.email" autocomplete="off" placeholder="请输入绑定的邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="text" v-model="EmailForm.code" placeholder="请输入验证码"></el-input>
          <button type="primary" @click="docode(EmailForm.email)">发送验证码</button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="yes(EmailForm)">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {linkemail, sendcode} from "@/api/authentication/message";

export default {
    name: "Easymessage",
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        ruleForm:{},
        EmailForm:{},
        dialogVisible: false
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      //绑定邮箱
      toemail(){
        this.dialogVisible=true
      },
      //关闭绑定邮箱对话框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //发送邮箱验证码
      docode(email){
        sendcode(email).then(response=>{
          alert(response.data)
        })
      },
      //提交邮箱绑定
      yes(EmailForm){
        linkemail(EmailForm).then(response=>{
          if (response.code===200){
            this.dialogVisible=false
          }
        })
      },
      //去实名认证
      toauthentication(){
        this.$router.push("/authentication/index")
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
