<template>
  <el-form size="large" class="login-content-form" :model="state.ruleForm">
    <el-form-item
        class="login-animation1"
        prop="email"
        :rules="[
          { required: true, message: '請(qǐng)輸入郵箱地址', trigger: 'blur' },
          { type: 'email', message: '請(qǐng)輸入正確的郵箱地址', trigger: ['blur', 'change'] } ]" >
      <el-input text placeholder="請(qǐng)輸入郵箱" v-model="state.ruleForm.email" clearable autocomplete="off">
        <template #prefix>
          <i class="iconfont icon-dianhua el-input__icon"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="login-animation2">
      <el-col :span="15">
        <el-input
            text maxlength="4" placeholder="請(qǐng)輸入驗(yàn)證碼"
            v-model="state.ruleForm.code"
            @keyup.enter="onSignIn"
            clearable
            autocomplete="off">
          <template #prefix>
            <el-icon class="el-input__icon">
              <ele-Position/>
            </el-icon>
          </template>
        </el-input>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="8">
        <el-button v-waves class="login-content-code" @click="get_email_code" :disabled="isCountDownDisabled">{{
            countDownText
          }}</el-button>
      </el-col>
    </el-form-item>
    <el-form-item class="login-animation3">
      <el-button type=""
                 class="login-content-submit" round v-waves
                 style="background-color: #1e1e1e; color: #fff"
                 @click="onSignIn"
                 :loading="state.loading.signIn">
        <span style="font-size: 1.2rem; font-weight: bolder">登 錄</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script setup name="loginEmail">
// 定義變量內(nèi)容
const storesThemeConfig = useThemeConfig();
const {themeConfig} = storeToRefs(storesThemeConfig);
const route = useRoute();
const router = useRouter();
const state = reactive({
  email_code: '',
  ruleForm: {
    email: '',
    code: '',
  },
  loading: {
    signIn: false,
  },
});
// 時(shí)間獲取
const currentTime = computed(() => {
  return formatAxis(new Date());
});
// TODO: 驗(yàn)證碼應(yīng)該設(shè)置過期
// 獲取郵箱驗(yàn)證碼
const get_email_code = async () => {
  if (state.ruleForm.email.toLowerCase() === '') {
    ElMessage.error('請(qǐng)重新輸入郵箱');
    return
  }
  // 觸發(fā)按鈕倒計(jì)時(shí)
  countDownFunction(120);
  useUserApi().getCode({email: state.ruleForm.email})
      .then(async res => {
        state.email_code = res.data;
      })
      .catch((e) => {
        console.log('錯(cuò)誤信息： ', e)
      })
};
const onSignIn = async () => {
  state.loading.signIn = true;
  console.log(state.ruleForm.code)
  console.log(state.email_code)
  if (state.ruleForm.code !== state.email_code) {
    ElMessage.error('驗(yàn)證碼錯(cuò)誤，請(qǐng)重新輸入');
    state.ruleForm.code = ''; // 清空輸入框
    state.loading.signIn = false;
    return
  }
  useUserApi().signIn({email: state.ruleForm.email})
      .then(async res => {
        // 存儲(chǔ)token
        Session.set('token', res.data.token);
        // 存儲(chǔ)用戶信息
        await useUserInfo().setUserInfos();
        // 后端獲取菜單數(shù)據(jù)
        await initBackEndControlRoutes();
        // 前端獲取菜單數(shù)據(jù)
        // await initFrontEndControlRoutes();
        signInSuccess(false);
      })
      .catch((e) => {
        console.log('錯(cuò)誤信息： ', e)
        state.loading.signIn = false;
      })
};
// 登錄成功后的跳轉(zhuǎn)
const signInSuccess = (isNoPower) => {
  if (isNoPower) {
    ElMessage.warning('抱歉，您沒有登錄權(quán)限');
    Session.clear();
  } else {
    // 初始化登錄成功時(shí)間問候語
    let currentTimeInfo = currentTime.value;
    // 登錄成功，跳到轉(zhuǎn)首頁
    // 如果是復(fù)制粘貼的路徑，非首頁/登錄頁，那么登錄成功后重定向到對(duì)應(yīng)的路徑中
    if (route.query?.redirect) {
      router.push({
        path: route.query?.redirect,
        query: Object.keys(route.query?.params).length > 0 ? JSON.parse(route.query?.params) : '',
      });
    } else {
      router.push('/home');
    }
    // 登錄成功提示
    const signInText = '歡迎回來！';
    ElMessage.success(`${currentTimeInfo}，${signInText}`);
    // 添加 loading，防止第一次進(jìn)入界面時(shí)出現(xiàn)短暫空白
    NextLoading.start();
  }
  state.loading.signIn = false;
};
</script>

def get_str_code(length=4):
    # 生成一個(gè)隨機(jī)的UUID
    random_uuid = uuid.uuid4()
    # 將UUID轉(zhuǎn)換為32位的十六進(jìn)制字符串
    code = random_uuid.hex
    # 截取指定長度的字符串
    return code[:length]

def send_email(config):
    send_to = config['send_to']
    content = config['content']
    subject = config['subject']
    send_by = config['send_by']
    mail_host = config['mail_host']
    port = config['port']
    mail_pass = config['mail_pass']
    # 構(gòu)建郵件內(nèi)容
    message = MIMEText(content, 'plain', 'utf-8')
    message['From'] = send_by       # 發(fā)件人
    message['To'] = send_to         # 收件人
    message['Subject'] = subject    # 郵件主題
    try:
        smtpObj = smtplib.SMTP_SSL(mail_host, port)  # 啟用SSL發(fā)信, 端口一般是465
        smtpObj.login(send_by, mail_pass)            # 登錄驗(yàn)證
        smtpObj.sendmail(send_by, send_to.split(','), message.as_string())  # 發(fā)送
        logger.info("郵箱驗(yàn)證碼發(fā)送成功！")
    except Exception as e:
        logger.warning(e)
"""
qq 郵箱授權(quán)碼位于 qq 郵箱 app 的“設(shè)置”—“賬號(hào)”—“授權(quán)設(shè)置”—“第三方授權(quán)”中，
具體步驟包括：打開 qq 郵箱 app、點(diǎn)擊“我”、進(jìn)入“設(shè)置”、選擇“賬號(hào)”、進(jìn)入“授權(quán)設(shè)置”、
查看“第三方授權(quán)”，找到您需要查看授權(quán)碼的應(yīng)用，點(diǎn)擊右側(cè)的“查看授權(quán)”按鈕，即可獲取授權(quán)碼。
"""
""" 郵件格式
email_config = {
    'send_to': "",   # 收件人郵箱，可以是列表
    'content': "這是郵件內(nèi)容。",           # 郵件內(nèi)容
    'subject': "",    # 郵件主題
    'send_by': "",   # 發(fā)件人郵箱
    'mail_host': "smtp.qq.com",         # SMTP服務(wù)器地址
    'port': 465,                        # SMTP服務(wù)器端口
    'mail_pass': ""     # 授權(quán)密碼，非登錄密碼
}
"""
def send_emai_code(send_to: str):
    email_config = config.email_config
    # 生成驗(yàn)證碼
    verificate_code = get_str_code()
    # 獲取 send_to 郵箱地址的前3位和@符號(hào)前4位的內(nèi)容
    formatted_email = send_to[0:3] + '...' + send_to[send_to.index('@') - 4:send_to.index('@')]
    email_config['send_to'] = send_to
    # 構(gòu)建格式化的郵件內(nèi)容
    email_config['content'] = f"""【HXAutoTest】你正在登錄 {formatted_email}，
    驗(yàn)證碼：{verificate_code}。
    提供給他人會(huì)導(dǎo)致賬號(hào)泄露，若非本人操作，請(qǐng)修改密碼！"""
    try:
        send_email(email_config)
        return verificate_code
    except Exception as e:
        logger.warning(f"發(fā)送驗(yàn)證碼失?。篭n{e}")
        return ''