<template>
  <!-- 后台提现页面 -->
  <div class="payHistories" v-loading="backendWithdrawalLoading">
   
    <el-row >
      <el-col :span="24" style="display: flex;align-items: center;">
        <h2>{{ $t(`login.backendWithdrawal`) }}</h2>
        <i @click="handelRefresh"  class="i ishuaxin1 Refresh"></i>
      </el-col>    
    </el-row>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 待处理 -->
      <el-tab-pane :label="$t(`pay.Pending`)" name="pending">
        <el-row>
      <div style="width: 100%; display: flex; justify-content: right">
        <div class="searchBox">
          <el-input
            :placeholder="$t(`pay.placeholderAddress`)"
            v-model="params.address"
            style="width: 88%"
            @keyup.enter.native="handelSearch(2)"
          >
          </el-input>
          <i class="i isousuo" @click="handelSearch(2)"></i>
        </div>
      </div>

      <el-col>
        <el-table
          :data="tableData"
          class="table"
          max-height="750"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          style="text-transform: none;"
        >
          <!-- <el-table-column prop="id" :label="$t(`pay.orderNumber`)">
          </el-table-column> -->
          <!-- 用户邮箱 -->
          <el-table-column prop="email"  :label="$t(`pay.userEmail`)" >
          </el-table-column>
          <!-- 申请提现币种 -->
          <el-table-column prop="coin" :label="$t(`pay.currency`)">    
          </el-table-column>
          <!-- 申请提现网络 -->
          <el-table-column prop="chain" :label="$t(`pay.network`)">
          </el-table-column>
            <!-- 余额 -->
          <!-- <el-table-column prop="usdt" :label=" `USDT${$t(`pay.balance`)}` " >
          </el-table-column>
          <el-table-column prop="usdc" :label=" `USDC${$t(`pay.balance`)}` ">
          </el-table-column>
          <el-table-column prop="busd" :label=" `BUSD${$t(`pay.balance`)}` ">
          </el-table-column> -->
          <!-- 申请提现金额 -->
          <el-table-column
            prop="appliedAmount"
            :label="$t(`pay.refundAmount`)"
          
          > 
          </el-table-column>
         
          <el-table-column prop="appliedTime" :label="$t(`pay.applicationTime`)" >
            <template slot-scope="scope">
              {{ handelTime(scope.row.appliedTime) }}
            </template>
          </el-table-column>  
          <!-- 用户绑定地址 -->
          <!-- <el-table-column
            prop="userAddress"
            :label="$t(`pay.userAddress`)"
         
          >
          </el-table-column> -->
          <!-- 用户提现地址 -->
          <el-table-column
            prop="appliedAddress"
            :label="$t(`pay.appliedAddress`)"
           width="370"
          >
          </el-table-column>

          <!-- <el-table-column
         
            prop="message"
            :label="$t(`pay.Remarks`)"
            width="150"
          >
          </el-table-column> -->
          <el-table-column
            :label="$t(`pay.operation`)"
            fixed="right"
            width="230"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >{{ $t(`pay.confirm`) }}</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >{{ $t(`pay.refuse`) }}</el-button
              >

              <el-button
                @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
                {{ $t(`help.details`) }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 确认弹窗 -->
        <el-dialog
          :title="msg"
          :visible.sync="dialogVisible"
          width="30%"
          :close-on-click-modal="false"
          :show-close="false"
        >
          <el-form
            label-position="top"
            :model="handleParams"
            class="WithdrawalBox"
          >
          <!-- 实退金额 -->
            <el-form-item>
              <p><span></span> <span> {{  $t(`pay.refundAmount`) }}</span></p>

              <el-input
                v-model="appliedAmount"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                disabled
                type="number"
                class="no-suffix-icon"
                style="width: 215px; height: 40px"
              ></el-input>
            </el-form-item>
            <!-- 实退txid -->
            <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.refundTxid`) }}</span></p>
              <el-input
                v-model="handleParams.refundTxid"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                style="width: 100%; height: 40px"
              ></el-input>
            </el-form-item>
            <!-- 实退时间 -->
            <!-- <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.refundTime`) }}</span></p>
              <el-date-picker
                v-model="handleParams.refundTime"
                type="datetime"
                :placeholder="$t(`pay.selectDate`)"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item> -->
              <!-- 实退地址-->
              <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.refundAddress`) }}</span></p>
              <el-input
                v-model="handleParams.refundAddress"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                style="width: 100%; height: 40px"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <p><span></span><span> {{ $t(`pay.Remarks`) }}</span></p>
              <el-input
                v-model="handleParams.msg"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                resize="none"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="handelCancel">{{
              $t(`pay.cancel`)
            }}</el-button>
            <el-button
              size="small"
              type="primary"
              @click="handelConfirm"
              :loading="backendLoading"
              >{{ $t(`pay.confirm`) }}</el-button
            >
          </span>
        </el-dialog>
        <!-- 拒绝弹窗 -->
        <el-dialog
          :title="$t(`pay.confirm`)"
          :visible.sync="refuseDialogVisible"
          width="30%"
          :show-close="false"
        >
          <el-form
            label-position="top"
            class="WithdrawalBox"
            :model="handleParams"
          >
            <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.Remarks`) }}</span></p>
              <el-input
                v-model="handleParams.msg"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                resize="none"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="refuseDialogVisible = false">{{
              $t(`pay.cancel`)
            }}</el-button>
            <el-button
              size="small"
              :loading="backendLoading"
              type="primary"
              @click="handelRefuse"
              >{{ $t(`pay.confirm`) }}</el-button
            >
          </span>
        </el-dialog>
      </el-col>
        </el-row>
      
      
      </el-tab-pane>
      <!-- 成功 -->
      <el-tab-pane :label="$t(`pay.withdrawalSuccessful`)" name="success">
        <el-row>
      <div style="width: 100%; display: flex; justify-content: right">
        <div class="searchBox">
          <el-input
            :placeholder="$t(`pay.placeholderAddress`)"
            v-model="params.address"
            style="width: 88%"
            @keyup.enter.native="handelSearch(1)"
          >
          </el-input>
          <i class="i isousuo" @click="handelSearch(1)"></i>
        </div>
      </div>

      <el-col>
        <el-table
          :data="successData"
          class="table"
          max-height="750"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          style="text-transform: none;"
        >
          <!-- <el-table-column prop="id" :label="$t(`pay.orderNumber`)">
          </el-table-column> -->
          <!-- 用户邮箱 -->
          <el-table-column prop="email"  :label="$t(`pay.userEmail`)" >
          </el-table-column>
          <!-- 申请提现币种 -->
          <el-table-column prop="coin" :label="$t(`pay.currency`)">    
          </el-table-column>
          <!-- 申请提现网络 -->
          <el-table-column prop="chain" :label="$t(`pay.network`)">
          </el-table-column>
            <!-- 余额 -->
          <!-- <el-table-column prop="usdt" :label=" `USDT${$t(`pay.balance`)}` " >
          </el-table-column>
          <el-table-column prop="usdc" :label=" `USDC${$t(`pay.balance`)}` ">
          </el-table-column>
          <el-table-column prop="busd" :label=" `BUSD${$t(`pay.balance`)}` ">
          </el-table-column> -->
          <!-- 申请提现金额 -->
          <el-table-column
            prop="appliedAmount"
            :label="$t(`pay.refundAmount`)"
          
          > 
          </el-table-column>
         
          <el-table-column prop="appliedTime" :label="$t(`pay.applicationTime`)" >
            <template slot-scope="scope">
              {{ handelTime(scope.row.appliedTime) }}
            </template>
          </el-table-column>  
          <!-- 用户绑定地址 -->
          <!-- <el-table-column
            prop="userAddress"
            :label="$t(`pay.userAddress`)"
         
          >
          </el-table-column> -->
          <!-- 用户提现地址 -->
          <el-table-column
            prop="appliedAddress"
            :label="$t(`pay.appliedAddress`)"
           width="370"
          >
          </el-table-column>

          <!-- <el-table-column
         
            prop="message"
            :label="$t(`pay.Remarks`)"
            width="150"
          >
          </el-table-column> -->
          <el-table-column
            :label="$t(`pay.operation`)"
            fixed="right"
            width="230"
          >
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >{{ $t(`pay.confirm`) }}</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >{{ $t(`pay.refuse`) }}</el-button
              > -->

              <el-button
                @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
                {{ $t(`help.details`) }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 确认弹窗 -->
        <el-dialog
          :title="msg"
          :visible.sync="dialogVisible"
          width="30%"
          :close-on-click-modal="false"
          :show-close="false"
        >
          <el-form
            label-position="top"
            :model="handleParams"
            class="WithdrawalBox"
          >
          <!-- 实退金额 -->
            <el-form-item>
              <p><span></span> <span> {{  $t(`pay.refundAmount`) }}</span></p>

              <el-input
                v-model="appliedAmount"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                disabled
                type="number"
                class="no-suffix-icon"
                style="width: 215px; height: 40px"
              ></el-input>
            </el-form-item>
            <!-- 实退txid -->
            <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.refundTxid`) }}</span></p>
              <el-input
                v-model="handleParams.refundTxid"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                style="width: 100%; height: 40px"
              ></el-input>
            </el-form-item>
            <!-- 实退时间 -->
            <!-- <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.refundTime`) }}</span></p>
              <el-date-picker
                v-model="handleParams.refundTime"
                type="datetime"
                :placeholder="$t(`pay.selectDate`)"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item> -->
              <!-- 实退地址-->
              <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.refundAddress`) }}</span></p>
              <el-input
                v-model="handleParams.refundAddress"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                style="width: 100%; height: 40px"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <p><span></span><span> {{ $t(`pay.Remarks`) }}</span></p>
              <el-input
                v-model="handleParams.msg"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                resize="none"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="handelCancel">{{
              $t(`pay.cancel`)
            }}</el-button>
            <el-button
              size="small"
              type="primary"
              @click="handelConfirm"
              :loading="backendLoading"
              >{{ $t(`pay.confirm`) }}</el-button
            >
          </span>
        </el-dialog>
        <!-- 拒绝弹窗 -->
        <el-dialog
          :title="$t(`pay.confirm`)"
          :visible.sync="refuseDialogVisible"
          width="30%"
          :show-close="false"
        >
          <el-form
            label-position="top"
            class="WithdrawalBox"
            :model="handleParams"
          >
            <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.Remarks`) }}</span></p>
              <el-input
                v-model="handleParams.msg"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                resize="none"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="refuseDialogVisible = false">{{
              $t(`pay.cancel`)
            }}</el-button>
            <el-button
              size="small"
              :loading="backendLoading"
              type="primary"
              @click="handelRefuse"
              >{{ $t(`pay.confirm`) }}</el-button
            >
          </span>
        </el-dialog>
      </el-col>
        </el-row>   
      </el-tab-pane>
      <!-- 失败 -->
      <el-tab-pane :label="$t(`pay.withdrawalFailed1`)" name="fail">
        <el-row>
      <div style="width: 100%; display: flex; justify-content: right">
        <div class="searchBox">
          <el-input
            :placeholder="$t(`pay.placeholderAddress`)"
            v-model="params.address"
            style="width: 88%"
            @keyup.enter.native="handelSearch(0)"
          >
          </el-input>
          <i class="i isousuo" @click="handelSearch(0)"></i>
        </div>
      </div>

      <el-col>
        <el-table
          :data="failData"
          class="table"
          max-height="750"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          style="text-transform: none;"
        >
          <!-- <el-table-column prop="id" :label="$t(`pay.orderNumber`)">
          </el-table-column> -->
          <!-- 用户邮箱 -->
          <el-table-column prop="email"  :label="$t(`pay.userEmail`)" >
          </el-table-column>
          <!-- 申请提现币种 -->
          <el-table-column prop="coin" :label="$t(`pay.currency`)">    
          </el-table-column>
          <!-- 申请提现网络 -->
          <el-table-column prop="chain" :label="$t(`pay.network`)">
          </el-table-column>
            <!-- 余额 -->
          <!-- <el-table-column prop="usdt" :label=" `USDT${$t(`pay.balance`)}` " >
          </el-table-column>
          <el-table-column prop="usdc" :label=" `USDC${$t(`pay.balance`)}` ">
          </el-table-column>
          <el-table-column prop="busd" :label=" `BUSD${$t(`pay.balance`)}` ">
          </el-table-column> -->
          <!-- 申请提现金额 -->
          <el-table-column
            prop="appliedAmount"
            :label="$t(`pay.refundAmount`)"
          
          > 
          </el-table-column>
         
          <el-table-column prop="appliedTime" :label="$t(`pay.applicationTime`)" >
            <template slot-scope="scope">
              {{ handelTime(scope.row.appliedTime) }}
            </template>
          </el-table-column>  
          <!-- 用户绑定地址 -->
          <!-- <el-table-column
            prop="userAddress"
            :label="$t(`pay.userAddress`)"
         
          >
          </el-table-column> -->
          <!-- 用户提现地址 -->
          <el-table-column
            prop="appliedAddress"
            :label="$t(`pay.appliedAddress`)"
           width="370"
          >
          </el-table-column>

          <!-- <el-table-column
         
            prop="message"
            :label="$t(`pay.Remarks`)"
            width="150"
          >
          </el-table-column> -->
          <el-table-column
            :label="$t(`pay.operation`)"
            fixed="right"
            width="230"
          >
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >{{ $t(`pay.confirm`) }}</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >{{ $t(`pay.refuse`) }}</el-button
              > -->

              <el-button
                @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
                {{ $t(`help.details`) }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 确认弹窗 -->
        <el-dialog
          :title="msg"
          :visible.sync="dialogVisible"
          width="30%"
          :close-on-click-modal="false"
          :show-close="false"
        >
          <el-form
            label-position="top"
            :model="handleParams"
            class="WithdrawalBox"
          >
          <!-- 实退金额 -->
            <el-form-item>
              <p><span></span> <span> {{  $t(`pay.refundAmount`) }}</span></p>

              <el-input
                v-model="appliedAmount"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                disabled
                type="number"
                class="no-suffix-icon"
                style="width: 215px; height: 40px"
              ></el-input>
            </el-form-item>
            <!-- 实退txid -->
            <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.refundTxid`) }}</span></p>
              <el-input
                v-model="handleParams.refundTxid"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                style="width: 100%; height: 40px"
              ></el-input>
            </el-form-item>
            <!-- 实退时间 -->
            <!-- <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.refundTime`) }}</span></p>
              <el-date-picker
                v-model="handleParams.refundTime"
                type="datetime"
                :placeholder="$t(`pay.selectDate`)"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item> -->
              <!-- 实退地址-->
              <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.refundAddress`) }}</span></p>
              <el-input
                v-model="handleParams.refundAddress"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                style="width: 100%; height: 40px"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <p><span></span><span> {{ $t(`pay.Remarks`) }}</span></p>
              <el-input
                v-model="handleParams.msg"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                resize="none"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="handelCancel">{{
              $t(`pay.cancel`)
            }}</el-button>
            <el-button
              size="small"
              type="primary"
              @click="handelConfirm"
              :loading="backendLoading"
              >{{ $t(`pay.confirm`) }}</el-button
            >
          </span>
        </el-dialog>
        <!-- 拒绝弹窗 -->
        <el-dialog
          :title="$t(`pay.confirm`)"
          :visible.sync="refuseDialogVisible"
          width="30%"
          :show-close="false"
        >
          <el-form
            label-position="top"
            class="WithdrawalBox"
            :model="handleParams"
          >
            <el-form-item>
              <p><span>*</span> <span> {{ $t(`pay.Remarks`) }}</span></p>
              <el-input
                v-model="handleParams.msg"
                :placeholder="$t(`pay.input`)"
                autocomplete="off"
                resize="none"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="refuseDialogVisible = false">{{
              $t(`pay.cancel`)
            }}</el-button>
            <el-button
              size="small"
              :loading="backendLoading"
              type="primary"
              @click="handelRefuse"
              >{{ $t(`pay.confirm`) }}</el-button
            >
          </span>
        </el-dialog>
      </el-col>
        </el-row>
      
      </el-tab-pane>
  </el-tabs>


   
  </div>
</template>

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

<style lang="scss" scoped>
.Refresh{
  // outline: 1px solid red;
  // height: 20px;
  // position: absolute;
  // left: 100px;
  // top: 28px;
  cursor: pointer;
  margin-left: 10px;
  
}
.Refresh:hover{
  color: #f7931a;
}
.WithdrawalBox {
  // outline: 1px solid red;
  .el-form-item {
    p {
      margin: 0;
      display: flex;
      align-items: center;
      // outline: 1px solid red;
      padding: 0;
      span:nth-of-type(1) {
        color: #ea5326;
        // outline: 1px solid red;
      }
      span:nth-of-type(2) {
        font-weight: 550;
        // outline: 1px solid red;
      }
    }
  }
}
.payHistories {
  // outline: 1px solid red;
  // background:#fef4e8 ;
  padding: 20px 100px;
  min-height: 100vh;
  width: 100%;
}
.searchBox {
  display: flex;
  align-items: center;
  // outline: 1px solid red;
  width: 20%;
  background: #fff;
  .isousuo {
    font-size: 18px;
  }
  .isousuo:hover {
    color: #f7931a;
    cursor: pointer;
  }
}
/* 设置滚动条宽度和高度 */
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//     width: 8px; /* 横向滚动条 */
//     height: 8px; /* 纵向滚动条 必写 */
// }
// /* 设置滚动条样式 */
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
//     background-color: #dde;
//     border-radius: 3px;
// }

// .chart {
//   outline: 1px solid rgba(0, 0, 0, 0.5);

//   text-align: center;
// }
.table {
  margin-top: 10px;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  // border: 1px solid red;
}
// //留言数量
// .information {
//   //  outline: 1px solid rgba(0,0,0,0.5);
//   padding: 5px 10px;
//   // outline: 1px solid red;
//   width: 100%;
//   font-size: 15px;
//   display: flex;
//   margin-top: 5px;
//   font-weight: 600;
//   // span{

//   //   display: inline-block;
//   //   width: 100px;
//   //   //  outline: 1px solid red;
//   //    text-align: right;

//   // }
//   span:nth-of-type(1) {
//     display: inline-block;
//     //  outline: 1px solid red;
//     width: 150px;
//   }
//   .num {
//     color: #21a0ff;
//     display: inline-block;
//     width: 100px;
//     text-align: left;
//     //  outline: 1px solid red;
//     font-weight: 600;
//   }
// }

// .replyDialog {
//   // border: 1px solid red;
//   width: 60%;
//   margin: 0 auto;
// }
//金额输入框图标隐藏 格式调整
::v-deep .no-suffix-icon .el-input__inner {
  // background: red;
  line-height: 30px;
}

.no-suffix-icon ::-webkit-outer-spin-button,
.remove-icon ::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

::v-deep.no-suffix-icon input::-webkit-outer-spin-button,
::v-deep.no-suffix-icon input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep.no-suffix-icon input[type="number"] {
  -moz-appearance: textfield;
}
</style>
<style >
</style>
