<!-- 邮箱登录 -->
<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="email-code" prefix-icon="el-icon-message" size="large" placeholder="请输入邮箱" v-model="resetForm.loginId">
          <template slot="append">
            <div class="area-code-container" @click="showArea = !showArea">
              <div class="area-code-number">
                {{ resetForm.emailSuffix }}
              </div>
              <i :class="['el-icon-caret-bottom', { reg180: showArea }]"></i>
            </div>
          </template>
        </el-input>
        <EmailIndexBar class="choose-area-content" :show.sync="showArea" :mailboxSuffix="mailboxSuffix" @chooseItem="chooseItem"></EmailIndexBar>
      </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 { validPwd } from '../../../fireflyLogin/src/utils/rule'; //校验规则 使用登录模块同组件
import CheckAgreement from '../../../fireflyLogin/src/components/checkAgreement.vue';
import EreaIndexBar from '../../../fireflyLogin/src/components/ereaIndexBars.vue';
import EmailIndexBar from '../../../fireflyLogin/src/components/emailIndexBar.vue';
import GoBackLogin from './goBackLoginButton.vue'; //返回登录
export default {
  name: 'ResetPasswordEmail',
  components: {
    CheckAgreement, //隐私模块
    EreaIndexBar, //选择区号模块
    EmailIndexBar, //邮箱下拉框
    GoBackLogin //返回登录
  },
  props: {
    //登录loading
    loading: {
      type: Boolean,
      default: false
    },
    //同意协议
    consent: {
      type: Boolean,
      default: false
    },
    //是否隐藏协议
    hidenAgreement: {
      type: Boolean,
      default: false
    },
    //邮箱后缀
    mailboxSuffix: {
      type: Array,
      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, //邮箱
        emailSuffix: '@msi.com', //邮箱后缀
        code: null, //短信验证码
        fireflyType: 'ResetPasswordEmail' //登录方式
      },
      //校验规则
      loginFormRules: {
        loginId: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'change'
          }
        ],
        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');
    },
    // 点击下拉的选项的时候
    chooseItem(val) {
      console.log('click item: ', val);
      this.resetForm.emailSuffix = val.emailName;
    },
    //接受子组件的参数
    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('login', _this.resetForm);
            }
          } else {
            _this.$emit('login', _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;
  .email-code {
    border: 1px solid #eaeaec;
    border-radius: 6px;
    &:focus-within {
      border-color: #3a86ff;
    }
  }
  :deep .el-input-group__append {
    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 {
  .email-code {
    border: 1px solid #e85d3d;
    &:focus-within {
      border-color: #e85d3d;
    }
  }
}

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