<template>
  <div class>
    <el-dialog class="dialog-wallet" :visible.sync="emailDialogVisible" :modal="false" :before-close="handleClose">
      <div class="dialog-header">
        <div class="dialog-header-title">Connect Game Account</div>
        <div class="dialog-header-close" @click="handleClose">
          <img src="@/assets/common/close.png" alt />
        </div>
      </div>
      <div class="dialog-content">
        <div class="wallet-content">
          <li @click="getLinkGoogle()">
            <div>
              <img src="@/assets/common/Google-icon.png" alt />
              <span>Sign in with Google</span>
            </div>
          </li>
        </div>
        <div class="line"></div>
      </div>
      <div class="dialog-content">
        <div class="wallet-content">
          <div class="dialog-header-title title-color">Sign in with Email</div>
          <el-form :model="emailValidateForm" ref="emailValidateForm" :rules="rules">
            <el-form-item
              prop="email"
              :show-message="isShowMes"
            >
              <div>
                <span class="table-title">Email address</span>
                <el-input
                  @focus="checkInput"
                  @blur="blurInput"
                  @input="checkInput"
                  type="text"
                  placeholder="Email address"
                  class="ipt_css"
                  v-model="emailValidateForm.email"
                />
              </div>
              <div v-if="isEmail == '1'" class="email-no">Email address is required. Please enter your email to proceed.</div>
              <div v-if="isEmail == '2'" class="email-no">Please check the email format and try again.</div>
            </el-form-item>
            <el-form-item prop="emailCode">
                <div>
                  <span class="table-title">Verification code</span>
                  <el-input placeholder=""
                    class="ipt_css"
                    v-model="emailValidateForm.emailCode" />
                    <div v-if="timeLeft <= 0" class="code-btn" @click="checkCode(emailValidateForm.email)">Send Code</div>
                    <div v-else class="code-btn">{{ timeLeft }}</div>
                </div>
            </el-form-item>
          </el-form>
          <div class="check-validate" @click="resetForm('emailValidateForm')">Verify</div>
        </div>
      </div>
    </el-dialog>
    <!-- <el-dialog class="dialog-wallet" :visible.sync="checkEmailDialogVisible" :modal="false" :before-close="checkHandleClose">
      <div class="dialog-header">
        <div class="dialog-header-title"><i class="el-icon-arrow-left"></i> 邮箱登录</div>
        <div class="dialog-header-close" @click="checkHandleClose">
          <img src="@/assets/common/CloseButton.png" alt />
        </div>
      </div>
      <div class="dialog-content">
        <div class="wallet-content">
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { apiSendCode, apiVerifyEmail } from '@/utils/webapi.js'

export default {
  props: {
    emailDialogVisible: Boolean,
  },

  data() {
    let codeVerifiers = /^\d{6}$/;
    let validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please enter the verification code we sent to your email."));
      } else {
        if (codeVerifiers.test(value)) {
          callback();
        } else {
          callback(
            new Error(
              "Verification code is incorrect. Please verify and try again."
            )
          );
        }
      }
    };
    return {
      isWalletList: [
        {
          name: "MetaMask",
          value: "google",
          imgUrl: require("@/assets/common/Google-icon.png")
        },
        {
          name: "OKXwallet",
          value: "email",
          imgUrl: require("@/assets/home/icon_OKXwallet.png")
        }
      ],
      checkEmailDialogVisible: false,
      emailValidateForm: {
        email: '',
        emailCode: ''
      },
      rules: {
        email: [
          {
            required: true,
            message: 'Email address is required. Please enter your email to proceed.',
            trigger: 'blur',
          },
          {
            type: 'email',
            message: 'Please check the email format and try again.',
            trigger: ['blur', 'change'],
          },
        ],
        emailCode: [
          {
            validator: validateCode,
            trigger: ['blur', 'change'],
          },
        ],
      },
      isEmail: '0',
      timeLeft: 0,
      time: 60,
      isShowMes: true,
    };
  },
  mounted() {
  },
  methods: {
    // 绑定游戏账号
    async getLinkGoogle() {    
      this.$emit('googleLogin')
    },

    // 获取验证码
    async checkCode(email) {
      if(email) {
        if(this.isValidateEmail(email)) {
          let { errcode, errmsg, data } = await apiSendCode(email)
          if(!errcode) {
            this.beginCountdown()
          }
        }
      } else {
        this.isEmail = '1'
        this.isShowMes = false
      }
      
    },

    checkInput() {
      this.isEmail = '0'
      this.isShowMes = true
    },
    blurInput() {
      this.isEmail = '0'
    },

    // 验证邮箱
    resetForm(emailValidateForm) {
      this.$refs[emailValidateForm].validate(async (valid) => {
        if(valid) {
          let { errcode, errmsg, data } = await apiVerifyEmail(this.emailValidateForm.email, this.emailValidateForm.emailCode)
          if(!errcode) {
            this.$emit('bindEmail')
          } else if(errcode == 14) {
            this.$showErr(errmsg)
          } else if(errcode == 16) {
            this.$showErr(errmsg)
          }
        } else {
          return
        }
      })
    },

    // 邮箱验证
    isValidateEmail(email) {
      const reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
      return reg.test(email)
    },

    // 验证码验证
    isValiedCode(code){
      return /^\d{6}$/.test(code)
    },

    // 倒计时
    beginCountdown() {
      this.timeLeft = parseInt(this.time);
      let timer = setInterval(() => {
        this.timeLeft--;
        if (this.timeLeft <= 0) {
          // this.$showErr("Please try again");
          this.time = 60
          clearInterval(timer);
        }
      }, 1000);
    },

    // 关闭弹窗
    handleClose() {
      this.$emit("closeDialog");
    },

    checkHandleClose() {
      this.checkEmailDialogVisible = false
    }
  }
};
</script>

<style lang="scss" scoped>
div {
  .dialog-wallet {
    width: 50% !important;
    margin: auto;
    ::v-deep .el-dialog {
      // border: 1px solid #924df2;
      background: #2d2738;
      border-radius: 30px;
      .el-dialog__header {
        // display: none;
        padding: 0;
        padding-top: 20px;
        button {
          display: none;
        }
      }
      .el-dialog__body {
        position: relative;
        padding: 0 30px;
        color: #fff;
        .dialog-header {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          .dialog-header-title {
            text-align: left;
            font-weight: 700;
            font-size: 26px;
            color: #F1B85A;
            font-family: "Anton-Regular";
          }
          .title-color {
            color: #994FFD;
          }
          .dialog-header-close {
            // position: absolute;
            // top: -8%;
            // right: -4%;
            width: 35px;
            height: 35px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .dialog-content {
          padding-bottom: 20px;
          p {
            text-align: left;
            padding: 20px 0;
            font-size: 16px;
          }
          .wallet-content {
            width: 95%;
            margin: 0 auto;
            text-align: left;
            li {
              height: 60px;
              display: flex;
              align-items: center;
              margin: 20px 0;
              padding-left: 50px;
              cursor: pointer;
              border-radius: 40px;
              text-align: left;
              box-sizing: border-box;
              border: 2px solid #a57a4a;
              div {
                display: flex;
                align-items: center;
                img {
                  width: 40px;
                  height: 40px;
                }
                span {
                  color: #FEC25D;
                  margin-left: 20px;
                  font-size: 24px;
                }
              }
            }
            li:nth-child(3) {
              padding-left: 0;
              background: url('@/assets/common/disconnect.png') no-repeat;
              background-size: 100% 100%;
              .disconnect {
                text-align: center;
                margin: 0 auto;
                // color: #000;
              }
              &:hover {
                background: url('@/assets/common/Please.png') no-repeat;
                background-size: 100% 100%;
              }
            }
            .dialog-header-title {
              text-align: left;
              font-weight: 700;
              font-size: 26px;
              color: #F1B85A;
              font-family: "Anton-Regular";
            }
            .title-color {
              color: #994FFD;
            }
            .el-form {
              .el-form-item {
                .el-form-item__content {
                  div {
                    text-align: left;
                    .table-title {
                      display: inline-block;
                      font-size: 24px;
                    }
                    .el-input {
                      // background: #fff;
                      .el-input-group__append {
                        cursor: pointer;
                        color: #000;
                        background: #ffc35b;
                        border-radius: 20px;
                      }
                      input {
                        background: #1e1b26;
                        border-color: #1e1b26;
                        color: #fff;
                      }
                    }
                    .code-btn {
                      position: absolute;
                      bottom: 0;
                      right: 0;
                      min-width: 80px;
                      background: #9950fd;
                      padding: 0 10px;
                      text-align: center;
                      border-radius: 10px;
                      cursor: pointer;
                    }
                  }
                  .email-no {
                    position: absolute;
                    bottom: 0;
                    height: 10px;
                    color: #F56C6C;
                    font-size: 12px;
                  }
                }
              }
            }
            .check-validate {
              width: 120px;
              height: 35px;
              line-height: 35px;
              background: #ffc35b;
              color: #000;
              margin: 20px auto;
              border-radius: 20px;
              cursor: pointer;
            }
          }
          .line {
            width: 100%;
            height: 0px;
            // background: #79787b,
            border: 1px dashed #79787b;
          }
        }
      }
    }
  }
}
</style>