<template>
  <div>
    <!-- 出售   OTC二级标题 -->
    <ul class="exchange-menu-tab">
      <li class="exchange-item" v-for="(item, index) in list" :key="index">
        <a
          class="blue"
          :class="{blueOne: changeblue == index}"
          @click="hangdelClickBlue(index, item)"
          >{{ item.coinName }}</a
        >
      </li>
    </ul>
    <!-- <ExchangeSellBtn :sellcoinName="coinName"></ExchangeSellBtn> -->
    <div>
      <!-- 出售 表格 -->
      <div class="bian">
        <!-- 商家（成单|完成率) -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="userImg"
            :label="
              $t('exchangeotc.transaction.user') +
                '（' +
                $t('exchangeotc.transaction.userSuccess') +
                '|' +
                $t('exchangeotc.transaction.userAchieve') +
                ')'
            "
          >
            <template slot-scope="scope">
              <div class="specialInfor">
                <span class="imgTou" v-if="scope.row.userImg">
                  <img :src="fileImg + scope.row.userImg" alt />
                </span>
                <span class="imgTou" v-else="(scope.row.userImg = !'')">
                  <img src="../../assets/otc/touxiang.png" alt />
                </span>
                <span>
                  <span class="touxiangs">
                    {{ scope.row.nickname }}
                    <br />
                    <span class="marAdnum">
                      （
                      {{ scope.row.adTransNum }}
                      |
                      {{
                        (scope.row.adMarkNum / scope.row.adTransNum) | formatW
                      }}
                      %）
                    </span>
                  </span>
                </span>
              </div>
            </template>
          </el-table-column>
          <!-- 数量 -->
          <el-table-column
            prop="lastNum"
            :label="$t('exchangeotc.transaction.lastNum')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.lastNum }} {{ scope.row.coinName }}</span>
            </template>
          </el-table-column>
          <!-- 限额 -->
          <el-table-column
            prop="minLimit"
            :label="$t('exchangeotc.transaction.minLimit')"
          >
            <template slot-scope="scope">
              <span
                >{{ scope.row.minLimit }}-{{ scope.row.maxLimit
                }}{{ scope.row.unitName }}</span
              >
            </template>
          </el-table-column>
          <!-- 单价 -->
          <el-table-column
            prop="price"
            :label="$t('exchangeotc.transaction.price')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.price }}{{ scope.row.unitName }}</span>
            </template>
          </el-table-column>
          <!-- 支付方式 -->
          <el-table-column
            prop="adPay"
            :label="$t('exchangeotc.transaction.adPay')"
          >
            <template slot-scope="scope">
              <div class="fukung">
                <span v-if="scope.row.adPay.indexOf('WX') != -1">
                  <img
                    src="../../assets/otc/weixin.png"
                    alt
                    class="tableimg tableimgWX"
                  />
                </span>
                <span v-if="scope.row.adPay.indexOf('ZFB') != -1">
                  <img
                    src="../../assets/otc/zhifubao.png"
                    alt
                    class="tableimg tableimgZFB"
                  />
                </span>
                <span v-if="scope.row.adPay.indexOf('BANK') != -1">
                  <img
                    src="../../assets/otc/qianbao.png"
                    alt
                    class="tableimg tableimgBANK"
                  />
                </span>
              </div>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            prop="operation"
            :label="$t('exchangeotc.transaction.operation')"
          >
            <template slot-scope="scope">
              <!-- 出售 -->
              <div class="btn-exchange" @click="hangdleBuy(scope.row)">
                {{ $t('exchangeotc.transaction.sell') }}
                {{ scope.row.coinName }}
              </div>
            </template>
          </el-table-column>
          <div slot="empty">
            <div>
              <img src="../../assets/home/ic_shuju.png" alt />
            </div>
            <!-- 暂无数据 -->
            <div>{{ $t('balances.table.header_nodata') }}</div>
          </div>
        </el-table>
        <!-- 添加分页 -->
        <div v-show="total">
          <el-pagination
            class="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>

      <!-- 购买对话框 -->
      <el-dialog
        @close="closeDialog()"
        :visible.sync="dialogVisible"
        width="1540px"
      >
        <!-- 第1行 -->
        <div class="exchange-dialog">
          <span class="imgTou" v-if="buyData.userImg">
            <img :src="fileImg + buyData.userImg" alt />
          </span>
          <span class="imgTou" v-else="(buyData.userImg = !'')">
            <img src="../../assets/otc/touxiang.png" alt />
          </span>
          <!-- 名字 -->
          <span class="yan">
            {{ buyData.nickname }}
            <br />
            ({{ buyData.adTransNum }}|{{
              (buyData.adMarkNum / buyData.adTransNum) | formatW
            }}%)
          </span>
          <!-- 单价 -->
          <span class="univalence1">
            <span>{{ $t('exchangeotc.transaction.price') }}</span>
            <br />
            {{ buyData.price }}{{ buyData.unitName }}
          </span>
          <!-- 单价 ,数量 -->
          <div class="dialog-input">
            <!-- 最多出售 -->
            <el-input
              v-model="priceInput"
              :placeholder="
                $t('exchangeotc.transaction.sell_un') +
                  buyData.maxLimit +
                  buyData.unitName
              "
              @keyup.native="priceProving($event, buyData.maxLimit)"
              @input="priceChange($event)"
            >
              <template slot="suffix">
                <span class="wei">{{ buyData.unitName }}</span>
              </template>
            </el-input>

            <span>≈</span>
            <!-- 最多可出售 -->
            <el-input
              v-model="totalInput"
              :placeholder="
                $t('exchangeotc.transaction.sell_cion') +
                  buyData.lastNum +
                  buyData.coinName
              "
              @keyup.native="totalProving($event)"
              @input="totalChange($event)"
            >
              <template slot="suffix">
                <span class="wei">{{ buyData.coinName }}</span>
              </template>
            </el-input>
          </div>
          <div class="dialog-btnSELL">
            <!-- 出售 -->
            <el-button @click="handleGou()" class="dialog-btn1">{{
              $t('exchangeotc.transaction.sell')
            }}</el-button>
            <!-- 取 消 -->
            <div @click="dialogVisible = false" class="dialog-btn2">
              {{ $t('exchangeotc.transaction.delete') }}
            </div>
          </div>
        </div>
        <!-- 第2行  数量 -->
        <div class="exchange-total">
          <span
            >{{ $t('exchangeotc.transaction.lastNum') }} {{ buyData.lastNum }}
            {{ buyData.coinName }}</span
          >
        </div>
        <!-- 第3行 支付方式-->
        <div class="exchange-money">
          <div class="fukung">
            <span v-if="buyDataType.indexOf('WX') != -1">
              <img
                src="../../assets/otc/weixin.png"
                alt
                class="tableimg tableimgWX"
              />
            </span>
            <span v-if="buyDataType.indexOf('ZFB') != -1">
              <img
                src="../../assets/otc/zhifubao.png"
                alt
                class="tableimg tableimgZFB"
              />
            </span>
            <span v-if="buyDataType.indexOf('BANK') != -1">
              <img
                src="../../assets/otc/qianbao.png"
                alt
                class="tableimg tableimgBANK"
              />
            </span>
          </div>
        </div>
      </el-dialog>

      <!-- 交易密码对话框 -->
      <div class="pawDialog">
        <el-dialog
          :title="$t('exchangeotc.transaction.pwd')"
          :visible.sync="passdialogVisible"
          width="650px"
        >
          <div class="passIn">
            <div>{{ $t('exchangeotc.transaction.tanPwd') }}:</div>
            <el-input
              v-model="passInput"
              :placeholder="$t('exchangeotc.transaction.pleasePwd')"
              type="password"
            ></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleDelSELL()">{{
              $t('exchangeotc.transaction.delete')
            }}</el-button>
            <el-button
              type="primary"
              @click="handleSure(passInput)"
              :loading="loading"
              >{{ $t('exchangeotc.transaction.sure') }}</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
// 引入子组件
// import ExchangeSellBtn from './exchange-sell-btn.vue';
// 获取请求
import {getCoin} from '@/api/coin.js';
import {getAdSellList} from '@/api/ad.js';
import {getSellOrder} from '@/api/order.js';
import {getKey} from '@/api/eth.js';
import {FILE_URL} from '@/api/app';
import {getListUserPay} from '@/api/userPay';

// 引入加密模块,对密码进行处理
const JSEncrypt = require('jsencrypt');
// 获取格式化时间函数
import {formatDate} from '@/common/filter';
// 引入cookie
import Cookie from '@/common/cookie.js';

export default {
  name: 'ExchangeTableSell',
  // components: {
  //   ExchangeSellBtn,
  // },
  data() {
    return {
      list: [],
      changeblue: 0,
      coinName: {},
      tableData: [], //列表
      buyData: {}, //被点击购买的那一行
      buyDataType: '',
      dialogVisible: false,
      passdialogVisible: false,
      priceInput: '',
      totalInput: '',
      passInput: '',
      gongKey: '',
      pageNum: 1, //接口固定数
      pageSize: 10, //接口固定数，每页条数
      currentPage: 1, //分页焦点页码
      total: 0, //分页总条数
      coinDecimal: 0, //小数位数
      unitDecimal: 0,
      regCoin: '', //正则
      regUnit: '',
      fileImg: '',
      userListPay: [],
      userData: '', //获取登陆信息
      loading: false,
      // chushouLoading: false,
      // nowDate: '', //当前时间
    };
  },
  created() {
    // if (Boolean(localStorage.getItem('nowPassNOValue'))) {
    //   this.passdialogVisible = Boolean(localStorage.getItem('nowPassNOValue'));
    // }
    // if (
    //   localStorage.getItem('userpass') != '' &&
    //   localStorage.getItem('userpass') != null
    // ) {
    //   if (
    //     localStorage.getItem('userdate') != '' &&
    //     localStorage.getItem('userdate') != null
    //   ) {
    //     this.passdialogVisible = false;
    //     this.passInput = localStorage.getItem('userpass');
    //     this.nowDate = localStorage.getItem('userdate');
    //   }
    // }
    // this.userData = Cookie.get('userData'); //获取登陆信息
    this.userData = localStorage.getItem('userData'); //获取登陆信息
    this.fileImg = FILE_URL;
    // 获取币种
    this.initCoin();
  },
  methods: {
    // 点击切换table栏，变色
    hangdelClickBlue(index, text) {
      this.changeblue = index;
      this.coinName = text;
      // console.log(text);
      this.initBuyList(this.coinName);
      // console.log(this.coinName);
    },
    // 获取币种
    initCoin() {
      getCoin().then(res => {
        // console.log(res);
        this.list = res.data.data;
        this.coinName = this.list[0];
        // console.log(this.coinName);

        this.coinDecimal = this.coinName.coinDecimal;
        this.unitDecimal = this.coinName.unitDecimal;
        this.regCoin = '^(\\d+)\\.(\\d{' + this.coinDecimal + '}).*$';
        this.regUnit = '^(\\d+)\\.(\\d{' + this.unitDecimal + '}).*$';
        // console.log(this.coinName);
        this.initBuyList(this.coinName);
      });
    },
    // 获取列表
    initBuyList(name) {
      getAdSellList({
        coinName: name.coinName,
        unitName: name.unitName,
        pageNum: this.pageNum,
      }).then(res => {
        this.pageNum = 0;
        // console.log(res);
        if (res.data.code === 200) {
          // alert('1212')
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
          // console.log(this.tableData);
        }
      });
    },
    // 点击出售弹窗
    hangdleBuy(row) {
      if (this.userData != '' && this.userData != undefined) {
        var id = localStorage.getItem('userID');
        // console.log(id);
        // console.log(row);
        if (id == row.id) {
          // 请勿与自己发布的广告进行交易
          this.$message.warning(this.$t('exchangeotc.input.order_tan'));
          return;
        }
        // 判断用户绑定支付方式跟广告支付方式的区别
        getListUserPay().then(res => {
          if (res.data.code == 200) {
            this.userListPay = res.data.data;
            if (this.userListPay.length == 0) {
              // 您需激活至少一种的卖方的收款方式,才可以进行出售!
              this.$message.warning(this.$t('exchangeotc.input.adpay_one'));
              return;
            }

            for (let i = 0; i < this.userListPay.length; i++) {
              if (row.adPay.indexOf(this.userListPay[i].payType) != -1) {
                this.dialogVisible = true;
                this.buyData = row;
                this.buyDataType = this.buyData.adPay;
                return;
              } else {
                // 您需激活至少一种的卖方的收款方式,才可以进行出售!
                this.$message.warning(this.$t('exchangeotc.input.adpay_one'));
                return;
              }
            }
          }
        });
      } else {
        // 您还未登录,请先登录!
        this.$message.warning(this.$t('exchangeotc.input.login_warn'));
        return;
      }
    },
    // CNY 框的验证方法
    priceProving(e, name) {
      if (e.target.value > name) {
        // 输入的数量大于最大限额,请重新输入
        this.$message.warning(this.$t('exchangeotc.input.big_total'));
        this.totalInput = '';
        this.priceInput = '';
        return;
      }
      e.target.value = e.target.value.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
      // e.target.value = e.target.value.replace(/^\./g, ''); //验证第一个字符是数字
      e.target.value = e.target.value.replace(/\.{2,}/g, ''); //只保留第一个, 清除多余的
      e.target.value = e.target.value
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.');
      var reg = new RegExp(this.regUnit); //保留2位小数
      e.target.value = e.target.value.replace(reg, '$1.$2');
      if (e.target.value.indexOf('.') < 0 && e.target.value != '') {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        e.target.value = parseFloat(e.target.value);
      }
      if (e.target.value.indexOf('.') == 0) {
        //如果输入类似.123   变为0.123
        e.target.value = '0' + e.target.value;
      }
    },
    // BTC框的验证方法
    totalProving(e) {
      e.target.value = e.target.value.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
      // e.target.value = e.target.value.replace(/^\./g, ''); //验证第一个字符是数字
      e.target.value = e.target.value.replace(/\.{2,}/g, ''); //只保留第一个, 清除多余的
      e.target.value = e.target.value
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.');
      var reg = new RegExp(this.regCoin); //保留6位小数
      e.target.value = e.target.value.replace(reg, '$1.$2');
      if (e.target.value.indexOf('.') < 0 && e.target.value != '') {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        e.target.value = parseFloat(e.target.value);
      }
      if (e.target.value.indexOf('.') == 0) {
        //如果输入类似.123   变为0.123
        e.target.value = '0' + e.target.value;
      }
    },
    // CNY  传递参数给 BTC  函数
    priceChange(e) {
      if (e == '') {
        this.totalInput = '';
        var reg = new RegExp(this.regUnit); //保留2位小数
        e = this.buyData.price * this.totalInput;
        e = e.toString().replace(reg, '$1.$2');
      } else {
        this.totalInput = '';
        var reg = new RegExp(this.regCoin); //保留6位小数
        this.totalInput = e / this.buyData.price;
        this.totalInput = this.totalInput.toString().replace(reg, '$1.$2');
      }
    },
    // BTC  传递参数给 CNY 函数
    totalChange(e) {
      if (e == '') {
        this.priceInput = '';
        var reg = new RegExp(this.regCoin); //保留6位小数
        e = this.priceInput / this.buyData.price;
        e = e.toString().replace(reg, '$1.$2');
      } else {
        this.priceInput = '';
        var reg = new RegExp(this.regUnit); //保留2位小数
        this.priceInput = this.buyData.price * e;
        this.priceInput = this.priceInput.toString().replace(reg, '$1.$2');
      }
    },
    //关闭弹框的事件
    closeDialog() {
      this.priceInput = ''; //清空数据
      this.totalInput = '';
    },
    // 点击出售 密码弹窗
    handleGou() {
      // 验证判断
      if (this.priceInput == '') {
        this.$message.warning(this.$t('exchangeotc.input.total_data'));
        return;
      }
      if (this.totalInput == '') {
        this.$message.warning(this.$t('exchangeotc.input.amount_total'));
        return;
      }
      if (this.buyData.minLimit > this.priceInput) {
        // 交易额不能小于
        this.$message.warning(
          this.$t('exchangeotc.input.total_small') +
            this.buyData.minLimit +
            this.buyData.unitName
        );
        return;
      }

      // // 判断5分钟时间密码是否过期
      // if (!this.passdialogVisible) {
      //   var data = this.nowDate.replace(new RegExp(/-/gm), '/');
      //   //结束时间戳
      //   var lastTime = Date.parse(new Date(data)) + '5' * 60 * 1000;
      //   //当前时间戳
      //   var now = Date.parse(new Date());
      //   //剩余时间戳
      //   var msec = lastTime - now;
      //   //时间已结束
      //   if (msec <= 0) {
      //     this.$message.warning(this.$t('nav.owner_password'));
      //     // 密码输入框出现,清除缓存
      //     this.passInput = '';
      //     this.passdialogVisible = true;
      //     localStorage.removeItem('userpass');
      //     localStorage.removeItem('userdate');
      //     localStorage.removeItem('nowPassNOValue');
      //     return;
      //   }
      // }

      // // 弹窗前先判断是否有缓存密码
      // if (
      //   localStorage.getItem('userpass') != '' &&
      //   localStorage.getItem('userpass') != null
      // ) {
      //   if (
      //     localStorage.getItem('userdate') != '' &&
      //     localStorage.getItem('userdate') != null
      //   ) {
      //     this.passInput = localStorage.getItem('userpass');
      //     this.nowDate = localStorage.getItem('userdate');
      //     this.passdialogVisible = false;
      //     this.chushouLoading = true;
      //     this.handleSure(this.passInput);
      //   }
      // } else
      if (localStorage.getItem('is_pay') === 'true') {
        // 在弹窗之前先判断用户是否设置支付密码,无,则提示用户
        this.passdialogVisible = true;
      } else {
        // 您还未设置支付密码,请返回个人中心进行设置
        this.$message({
          type: 'warning',
          message: this.$t('exchangeotc.input.pwd_no'),
        });
      }
    },
    // 取消密码弹窗
    handleDelSELL() {
      this.passdialogVisible = false;
      this.passInput = '';
    },
    // 输入密码  确定
    handleSure(pass) {
      if (this.passInput == '') {
        // 您还未输入支付密码!
        this.$message({
          type: 'error',
          message: this.$t('exchangeotc.input.pwd_write'),
        });
        return;
      }

      var regTwo = new RegExp(this.regUnit); //保留2位小数
      var reg = new RegExp(this.regCoin); //保留6位小数
      this.priceInput = this.priceInput.toString().replace(regTwo, '$1.$2');
      this.totalInput = this.totalInput.toString().replace(reg, '$1.$2');
      this.loading = true;
      // 发送请求,获取公钥
      getKey().then(res => {
        this.gongKey = res.data.data; // 获取到公钥
        // 传入所请求回来的公钥,对密码进行处理
        // 实例化加密对象
        var crypt = new JSEncrypt.JSEncrypt({
          default_key_size: 1024,
        });
        crypt.setPublicKey(this.gongKey);
        // 拿到加密明文
        let passWord = crypt.encrypt(pass);
        // console.log(passWord);
        // 发送请求
        getSellOrder({
          adId: this.buyData.id,
          amount: this.totalInput,
          price: this.buyData.price,
          turnover: this.priceInput,
          pass: passWord,
        }).then(res => {
          if (res.data.code === 200) {
            // // 5分钟内不输入密码
            // this.nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
            // this.passdialogVisible = false;
            // localStorage.setItem('userpass', this.passInput);
            // localStorage.setItem('userdate', this.nowDate);
            // localStorage.setItem('nowPassNOValue', this.passdialogVisible);

            // 成功跳转订单详情页面
            this.passInput = '';
            this.loading = false;
            // this.chushouLoading = false;
            window.location.href =
              '/echangeGoods/goodsSell?id=' + res.data.data;
            this.$message.success(res.data.msg);
          } else {
            this.dialogVisible = false;
            this.passdialogVisible = false;
            this.loading = false;
            // this.chushouLoading = false;
            this.passInput = '';
            this.$message.error(res.data.msg);
          }
          // else if (res.data.code === 12710) {
          //   this.loading = false;
          //   this.chushouLoading = false;
          //   this.$message.error(res.data.msg);
          //   this.passInput = '';
          //   // 密码输入框出现,清除缓存
          //   this.passdialogVisible = true;

          //   localStorage.removeItem('userpass');
          //   localStorage.removeItem('userdate');
          //   localStorage.removeItem('nowPassNOValue');
          // }
        });
      });
    },
    // 分页功能
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.initBuyList(this.coinName);
    },
  },
};
</script>
<style lang="scss" scoped>
.exchange-menu-tab {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  color: #545663;
  font-size: 16px;
  .exchange-item {
    border-bottom: 2px solid #474855;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #545663;
    > a {
      color: #545663;
    }
  }
}
.blue {
  width: 40px;
  height: 25px;
  font-size: 16px;
  font-weight: 400;
  color: #e8494a;
  line-height: 24px;
  margin-right: 73px;
}
.blueOne {
  width: 40px;
  height: 25px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  border-bottom: 2px solid #e8494a;
  margin-right: 73px;
  color: #e8494a !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bian {
  margin-top: 38px;
  .el-table {
    background-color: #1f2026;
    thead {
      color: #545663;
      font-weight: 500;
      font-size: 14px;
      th {
        height: 45px;
        background-color: #1f2026;
      }
    }
    td {
      height: 65px;
      font-size: 12px;
      font-weight: 500;
      color: #545663;
    }
    tr {
      background-color: #24252c;
      &:nth-of-type(2n) {
        background: #1f2026;
      }
    }
  }
}
.touxiangs {
  position: relative;
  top: 0px;
  left: 15px;
  color: #9ba0bc;
  font-size: 12px;
  // margin-bottom: 10px;
}
.univalence1 {
  color: #9ba0bc;
  margin-left: 130px;
  font-size: 14px;
  span {
    display: inline-block;
    color: #545663;
    padding-bottom: 12px;
    margin-left: 14px;
  }
}
.tableimg {
  margin-right: 10px;
}
.tableimgWX {
  // margin-top: 2px;
  width: 16px;
  height: 16px;
}
.tableimgZFB {
  width: 16px;
  height: 16px;
}
.tableimgBANK {
  // margin-top: 3px;
  width: 16px;
  height: 16px;
}
.yan {
  color: #9ba0bc !important;
  font-size: 16px;
  // margin-left: 1% !important;
}
.wei {
  color: #9ba0bc;
  font-size: 14px;
  position: relative;
  top: 7px;
  right: -29px;
}
// .posiBuy{
//     position: relative;
//   top: 8px;
//   left: 0px;
//   height: 20px;
// }
.exchange-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-input__inner {
  width: 225px !important;
  height: 30px;
}
.dialog-input {
  margin-left: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: none;
  span {
    margin: 0 11px;
  }
  .el-input__inner {
    // padding: 13px 15px;
    color: #9ba0bc;
    width: 250px;
    background-color: #1f2026;
    border: 1px solid #191a21;
    border-color: #545663;
    &:hover {
      border-color: #545663;
    }
    &:focus {
      border-color: #545663;
    }
  }
}
.dialog-btnSELL {
  display: flex;
  justify-content: center;
  align-items: center;
  .el-button {
    width: 80px;
    height: 32px;
    background: #e8494a;
    border: 1px solid #e8494a;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      position: relative;
      top: -4px;
    }
    &:active {
      background: #e8494a;
      border: 1px solid #e8494a;
      color: #fff;
    }
  }
}
.dialog-btn1 {
  margin-left: 54px;
}
.dialog-btn2 {
  cursor: pointer;
  margin-left: 22px;
  color: #9ba0bc;
}
.exchange-total {
  color: #ffffff;
  margin-left: 12px;
  margin-top: 18px;
  // padding: 0px 18px;
  // position: relative;
  display: flex;
  justify-content: space-between;
  span:nth-of-type(1) {
    margin-left: 89px;
  }
  span:nth-of-type(2) {
    margin-right: 55px;
    color: #545663;
  }
}
.exchange-money {
  margin-left: 100px;
  margin-top: 15px;
}
.btn-exchange {
  cursor: pointer;
  width: 70px;
  height: 24px;
  background: #e8494a;
  border: 1px solid #e8494a;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
}
.marAdnum {
  margin-left: -8px;
}
.imgTou {
  width: 28px;
  height: 28px;
  position: relative;
  // top: 10px;
  left: 0;
  top: 6px;
  // padding-top: 10px;
  img {
    width: 28px;
    height: 28px;
  }
}
.fukung {
  display: flex;
  flex-direction: row;
}
.passIn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #9ba0bc;
  font-size: 14px;
  div {
    flex: 1;
  }
  .el-input {
    flex: 3;
  }
}
.el-button--primary {
  color: #ffffff;
  background-color: #c7282c;
  // border-color: #c7282c;
  &:hover {
    color: #ffffff;
    background-color: #c7282c;
  }
  &:active {
    color: #ffffff;
    background-color: #c7282c;
  }
}

.page {
  background: #181a1e;
  float: right;
  margin: 30px 0;
}
.el-pagination .btn-prev {
  background: #181a1e;
  color: #545663;
}
.el-pager li {
  background: #181a1e;
  color: #545663;
}
.el-pagination .btn-next {
  background: #181a1e;
  color: #545663;
}
.el-pager li.btn-quickprev {
  color: #545663;
}
.el-pager li.btn-quicknext {
  color: #545663;
}
.el-pagination button:disabled {
  background: #181a1e;
  color: #545663;
}
.el-pagination__total {
  color: #545663;
}
.el-pager li:hover {
  color: #9ba0bc;
}
.el-pager li.active {
  color: #9ba0bc;
}
.el-icon:hover {
  color: #9ba0bc;
}
.el-dialog__header {
  padding: 0;
  padding-bottom: 0;
}
.el-dialog__body {
  padding: 68px 122px;
  .imgTou {
    img {
      width: 30px;
      height: 30px;
      position: relative;
      top: -4px;
      left: -17px;
    }
  }
}

.el-table__empty-text {
  line-height: 14px;
  color: #9ba0bc;
}
.el-table__empty-block {
  height: 400px;
  background-color: #24252c;
}
.pawDialog {
  .el-dialog__header {
    color: #9ba0bc;
    font-size: 16px;
    padding: 18px 31px;
  }
  .el-dialog__body {
    background-color: #191a21;
    .el-input__inner {
      padding: 13px 15px;
      color: #9ba0bc;
      width: 250px;
      background-color: #1f2026;
      border: 1px solid #191a21;
      border-color: #545663;
      &:hover {
        border-color: #545663;
      }
      &:focus {
        border-color: #545663;
      }
    }
  }
  .el-dialog__footer {
    background-color: #191a21;
    .el-button {
      width: 100px;
      height: 40px;
      background: rgba(232, 73, 74, 0);
      border: 1px solid rgba(84, 86, 99, 1);
      border-radius: 3px;
    }
    .el-button--primary {
      background: #e8494a;
      border-color: #e8494a;
      color: #fff;
      font-size: 14px;
    }
  }
}
.specialInfor {
  display: flex;
  flex-direction: row;
}
</style>
