<template>
  <!-- 申请提现 -->
  <div class="Withdrawal">
    <h2>{{ $t(`pay.withdrawal_1`) }}</h2>
    <!-- 申请提现 -->
    <!-- @keyup.enter.native="handelWithdrawal" -->
    <el-form label-position="top" class="formBox" :model="params">
      <el-form-item>
        <!-- 币种 -->
        <span class="mandatoryBox"
          ><span class="mandatory">*</span>{{ $t(`pay.currency`) }}</span
        >
        <div class="inputBox">
          <el-select
            v-model="params.coin"
            :placeholder="$t(`home.abbr`)"
            @change="handelCoin"
          >
            <el-option
              v-for="item in coinOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item>
        <!-- 金额 -->
        <span class="mandatoryBox"
          ><span class="mandatory">*</span>{{ $t(`pay.money`) }}</span
        >
        <div class="inputBox">
          <el-select
            v-model="params.amount"
            filterable
            allow-create
            default-first-option
            :placeholder="$t(`pay.enterAmount`)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
    
   
      <el-form-item>
        <!-- 网络 -->
        <span class="mandatoryBox"
          ><span class="mandatory">*</span>{{ $t(`pay.network`) }}</span
        >
        <div class="inputBox">
          <el-select
            v-model="params.chain"
            @keyup.enter.native="handelWithdrawal"
            :placeholder="$t(`home.abbr`)"
          >
            <el-option
              v-for="item in chainOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
       

      <!-- 邮箱-->
      <!-- <el-form-item>
                <div style="width: 100%">{{ $t("login.email") }}:</div>
                <el-input
                  disabled
                  v-model="params.email"                
                  autocomplete="off"
                  style="width: 215px"
                  :placeholder="$t(`login.placeholderTitle`)"
                ></el-input>               
              </el-form-item> -->
      <!-- 验证码 -->
      <el-form-item class="authCode">
        <span class="mandatoryBox"
          ><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
        >
        <div class="inputBox">
          <el-input
            :placeholder="$t(`login.VerificationCode`)"
            v-model="params.emailCode"
            style="width: 220px"
          ></el-input>

          <!-- 获取验证码 -->
          <el-button
            :disabled="codeBtn.btnStatus"
            :class="{ forbban: codeBtn.btnStatus }"
            type="success"
            class="emailCodeButton"
            @click="handelCodeBtn"
            >{{ $t(codeBtn.btnText) }}</el-button
          >
        </div>
      </el-form-item>
       <!-- 提现钱包  收款地址-->
       <el-form-item>
        <!-- 收款地址 -->
        <span class="mandatoryBox"
          ><span class="mandatory">*</span
          >{{ $t(`pay.receivingAddress`) }}</span
        > 
        <div class="inputBox">
          <el-input
            v-model="params.address"
            :placeholder="$t(`pay.input`)"
            autocomplete="off"
            style="width: 60%; height: 40px"
          ></el-input>
        </div>
      </el-form-item>
      <!-- 账户余额 -->
      <el-form-item>
        <div style="width: 100%">{{ $t(`pay.accountBalance`) }} :</div>
        <div class="balanceBox">
          <p>
            <span>USDC :</span> <span>{{ balances.usdc }}</span>
          </p>
          <p>
            <span>USDT :</span> <span>{{ balances.usdt }}</span>
          </p>
          <p>
            <span>BUSD :</span> <span>{{ balances.busd }}</span>
          </p>
          <p class="total">
            <span>{{ $t(`home.totalAmount`) }} :</span>
            <span>{{ balances.total }}</span>
          </p>
     
        </div>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 20px">
      <!-- 提示： -->
      <ul style="font-size: 13px">
        <li>{{ $t("pay.Reminder") }}:</li>
        <li>{{ $t("pay.Reminder_1") }}</li>
        <li>
          {{ $t("pay.Reminder_2") }}
        </li>
        <li>
          {{ $t("pay.Reminder_3") }}
        </li>
        <li>{{ $t("pay.Reminder_4") }}</li>
      </ul>
    </div>

    <!-- 提交 -->
    <el-button
      :loading="WithdrawalLoading"
      @click="handelWithdrawal"
      type="warning"
      >{{ $t(`pay.confirmSubmission`) }}</el-button
    >
  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
.Withdrawal {
  width: 60%;
  height: 100%;
  //  background: firebrick;
  //  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto;
  padding-top: 50px;
  //  outline: 1px solid red;

  .formBox {
    // outline: 1px solid red;
    width: 100%;
  }
  .dialog-footer {
    margin-top: 100px;
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
    padding: 0px 50px;
    // outline: 1px solid red;
  }

  //  ::v-deep .el-dialog{
  //     height: 300px;
  //   }
  .transferSuccessful {
    ::v-deep .el-dialog {
      height: 220px;
    }
  }
}
.mandatory {
  color: #f86c4d;
}
//邮箱验证码
.authCode {
  .inputBox {
    // outline: 1px solid red;
    width: 35%;
    display: flex;
    button {
      margin-left: 20px;
    }
  }
}

.forbban {
  // background: rgba(0, 0, 0, 0.2);
  width: 100px;
  text-align: center;
  // padding: 0px 10px;
  // color: #fff;
  // outline: 1px solid  rgba(0, 0, 0, 0.2);
}
.balanceBox {
  // outline: 1px solid red;

  display: flex;
  width: 60%;
  // justify-content: space-around;
  flex-direction: column;
  padding: 0;
  p {
    // outline: 1px solid red;
    display: flex;
    // flex-direction: column;
    margin: 0;
    margin-top: 5px;
    span:nth-of-type(1) {
      line-height: 35px;
      // width: 60px;
      font-weight: 500;
    }
    span:nth-of-type(2) {
      // outline: 1px solid red;
      width: 30%;
      background: #f5f7fa;
      // background: rgba(0,0,0,0.6);
      padding-left: 10px;
      line-height: 35px;
      border-radius: 4px;
      color: #383d71;
      margin-left: 10px;
    }
  }
}
</style>
