<template>
<div class="phone">
  <span @click="dialogVisible=true">编辑</span>
  <el-dialog
    title="修改手机号"
    :visible.sync="dialogVisible"
    :before-close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="手机号" prop="phonenumber">
        <el-input v-model="form.phonenumber" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="logCode" placeholder="请输入" size="small"></el-input>
        <el-button type="success" :disabled="count > 0" @click="countDown()" size="small">{{count == 0 ? "获取验证码" : count +'s'}}</el-button>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button @click="dialogVisible=false" size="small">取消</el-button>
      <el-button type="primary" @click="phoneEdit()" size="small">提交</el-button>
    </div>
  </el-dialog>
</div>
  
</template>

<script>
import md5 from 'js-md5'
export default {
  name: 'PhoneEdit',
  data() {
    return {
      dialogVisible: false,
      form: {
        phonenumber: ''
      },
      count:0,
      logCode:'',
      rules: {
        phonenumber:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号码',trigger: 'blur' }
        ]
      }
    };
  },
  props:['userInfo'],
  computed:{
  },
  watch:{

  },
  methods: {
    countDown() {
      this.$refs.form.validate( val => {
        if(!val) return this.$notify({
          title:'提示',
          message:'请填写手机号',
          type:'warning'
        })
        this.getPhoneCode()
        this.count = 5
        let timer = setInterval(() => {
          this.count--
          if(this.count == 0) clearInterval(timer)
        }, 1000);
      })
    },
    //获取手机验证码
    getPhoneCode() {
      if(this.form.phonenumber == false) return
      //获取验证码
      this.$api.requested({
          "classname": "common.usercenter.usercenter",
          "method": "updateUserMsg_getPassWord",
          "content": {
              "phonenumber":this.form.phonenumber,
          }
      }).then( res => {
        const h = this.$createElement;
        res.code === 1?this.$notify({
          title: '获取验证码成功!',
          message: h('i', { style: 'color: teal'}, res.msg)
        }):this.$notify({
          title: '失败',
          message: res.msg,
          type: 'error'
        })
      })
    },
    //修改手机号
    async phoneEdit() {
      if(this.logCode == false) {
        this.$notify({
          title:'提示',
          message:'请先获取验证码',
          type:'warning'
        })
        return
      }
      let res = await this.$api.requested({
        "classname": "common.usercenter.usercenter",
        "method": "updateUserMsg",
        "content": {
          "name":this.userInfo.name,
          "phonenumber":this.form.phonenumber,
          "password":md5(this.logCode)
        }
      })
      this.tool.showMessage(res,() => {
        this.$emit('phoneChange',this.form.phonenumber)
        this.dialogVisible = false
        this.logCode = ''
        this.form.phonenumber = ''
      })
    },
    handleClose() {
      this.dialogVisible = false
    }
  },
};
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }
  /deep/ .el-dialog__title {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }
  /deep/.el-dialog__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
  }
  /deep/.el-dialog__body .el-form-item {
    margin-bottom: 30px;
  }
  .el-form {
    width: 450px;
  }
  /deep/.el-dialog {
    width: 864px;
    height: 352px;
    background: #FFFFFF;
  }
  /deep/.el-form-item__content {
    display: flex;
  }
  /deep/.el-form-item__content .el-button {
    margin-left: 16px;
  }
  span {
    font-size: 14px;
    font-weight: 400;
    color: #3874F6;
    margin-left: 30px;
    cursor: pointer;
  }
</style>
