<template>
  <!-- 后台确认支付页面 -->
  <div class="payHistories">
    <el-row>
      <el-col>
        <h3>{{ $t(`login.backendPayment`) }}</h3>

        <el-table
          :data="tableData"
          class="table"
          max-height="750"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="date" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="交易ID" width="180">
          </el-table-column>
          <el-table-column prop="name" label="用户邮箱"> </el-table-column>
          <el-table-column prop="name" label="支付币种"> </el-table-column>
          <el-table-column prop="name" label="支付网络"> </el-table-column>
          <el-table-column prop="name" label="支付金额"> </el-table-column>
          <el-table-column prop="name" label="当前等级"> </el-table-column>
          <el-table-column prop="name" label="目标等级"> </el-table-column>
          <el-table-column prop="name" label="所需金额"> </el-table-column>
          <el-table-column prop="name" label="申请时间"> </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >确认</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >拒绝</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 确认弹窗 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"         
        >
          <span>{{ msg }}</span>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

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

<style lang="scss" scoped>
.payHistories {
  // outline: 1px solid red;
  // background:#fef4e8 ;
  padding: 20px 100px;
  // height: 100vh;
  width: 100%;
}

/* 设置滚动条宽度和高度 */
// ::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.5);
  // 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;
// }
</style>
<style >
</style>
