<template>
  <div>
    <!-- <NavHeader></NavHeader> -->
    <div>
      <div class="balances">
        <div class="total">
          <div class="total_inner">
            <!-- 总资产 -->
            <span>{{ $t('balances.table.taotal') }}</span>
            <span class="total_inner-many"
              >{{ tatolPrice | formatV }} USDT</span
            >
            <!-- <span>USDT</span> -->
            <span class="total_secondary-text">
              <span class="total_symbol">≈</span>
              <!-- 切换汇率 -->
              <!-- <span>{{tatolPrice * usdAmount | formatV}} USD</span> -->
              <span v-if="!currentrate"
                >{{ (tatolPrice * usdAmount) | formatV }} USD</span
              >
              <span v-else-if="currentrate == 'HKD'"
                >{{ (tatolPrice * hkdAmount) | formatV }} HKD</span
              >
              <span v-else-if="currentrate == 'USD'"
                >{{ (tatolPrice * usdAmount) | formatV }} USD</span
              >
              <span v-else-if="currentrate == 'CNY'"
                >{{ (tatolPrice * cnyAmount) | formatV }} CNY</span
              >
              <span v-else>{{ (tatolPrice * eurAmount) | formatV }} EUR</span>
            </span>
          </div>
        </div>

        <!-- 标题 -->
        <el-row class="cec-table1" stripe>
          <el-col class="cec-title" stripe>
            <div class="title">{{ $t('balances.table.header_pair') }}</div>
            <div class="title">{{ $t('balances.table.header_last_yes') }}</div>
            <div class="title">{{ $t('balances.table.header_last_no') }}</div>
            <!-- <span>BTC估值</span> -->
            <div class="title">{{ $t('balances.table.header_last_ok') }}</div>
          </el-col>
        </el-row>

        <!-- 内容 -->
        <el-row
          class="cec-table gundong"
          stripe
          v-if="btcMoney != '' || ethMoney != '' || eosMoney != ''"
        >
          <!-- btc钱包内容 -->
          <el-col
            class="cec-title"
            v-for="(itembtc, indexBtc) in btcMoney"
            :key="'info2-' + indexBtc"
          >
            <!-- 币种 -->
            <div>
              <span type="text" style="cursor: default;">{{
                itembtc.tokenSymbol
              }}</span>
            </div>

            <!-- 可用 -->
            <div>
              <span type="text" class="white size">{{
                itembtc.freeBalance | formatV
              }}</span>
            </div>
            <!-- 冻结 -->
            <div>
              <span type="text" class="white size">{{
                itembtc.freezeBalance | formatV
              }}</span>
            </div>
            <!-- <div>
              <el-button type="text" class="white size">o.oooooo</el-button>
            </div>-->
            <div>
              <!-- 充值 -->
              <span
                class="blue"
                @click="handleTableActionClick('deposit', itembtc)"
                type="text"
                >{{ $t('balances.table.header_last_recharge') }}</span
              >
              <!-- 提币   -->
              <span
                @click="handleTableActionClick('withdrawal', itembtc)"
                type="text"
                >{{ $t('balances.table.header_last_mention') }}</span
              >
              <!-- 划转 -->
              <span
                @click="handleTableActionClick('transfer', itembtc)"
                type="text"
                >{{ $t('balances.table.header_last_hua') }}</span
              >
              <!-- 交易  -->
              <a href="./trade">
                <span type="text">{{
                  $t('balances.table.header_last_deal')
                }}</span>
              </a>
              <!-- 财务记录 -->
              <a
                :href="
                  './balancesRecord/record?id=' +
                    itembtc.tokenSymbol +
                    '&addr=' +
                    itembtc.addr +
                    '&tokenId=' +
                    itembtc.tokenId
                "
              >
                <span type="text">{{
                  $t('balances.table.header_last_financial')
                }}</span>
              </a>
            </div>
          </el-col>

          <!-- eth钱包内容 -->
          <!-- <el-col class="cec-title" :data="ethMoney"> -->
          <el-col
            class="cec-title"
            v-for="(itemETH, indexETH) in ethMoney"
            :key="'info4-' + indexETH"
          >
            <!-- 币种 -->
            <div>
              <span type="text" style="cursor: default;">{{
                itemETH.tokenSymbol
              }}</span>
            </div>
            <!-- 可用 -->
            <div>
              <span type="text" class="white size">{{
                itemETH.freeBalance | formatV
              }}</span>
            </div>
            <!-- 冻结 -->
            <div>
              <span type="text" class="white size">{{
                itemETH.freezeBalance | formatV
              }}</span>
            </div>

            <div>
              <!-- 充值 -->
              <span
                @click="handleTableActionClick('deposit', itemETH)"
                type="text"
                >{{ $t('balances.table.header_last_recharge') }}</span
              >
              <!-- 提币 -->
              <span
                @click="handleTableActionClick('withdrawal', itemETH)"
                type="text"
                >{{ $t('balances.table.header_last_mention') }}</span
              >
              <!-- 划转 -->
              <span
                @click="handleTableActionClick('transfer', itemETH)"
                type="text"
                >{{ $t('balances.table.header_last_hua') }}</span
              >
              <!-- 交易-->
              <a href="./trade">
                <span type="text">{{
                  $t('balances.table.header_last_deal')
                }}</span>
              </a>

              <!-- 财务记录 -->
              <a
                :href="
                  './balancesRecord/record?id=' +
                    itemETH.tokenSymbol +
                    '&addr=' +
                    itemETH.addr +
                    '&tokenAddr=' +
                    itemETH.tokenAddr
                "
              >
                <span type="text">{{
                  $t('balances.table.header_last_financial')
                }}</span>
              </a>
            </div>
          </el-col>

          <!-- eos钱包内容 -->
          <el-col
            class="cec-title"
            v-for="(item, indexEos) in eosMoney"
            :key="indexEos"
          >
            <!-- 币种 -->
            <div>
              <span type="text" style="cursor: default;">{{
                item.tokenSymbol
              }}</span>
            </div>
            <!-- 可用 -->
            <div>
              <span type="text" class="white size">{{
                item.freeBalance | formatV
              }}</span>
            </div>
            <!-- 冻结 -->
            <div>
              <span type="text" class="white size">{{
                item.freezeBalance | formatV
              }}</span>
            </div>
            <div>
              <!-- 充值 -->
              <span
                @click="handleTableActionClick('deposit', item)"
                type="text"
                >{{ $t('balances.table.header_last_recharge') }}</span
              >
              <!-- 提币   -->
              <span
                @click="handleTableActionClick('withdrawal', item)"
                type="text"
                >{{ $t('balances.table.header_last_mention') }}</span
              >
              <!-- 划转 -->
              <span
                @click="handleTableActionClick('transfer', item)"
                type="text"
                >{{ $t('balances.table.header_last_hua') }}</span
              >
              <!-- 交易  -->
              <a href="./trade">
                <span type="text">{{
                  $t('balances.table.header_last_deal')
                }}</span>
              </a>
              <!-- 财务记录 -->
              <a
                :href="
                  './balancesRecord/record?id=' +
                    item.tokenSymbol +
                    '&addr=' +
                    item.userOpenId +
                    '&addrId=' +
                    item.id +
                    '&tokenName=' +
                    item.tokenName
                "
              >
                <span type="text">{{
                  $t('balances.table.header_last_financial')
                }}</span>
              </a>
            </div>
          </el-col>
        </el-row>
        <!-- 判断是否有记录  ,无则显示  -->
        <el-row v-else class="no-data1">
          <el-col class="no-data">
            <div>
              <img src="../../assets/home/ic_shuju.png" alt />
            </div>
            <div>{{ $t('balances.table.header_nodata') }}</div>
          </el-col>
        </el-row>
      </div>
      <!-- </main> -->
    </div>

    <!-- 充值 -->
    <el-dialog
      :title="$t('balances.table.header_last_recharge')"
      width="745px"
      :visible.sync="ctrl.depositDialogVisible"
    >
      <BalancesDepositWidget :taInfo="tatoo"></BalancesDepositWidget>
    </el-dialog>

    <!-- 提币 -->
    <el-dialog
      :title="$t('balances.table.header_last_mention')"
      width="745px"
      :visible.sync="ctrl.withdrawalDialogVisible"
      v-if="ctrl.withdrawalDialogVisible"
    >
      <BalancesWithdrawalWidget :tiInfo="titoo"></BalancesWithdrawalWidget>
    </el-dialog>

    <!-- 划转 -->
    <el-dialog
      :title="$t('balances.table.header_between')"
      width="745px"
      :visible.sync="ctrl.transferDialogVisible"
      @close="closeTrans"
    >
      <div>
        <!-- 提币请划转至OTC交易账户 -->
        <p>{{ $t('balances.table.header_betweenOtc') }}</p>
        <div class="transfer-form">
          <el-form :model="form" label-position="top">
            <!-- 币种 -->
            <el-form-item :label="$t('balances.table.header_pair')">
              <el-input v-model="form.bi" :disabled="true"></el-input>
            </el-form-item>

            <!-- 从 -->
            <el-form-item :label="$t('balances.table.header_cong')">
              <el-input v-model="form.get" :disabled="true"></el-input>
            </el-form-item>
            <!-- 转至 -->
            <el-form-item :label="$t('balances.table.header_zhuan')">
              <el-input v-model="form.out" :disabled="true"></el-input>
            </el-form-item>

            <!-- 金额 -->
            <el-form-item :label="$t('balances.table.header_many')">
              <el-input
                v-model="form.amount"
                :change="check_amount()"
              ></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              class="btn-widget"
              @click="handletransfer()"
              :loading="loading"
              >{{ $t('balances.table.header_liji') }}</el-button
            >
            <el-button
              @click="ctrl.transferDialogVisible = false"
              class="btn-widgetq"
              >{{ $t('balances.table.header_dele') }}</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 子组件
import NavHeader from '@/components/common/header';
import BalancesDepositWidget from '@/components/balances/balances-deposit-widget';
import BalancesWithdrawalWidget from '@/components/balances/balances-withdrawal-widget';
// import BanlancesTransfer from '@/components/balances/banlances-transfer';

// 引入汇率
import {getExchangeRateCookie} from '@/utils/auth';

// 获取请求
import {getBtc, chargeBtc, chargeUsdt, transferBtc, addBtc} from '@/api/btc.js';

import {getEth, chargeEth, transferEth, addEth} from '@/api/eth.js';

import {getEos, upEosAddr, chargeEos, transferEos, addEos} from '@/api/eos.js';

import {getLeftPrice} from '@/api/currency.js';

import {log} from 'util';

export default {
  name: 'BalancesTabds',
  components: {
    NavHeader,
    BalancesDepositWidget,
    BalancesWithdrawalWidget,
    // BanlancesTransfer,
  },

  data() {
    return {
      form: {
        bi: '',
        get: this.$t('balances.table.header_accountBibi'),
        out: this.$t('balances.table.header_accountOtc'),
        amount: '',
      },
      // activeName: 'first',
      // balances: MockData.balances,
      ctrl: {
        depositDialogVisible: false,
        withdrawalDialogVisible: false,
        transferDialogVisible: false,
      },
      tatoo: [], //充值总数组
      titoo: [], //提币数组
      huatoo: [], //划转数组
      ethMoney: [],
      eosMoney: [],
      btcMoney: [],
      eosAddr: [], //eos充值地址
      ethChange: [],
      eosChange: [],
      btcChange: [],
      usdtChange: [],
      DestroyIncomeStatistics: true,
      USDTPrie: [],
      ethMang: 0, //eth总数量
      eosMang: 0, //eos总数量
      btcMang: 0, //btc总数量
      usdtMang: 0, //usdt资产
      ethPrice: 0, //eth资产
      pcPrice: 0, //pc资产
      eosPrice: 0, //eos资产
      btcPrice: 0, //btc资产
      tatolPrice: 0, //总资产
      currentrate: '', //获取头部汇率
      cnyAmount: '', //汇率
      eurAmount: '',
      hkdAmount: '',
      usdAmount: '',
      loading: false,
      //限制 划账金额
      check_amount: function() {
        var amount = '' + this.form.amount;
        amount = amount
          .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
          .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
          .replace('.', '$#$')
          .replace(/\./g, '')
          .replace('$#$', '.')
          .replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3'); // 只能输入6个小数
        if (amount.indexOf('.') < 0 && amount != '') {
          // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
          amount = parseFloat(amount);
        }
        this.form.amount = amount;
      },
    };
  },
  created() {
    // 获取头部栏点击汇率
    this.currentrate = getExchangeRateCookie();

    this.initAddr();
    this.changeEth();
    this.initEth();
    this.changeEos();
    this.initEos();
    this.changeBtc();
    this.changeUsdt();
    this.initBtc();
    this.getUSDTPrie();
  },
  methods: {
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    /**
     * 表格触发操作
     * @param {Object} row
     * @param {string} action - "deposit | withdrawal | trade"
     */
    handleTableActionClick(action, name) {
      switch (action) {
        case 'deposit':
          // 充值弹窗
          // if (name.tokenSymbol == 'PC') {
          //   this.$message.warning('敬请期待!');
          //   return;
          // }
          this.ctrl.depositDialogVisible = true;
          this.tatoo = name;

          // if (name.tokenSymbol == 'EOS') {
          //   addEos({
          //     addr: name.addr,
          //     tokenId: name.tokenSymbol,
          //     walletType: 'CCT',
          //   }).then(res => {
          //     if (res.data.code === 200) {
          //       // 充值成功！
          //       this.$message.success(this.$t('balances.table.add'));
          //       setInterval(() => {
          //         location.reload(); //成功刷新页面
          //       }, 1000);
          //     } else {
          //       this.$message.error(res.data.msg);
          //     }
          //   });
          // } else if (name.tokenSymbol == 'BTC' || name.tokenSymbol == 'USDT') {
          //   addBtc({
          //     addr: name.addr,
          //     tokenId: name.tokenSymbol,
          //     walletType: 'CCT',
          //   }).then(res => {
          //     if (res.data.code === 200) {
          //       this.$message.success(this.$t('balances.table.add'));
          //       setInterval(() => {
          //         location.reload(); //成功刷新页面
          //       }, 1000);
          //     } else {
          //       this.$message.error(res.data.msg);
          //     }
          //   });
          // } else {
          //   addEth({
          //     addr: name.addr,
          //     tokenId: name.tokenSymbol,
          //     walletType: 'CCT',
          //   }).then(res => {
          //     if (res.data.code === 200) {
          //       this.$message.success(this.$t('balances.table.add'));
          //       setInterval(() => {
          //         location.reload(); //成功刷新页面
          //       }, 1000);
          //     } else {
          //       this.$message.error(res.data.msg);
          //     }
          //   });
          // }
          break;
        case 'withdrawal':
          // 提币弹窗
          this.ctrl.withdrawalDialogVisible = true;
          this.titoo = name;
          // console.log(this.titoo);
          break;

        case 'transfer':
          //划转弹窗
          // if (name.tokenSymbol == 'PC') {
          //   this.$message.warning('敬请期待!');
          //   return;
          // }
          this.ctrl.transferDialogVisible = true;
          this.huatoo = name;
          this.form.bi = this.huatoo.tokenSymbol;
          // console.log(this.huatoo);

          break;
        default:
      }
    },
    // 获取eth手续费等  供提币功能使用
    changeEth() {
      // chargeEth({tokenSymbol: 'ETH'}).then(res => {
      //   this.ethChange = res.data.data;
      //   // console.log(this.ethChange);
      // });
      // chargeEth({tokenSymbol: 'PC'}).then(res => {
      //   this.pcChange = res.data.data;
      //   // console.log(this.pcChange);
      // });
    },
    // 获取eth初始数据
    initEth() {
      getEth().then(res => {
        if (res.data.code === 200) {
          this.ethMoney = res.data.data;
          // console.log(this.ethMoney);
          // 根据数组长度,分别给对象添加新的属性
          for (let i = 0; i < this.ethMoney.length; i++) {
            chargeEth({tokenSymbol: this.ethMoney[i].tokenSymbol}).then(res => {
              this.ethChange.push(res.data.data);
              // console.log(this.change);
              for (let j = 0; j < this.ethMoney.length; j++) {
                this.ethMoney[j]['gasPrice'] = this.ethChange[j].gasPrice;
                this.ethMoney[j]['minWdAmount'] = this.ethChange[j].minWdAmount;
                // 拿到资产数额
                // this.ethMang =
                //   this.ethMang + parseFloat(this.ethMoney[j].balance);
                // console.log(this.ethMang);
              }
            });
            // console.log(this.ethMoney);
          }
        }
      });
    },
    // 获取eos手续费等  供提币功能使用
    changeEos() {
      chargeEos().then(res => {
        this.eosChange = res.data.data || {};
        // console.log(this.eosChange);
      });
    },
    // 获取eos充值地址,只有eos需要
    initAddr() {
      upEosAddr().then(res => {
        if (res.data.code === 200) {
          // console.log(res);

          this.eosAddr = res.data.data || {};
          // console.log(this.eosAddr);//null;
        }
      });
    },
    // 获取eos初始数据
    initEos() {
      getEos().then(res => {
        if (res.data.code === 200) {
          this.eosMoney = res.data.data;
          // console.log(this.eosMoney);
          // 赋值新的属性addr,跟btc,eth一致,方便渲染
          for (let i = 0; i <= this.eosMoney.length; i++) {
            // 拿到资产数额
            this.eosMang = this.eosMoney[i].balance;
            // console.log(this.eosMang);
            this.eosMoney[i]['addr'] = this.eosAddr.accountName;
            this.eosMoney[i]['gasPrice'] = this.eosChange.gasPrice;
            this.eosMoney[i]['minWdAmount'] = this.eosChange.minWdAmount;
            // // 再次复制新的属性
            // this.eosMoney[i] = Object.assign({}, this.eosMoney[i], {
            //   gasPrice: this.eosChange.gasPrice, //手续费
            //   minWdAmount: this.eosChange.minWdAmount, //最小提币
            // });

            // console.log(this.eosMoney);
            return this.eosMoney;
          }
        }
      });
    },
    // 获取btc手续费等  供提币功能使用
    changeBtc() {
      chargeBtc().then(res => {
        this.btcChange = res.data.data;
        // console.log(this.btcChange);
      });
    },
    // 获取USDT手续费等  供提币功能使用
    changeUsdt() {
      chargeUsdt().then(res => {
        this.usdtChange = res.data.data;
        // console.log(this.usdtChange);
      });
    },
    // 获取btc初始数据
    initBtc() {
      getBtc().then(res => {
        if (res.data.code === 200) {
          this.btcMoney = res.data.data;
          // console.log(this.btcMoney);
          // 根据数组长度,分别给BTC,USDT对象添加新的属性
          for (let i = 0; i < this.btcMoney.length; i++) {
            if (i == 0) {
              // 拿到资产数额
              this.btcMang = this.btcMoney[i].balance;
              // console.log(this.btcMang);

              this.btcMoney[i]['gasPrice'] = this.btcChange.gasPrice;
              this.btcMoney[i]['minWdAmount'] = this.btcChange.minWdAmount;
              continue;
            } else if (i == 1) {
              // 拿到资产数额
              this.usdtMang = this.btcMoney[i].balance;
              // console.log(this.usdtMang);

              this.btcMoney[i]['gasPrice'] = this.usdtChange.gasPrice;
              this.btcMoney[i]['minWdAmount'] = this.usdtChange.minWdAmount;
            }
            // console.log(this.btcMoney);
            return this.btcMoney;
          }
        }
      });
    },
    // 获取行情USDT币种最新价
    getUSDTPrie() {
      getLeftPrice().then(res => {
        this.USDTPrie = res.data.data;
        // console.log(this.USDTPrie);

        // 获取币种汇率
        this.cnyAmount = this.USDTPrie[0].cnyAmount;
        this.eurAmount = this.USDTPrie[0].eurAmount;
        this.hkdAmount = this.USDTPrie[0].hkdAmount;
        this.usdAmount = this.USDTPrie[0].usdAmount;

        for (let i = 0; i < this.USDTPrie.length; i++) {
          // 获取btc转usdt资产
          if (this.USDTPrie[i].currencyPair == 'BTC-USDT') {
            // console.log(this.USDTPrie[i].amount);
            this.btcPrice = this.btcMang * this.USDTPrie[i].amount;
            // console.log('btc'+this.btcPrice);
          }
          // return this.btcPrice;
        }

        for (let j = 0; j < this.ethMoney.length; j++) {
          for (let i = 0; i < this.USDTPrie.length; i++) {
            // console.log(this.ethMoney[j].tokenSymbol);
            if (
              this.USDTPrie[i].currencyPair.split('-')[0] ==
                this.ethMoney[j].tokenSymbol &&
              this.USDTPrie[i].currencyPair.split('-')[1] == 'USDT'
            ) {
              // console.log(this.USDTPrie[i].amount);
              this.ethPrice =
                this.ethMoney[j].balance * this.USDTPrie[i].amount +
                this.ethPrice;
              // console.log('eth' + this.ethPrice);
            }
          }
        }

        for (let i = 0; i < this.USDTPrie.length; i++) {
          // 获取eos转usdt资产
          if (this.USDTPrie[i].currencyPair == 'EOS-USDT') {
            // console.log(this.USDTPrie[i].amount);
            this.eosPrice = this.eosMang * this.USDTPrie[i].amount;
            // console.log('eos'+this.eosPrice);
          }
          // return this.eosPrice;
        }

        // 获取总资产
        this.tatolPrice =
          this.btcPrice + this.usdtMang + this.ethPrice + this.eosPrice;
        // console.log(this.tatolPrice);
      });
    },
    closeTrans() {
      this.form.amount = '';
    },
    //划转
    handletransfer() {
      if (this.form.amount == 0 || this.form.amount > this.huatoo.freeBalance) {
        this.$message.warning(this.$t('balances.table.asset_warin'));
        return;
      }
      // console.log(this.form.bi);
      // console.log(this.form.amount);
      this.loading = true;
      if (this.form.bi == 'BTC' || this.form.bi == 'USDT') {
        transferBtc({
          fromType: 'CCT',
          toType: 'C2C',
          coinName: this.form.bi,
          amount: this.form.amount,
        }).then(res => {
          // console.log(res);
          if (res.data.code === 200) {
            this.ctrl.transferDialogVisible = false;
            this.form.amount = '';
            this.$message.success(this.$t('balances.table.header_huasccess'));
            this.loading = false;
            // location.reload(); //成功刷新页面
            this.initBtc();
          } else {
            this.ctrl.transferDialogVisible = false;
            this.form.amount = '';
            this.loading = false;
            this.$message.error(res.data.msg);
          }
        });
      } else if (this.form.bi == 'EOS') {
        transferEos({
          fromType: 'CCT',
          toType: 'C2C',
          coinName: this.form.bi,
          amount: this.form.amount,
        }).then(res => {
          // console.log(res);
          if (res.data.code === 200) {
            this.ctrl.transferDialogVisible = false;
            this.form.amount = '';
            this.$message.success(this.$t('balances.table.header_huasccess'));
            this.loading = false;
            // window.location.reload();
            this.initEos();
          } else {
            this.ctrl.transferDialogVisible = false;
            this.form.amount = '';
            this.$message.error(res.data.msg);
            this.loading = false;
          }
        });
      } else {
        transferEth({
          fromType: 'CCT',
          toType: 'C2C',
          coinName: this.form.bi,
          amount: this.form.amount,
        }).then(res => {
          // console.log(res);
          if (res.data.code === 200) {
            this.ctrl.transferDialogVisible = false;
            this.form.amount = '';
            this.$message.success(this.$t('balances.table.header_huasccess'));
            this.loading = false;
            // window.location.reload();
            this.initEth();
          } else {
            this.ctrl.transferDialogVisible = false;
            this.loading = false;
            this.form.amount = '';
            this.$message.error(res.data.msg);
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
.balances {
  margin-top: 40px;
  background-color: #24252c;
  .total {
    padding: 28px 61px;
    &_inner {
      font-size: 24px;
      color: #9ba0bc;
      &-many {
        font-size: 18px;
        margin-left: 30px;
      }
    }

    &_secondary-text {
      font-size: 18px;
      color: #545663;
    }

    &_symbol {
      margin: 0 3px;
    }
  }
}
.cec-table1 {
  .cec-title {
    // height: 40px;
    font-size: 14px;
    color: #545663;
    padding: 14px 61px;
    display: flex;
    font-size: 14px;
    background-color: #1f2026;
    div {
      // margin-right: 50px;
      // margin-right: 2.5%;
    }
    div:first-child {
      flex: 2;
    }
    div:nth-child(2) {
      flex: 2;
    }
    div:nth-child(3) {
      flex: 2;
    }
    div:nth-child(4) {
      flex: 5;
      span {
        margin-right: 30px;
        font-size: 14px;
        color: #c7282c;
        letter-spacing: 0;
        cursor: pointer;
      }
    }
  }
}
.cec-table {
  .cec-title {
    // height: 50px;
    font-size: 14px;
    padding: 20px 61px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #9ba0bc !important;
    letter-spacing: 0;
    background-color: #24252c;
    &:nth-of-type(2n) {
      background-color: #1f2026;
    }
    div {
      // margin-right: 50px;
      // margin-right: 2.5%;
    }
    div:first-child {
      flex: 2;
    }
    div:nth-child(2) {
      flex: 2;
    }
    div:nth-child(3) {
      flex: 2;
    }
    div:nth-child(4) {
      flex: 5;
      span {
        margin-right: 30px;
        font-size: 14px;
        color: #545663;
        cursor: pointer;
      }
    }
  }
}
.white {
  color: #545663;
}
.size {
  font-size: 14px;
}
.title {
  font-size: 14px;
  color: #545663;
}
.no-data1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
  text-align: center;
  margin-bottom: 200px;
}
.no-data {
  color: #9ba0bc;
  font-size: 14px;
  img {
    width: 60px;
    height: 60px;
  }
}
.coins-main {
  padding: 0 1.4%;
}
.el-button--text {
  color: #333;
  &:hover {
    color: #333;
  }
  &:active {
    color: #333;
  }
}
.el-button {
  &:hover {
    color: #333;
  }
  &:active {
    color: #333;
  }
}
.transfer-form {
  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .el-form-item {
    width: 45%;
  }
  .el-select {
    width: 423px;
  }
  // .el-input__inner{
  //   width: 45%;
  // }
}
.dialog-footer {
  display: flex;
  flex-direction: row-reverse;
  .btn-widget {
    margin-left: 19px;
    background-color: #e8494a;
    border-color: #e8494a !important;
    width: 100px;
    height: 40px;
    color: #fff;
    &:active {
      background: #e8494a;
      border-color: #e8494a !important;
      color: #fff;
    }
  }
  .btn-widgetq {
    margin-left: 19px;
    background-color: #24252c;
    width: 100px;
    height: 40px;
    color: #686e7c;
    &:active {
      background-color: #24252c;
      color: #686e7c;
    }
  }
  .el-button {
    border-color: #545663;
  }
}
// .el-input__inner:focus {
//   background-color: #fff;
// }
.el-input__inner {
  font-size: 12px;
  height: 36px;
  color: #9ba0bc;
}
.gundong {
  height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 200px;
}
// 滚动条
::-webkit-scrollbar {
  width: 2px;
  height: 5px;
  background-color: #24252c;
}
::-webkit-scrollbar-thumb {
  // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.el-form-item {
  width: 45%;
}
.el-form--label-top .el-form-item__label {
  padding: 0;
}
// Estimated Value
</style>
