<template>
  <!-- 充值页面 -->
  <div class="RechargeBox">
    <el-tabs v-model="activeName" style="width: 60%;margin: 0 auto;padding: 20px;">
      <el-tab-pane :label="$t(`pay.Recharge1`)" name="Recharge">
        <div class="Recharge">
        <h2>{{ $t(`pay.Recharge1`) }}</h2>
        <!-- 充值表单 -->
        <!-- @keyup.enter.native="handelRecharge" -->
        <el-form label-position="top" class="formBox" :model="formLabelAlign">
           <!-- 支付币种 -->
           <el-form-item>
            <span class="mandatoryBox"
              ><span class="mandatory">*</span>{{ $t(`pay.currency`) }}</span
            >
            <div class="inputBox">
              <el-select
                @change="handelCoin"
                v-model="formLabelAlign.coin"
                :placeholder="$t(`home.abbr`)"
              >
                <el-option
                  v-for="item in coinOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </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="formLabelAlign.chain"
                @change="handelChain"
                @keyup.enter.native="handelRecharge"
                :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>
            <span class="mandatoryBox"
              ><span class="mandatory">*</span>{{ $t(`pay.money`) }}</span
            >
            <div class="inputBox">
              <el-select
                v-model="formLabelAlign.amount"
                filterable
                allow-create
                default-first-option
                @change="handelAmount"
                :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>
        <div style="margin-bottom: 20px; width: 80%">
          <!-- 提示： -->
          <ul style="font-size: 13px">
            <li>{{ $t(`pay.Reminder`) }}</li>
            <li>{{ $t(`pay.Reminder_5`) }}</li>
            <li>{{ $t(`pay.Reminder_6`) }}</li>
            <li>{{ $t(`pay.Reminder_7`) }}</li>
            <li>{{ $t(`pay.Reminder_8`) }}</li>
            <li>{{ $t(`pay.Reminder_9`) }}</li>
            <li>{{ $t(`pay.Reminder_10`) }}</li>
            <li>{{ $t(`pay.Reminder_11`) }}</li>
            <li>
              {{ $t(`pay.Reminder_12`)
              }}<span
                style="
                  color: #1f39a1;
                  cursor: pointer;
                  text-decoration: underline;
                "
                @click="handelTXID"
                >{{ $t(`pay.Reminder_13`) }}</span
              >{{ $t(`pay.Reminder_14`) }}
            </li>
          </ul>
        </div>

        <!-- 提交 -->
        <el-button
          :loading="RechargeLoading"
          @click="handelRecharge"
          type="warning"
          >{{ $t(`pay.confirmSubmission`) }}</el-button
        >
      </div>
      </el-tab-pane>
      <!-- hash页面 -->
      <el-tab-pane :label="$t(`pay.Txid`)" name="Txid">
        <div class="Recharge">
          <h2>{{ $t(`pay.Txid`) }}</h2>
          <!-- 交易hash -->
          <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`)">
                  <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.network`) }}</span
              >
              <div class="inputBox">
                <el-select
                  v-model="params.chain"
                  :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>
            <!-- 交易hash -->
            <el-form-item>
              <span class="mandatoryBox"
                ><span class="mandatory">*</span>{{ $t(`pay.Txid`) }}</span
              >
              <div class="inputBox">
                <el-input
                  :placeholder="$t(`pay.input`)"
                  @keyup.enter.native="handelTxid"
                  v-model="params.txid"
                ></el-input>
              </div>
            </el-form-item>

            <div style="margin-bottom: 20px">
              <ul style="font-size: 13px">
                <li>{{ $t(`pay.Reminder_26`) }}</li>
                <li>{{ $t(`pay.Reminder_27`) }}</li>
                <li>{{ $t(`pay.Reminder_28`) }}</li>
                <li>{{ $t(`pay.Reminder_29`) }}</li>
                <li>
                  {{ $t(`pay.Reminder_30`)
                  }}<span
                    style="
                      color: #1f39a1;
                      cursor: pointer;
                      text-decoration: underline;
                    "
                    @click="Jump1"
                    >{{ $t(`pay.Reminder_31`) }}</span
                  >。
                </li>
              </ul>
            </div>

            <!-- 提交 -->
            <el-button
              :disabled="bthDisabled"
              :loading="txidLoading"
              @click="handelTxid"
              type="warning"
              >{{ $t(btnText) }}</el-button
            >
            <p style="font-size: 13px;color: red;margin: 0;" v-show="bthDisabled">{{CountdownText}}</p>
          </el-form>

          <!-- 确认已转账成功弹窗 -->
          <div class="transferSuccessful">
            <el-dialog
              :title="$t(`pay.Reminder`)"
              :visible.sync="dialogVisibleTxid"
              width="18%"
              :close-on-click-modal="false"
              :show-close="false"
            >
              <!-- 当前总余额： -->
              <p
                style="
                  text-align: center;
                  color: green;
                  font-weight: 600;
                  font-size: 17px;
                "
              >
                {{ $t(`pay.queryWasSuccessful`) }}
              </p>
              <p style="text-align: center; font-size: 16px">
                {{ $t(`pay.totalBalance`) }}:{{ balances.total ||($t(`pay.calculation`))}}
              </p>

          
            </el-dialog>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 提交充值后弹窗 -->
    <el-dialog
      :title="$t(`pay.waitFor`)"
      :visible.sync="outerVisible"
      width="35%"
      :close-on-click-modal="false"
      close="dialogBox"
    >
      <el-dialog
        width="25%"
        :visible.sync="innerVisible"
        :show-close="false"
        append-to-body
      >
        <!-- 验证交易hash -->
        <div style="display: flex; justify-content: space-evenly">
          <span @click="handelTXID" style="color: #1c1e38; cursor: pointer">{{
            $t(`pay.transactions`)
          }}</span>
          <span
            @click="handelCustomerService"
            style="color: #1c1e38; cursor: pointer"
            >{{ $t(`pay.service`) }}</span
          >
        </div>
      </el-dialog>
      <!-- 地址： -->
      <span>{{ $t(`pay.Address`) }}:{{ transactionData.address }}</span>

      <div style="margin-top: 20px">
        <!-- 提示： -->
        <ul style="font-size: 13px">
          <li>{{ $t(`pay.Reminder`) }}</li>
          <li>{{ $t(`pay.Reminder_19`) }}</li>
          <li>
            {{ $t(`pay.Reminder_20`)
            }}<span
              style="
                color: #1f39a1;
                cursor: pointer;
                text-decoration: underline;
              "
              @click="Jump"
              >{{ $t(`pay.Reminder_21`) }}</span
            >{{ $t(`pay.Reminder_22`) }}
          </li>
          <li>
            {{ $t(`pay.Reminder_23`)
            }}<span
              style="
                color: #1f39a1;
                cursor: pointer;
                text-decoration: underline;
              "
              @click="handelTXID"
              >{{ $t(`pay.Reminder_13`) }}</span
            >{{ $t(`pay.Reminder_24`) }}
          </li>
          <li>{{ $t(`pay.Reminder_25`) }}</li>
        </ul>
      </div>

      <!-- 确认已转账  关闭转账交易 转账遇到问题-->
      <div class="dialog-footer">
        <el-button
          type="warning"
          @click="handelConfirmation"
          :disabled="Confirmation"
          :loading="ConfirmationLoading"
          >{{ $t(`pay.confirmTransfer`) }}</el-button
        >
        <el-button
          type="warning"
          @click="handelCloseTransfer"
          :loading="CloseTransferLoading"
          >{{ $t(`pay.closeTransfer`) }}</el-button
        >
        <el-button
          slot="reference"
          type="warning"
          @click="handelProblem"
          :loading="ProblemLoading"
          >{{ $t(`pay.problem`) }}</el-button
        >
      </div>
    </el-dialog>

    <!-- 确认已转账成功弹窗 -->
    <div class="transferSuccessful">
      <el-dialog
        :title="$t(`pay.Reminder`)"
        :visible.sync="dialogVisibleSuccess"
        width="18%"
        :close-on-click-modal="false"
        :show-close="false"
      >
        <!-- 充值成功！ -->
        <p
          style="
            text-align: center;
            color: green;
            font-weight: 600;
            font-size: 17px;
          "
        >
          {{ $t(`pay.rechargedSuccessfully`) }}
        </p>
        <!-- <p style="text-align: center; font-size: 16px">
          <span
            >{{ $t(`pay.currency`) }}:{{
              formLabelAlign.coin
            }}
            &nbsp;&nbsp;<span></span>{{ $t(`pay.money`) }}:{{
              formLabelAlign.amount||0
            }}</span
          >
        </p> -->
        <!-- <p style="text-align: center;font-size: 16px;">币种：{{ formLabelAlign.coin }}</p> -->

        <!-- <span slot="footer">
        <el-button type="warning" @click="handelConfirmation" >确认</el-button>      
      </span> -->
      </el-dialog>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.RechargeBox{
  width: 100%;
  height: 100%;
}
.RechargeBox {
  width: 100%;
  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: 20px;
    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;
  }
}
</style>
