<!-- 验证码登录 -->
<template>
  <div v-loading="loading">
    <el-form ref="resetForm" class="login-form" :model="resetForm" :rules="loginFormRules">
      <el-form-item class="area-code-warp" prop="loginId">
        <el-input class="phone-code" size="large" placeholder="请输入手机号" v-model="resetForm.loginId">
          <template slot="prepend">
            <div class="area-code-container" @click="showArea = !showArea">
              <div class="area-code-number">{{ resetForm.mobileAreaCode }}</div>
              <i :class="['el-icon-caret-bottom', { reg180: showArea }]"></i>
            </div>
          </template>
        </el-input>
        <EreaIndexBar :indexData="areaCodeData" :show="showArea" class="choose-area-content" @chooseItem="chooseAreaItem" :currentAreaCode="resetForm.areaName"></EreaIndexBar>
      </el-form-item>
      <el-form-item prop="code">
        <div class="verify-code-warp">
          <el-input v-model="resetForm.code" class="verify-left" size="large" prefix-icon="el-icon-key" placeholder="请输入验证码"></el-input>
          <div class="verify-code">
            <el-button type="primary" size="large" :disabled="!canGetCode || isGettingCode" @click="getCode('resetForm')">
              {{ isGettingCode ? seconds + ' s' : '获取验证码' }}
            </el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item prop="loginPwdOriginal">
        <el-input size="large" v-model="resetForm.loginPwdOriginal" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" size="large" class="login-button" @click="resetPassword('resetForm')">确定修改</el-button>
    <!-- 服务协议以及隐私协议 -->
    <CheckAgreement ref="CheckAgreement" v-if="!hidenAgreement" @changeOpinion="changeOpinion" :consentCheck="consentCheck" />
    <!-- 返回登录 -->
    <GoBackLogin @gobackLogin="gobackLogin" />
  </div>
</template>
  
  <script>
import { validPhone, foreignPhone, validPwd } from '../../../fireflyLogin/src/utils/rule'; //校验规则 使用登录模块同组件
import CheckAgreement from '../../../fireflyLogin/src/components/checkAgreement.vue'; //服务协议以及隐私协议 使用登录模块同组件
import EreaIndexBar from '../../../fireflyLogin/src/components/ereaIndexBars.vue'; //下拉手机区号 使用登录模块同组件
import GoBackLogin from './goBackLoginButton.vue'; //返回登录
export default {
  name: 'ResetPasswordPhone',
  components: {
    CheckAgreement, //隐私模块
    EreaIndexBar, //选择区号模块
    GoBackLogin //返回登录
  },
  props: {
    //登录loading
    loading: {
      type: Boolean,
      default: false
    },
    //同意协议
    consent: {
      type: Boolean,
      default: false
    },
    //是否隐藏协议
    hidenAgreement: {
      type: Boolean,
      default: false
    },
    //区号下拉框
    areaCodeData: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    // 获取验证码按钮禁止点击
    canGetCode() {
      let flag = false;
      // if (this.resetForm.loginId ?? "" !== "") {
      //   flag = true;
      // }
      if (this.resetForm.loginId != null && this.resetForm.loginId != '') {
        flag = true;
      }
      return flag;
    }
  },
  data() {
    return {
      consentCheck: this.consent, //是否同意协议
      timer: null, //定时器
      isGettingCode: false, //是否正在等待获取发送的验证码
      seconds: 60, //验证码等待倒计时
      showArea: false, // 是否打开选择地区区号
      // 登录模块
      resetForm: {
        loginPwdOriginal: null, //重置密码
        loginDeviceId: null, //登录设备ID
        requestId: null, //验证码请求ID
        loginId: null, //手机号
        areaName: '中国大陆', //区域名
        mobileAreaCode: '+86', //区号
        code: null, //短信验证码
        fireflyType: 'ResetPasswordPhone' //重置方式
      },
      //校验规则
      loginFormRules: {
        loginId: [
          {
            required: true,
            message: '请输入手机号码'
          },
          {
            validator: (rule, value, callback) => {
              if (this.resetForm.mobileAreaCode == '+86') {
                if (!validPhone(value)) {
                  callback(new Error('国内手机号格式不正确'));
                } else {
                  callback();
                }
              } else {
                if (!foreignPhone(value)) {
                  callback(new Error('手机号格式不正确'));
                } else {
                  callback();
                }
              }
            },
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'change'
          }
        ],
        loginPwdOriginal: [
          {
            required: true,
            message: '请输入密码'
          },
          {
            validator: (rule, value, callback) => {
              if (!validPwd(value)) {
                callback(new Error('密码格式不正确'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    //返回登录模块
    gobackLogin() {
      this.$emit('gobackLogin');
    },
    // 点击下拉的选项的时候
    chooseAreaItem(val) {
      console.log('click item: ', val);
      this.resetForm.mobileAreaCode = val.areaCode;
      this.resetForm.areaName = val.name;
      this.showArea = false;
    },
    //接受子组件的参数
    changeOpinion(value) {
      this.consentCheck = value;
    },
    //获取验证码
    getCode(formName) {
      let _this = this;
      _this.$refs[formName].validateField('loginId', data => {
        if (data == '' || data.length == 1) {
          _this.countDown();
          _this.$emit('getCode', _this.resetForm);
        }
      });
    },
    //开始倒计时
    countDown() {
      let _this = this;
      _this.clearTimer();
      // 发送验证码倒计时
      _this.isGettingCode = true;
      _this.timer = setInterval(() => {
        if (_this.seconds > 1) {
          _this.seconds--;
        } else {
          _this.isGettingCode = false;
          _this.seconds = 60;
          _this.clearTimer();
        }
      }, 1000);
    },
    // 清除定时器
    clearTimer() {
      this.isGettingCode = false;
      this.seconds = 60;
      this.timer && clearInterval(this.timer);
      this.$emit('clearTimer');
    },
    //登录校验
    resetPassword(formName) {
      let _this = this;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          if (!_this.hidenAgreement) {
            _this.$refs.CheckAgreement.verify();
            console.log(_this.consentCheck, '_this.consentCheck');
            if (_this.consentCheck) {
              _this.$emit('reset', _this.resetForm);
            }
          } else {
            _this.$emit('reset', _this.resetForm);
          }
        }
      });
    }
  },
  beforeDestroy() {
    console.log('定时器清除');
    this.clearTimer();
  }
};
</script>
  
  <style lang="scss" scoped>
@import '../../../fireflyLogin/src/css/loginPublic.scss';
.area-code-warp {
  position: relative;
  height: 40px;
  .phone-code {
    border: 1px solid #eaeaec;
    border-radius: 6px;
    &:focus-within {
      border-color: #3a86ff;
    }
  }
  :deep .el-input-group__prepend {
    background-color: #fff;
    padding: 0 16px;
    color: #62606e;
    font-size: 14px;
    border: none;
  }
  :deep .el-input__inner {
    height: 38px;
    line-height: 38px;
    border: none;
  }
  .el-icon-caret-bottom {
    margin: 0px;
    height: 14px;
    width: 14px;
    color: #62606e;
    transform: rotate(0deg);
    transition: transform 0.2s linear;
  }
  .reg180 {
    transform: rotate(0.5turn);
  }
  .area-code-container {
    display: flex;
    align-items: center;
    position: relative;
    .area-code-number {
      margin-right: 10px;
    }
  }
}
.is-error {
  .phone-code {
    border: 1px solid #e85d3d;
    &:focus-within {
      border-color: #e85d3d;
    }
  }
}

//表单最后一项目
.login-form {
  .el-form-item:last-child {
    margin-bottom: 24px;
  }
}
</style>