<template>
  <div class="account-box">
    <el-row class="bank-account">
      <el-col :span="3">
        <span>选择银行账户: </span>
      </el-col>
      <el-col :span="21">
        <el-select v-model="bankId" placeholder="请选择">
          <el-option
            @change = 'init'
            v-for="item in robotBankList"
            :key="item.account"
            :value="item.account">
            <span>{{ item.account }}</span>
            <span class="tag">{{ item.tag }}</span>
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <!--资产信息-->
    <div class="record-box">
      <div class="title-box clearfix">
        <span class="title">资产信息</span>
      </div>
      <el-table
        v-loading="Loading"
        :data="walletInfo"
        stripe
        style="width: 100%">
        <el-table-column
          width="100"
          label="币种代号">
          <template slot-scope="scope">
            <span>{{ scope.row.coin_id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="币种"
          width="180">
          <template slot-scope="scope">
            <i class="iconfont" :class=" 'icon-'+scope.row.coin+'3'"></i>
            <span>{{ scope.row.coin }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="可用资产">
          <template slot-scope="scope">
            <span>{{ scope.row.active }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="总资产">
          <template slot-scope="scope">
            <span>{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="clickRecharge(scope.row.coin)"
              type="primary"
              size="small">
              充值
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 充值弹框 -->
      <el-dialog
        title="充值"
        :visible.sync="dialogFormVisible"
        :before-close="handleClose"
        :close-on-click-modal = "false"
        center>
        <!-- 内层确认弹框 -->
        <el-dialog
          width="40%"
          title="确认充值"
          :visible.sync="innerVisible"
          :before-close="handleClose"
          :close-on-click-modal = "false"
          append-to-body
          center>
          <el-card class="box-card" style="text-align:left;">
            <p>充值数量：&nbsp;&nbsp;<span>{{amount_num}}</span></p>
            <p>充值币种：&nbsp;&nbsp;<span>{{account_symbol}}</span></p>
            <p style="overflow: hidden;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;From：&nbsp;&nbsp;<span>{{recharge_list_value}}</span></p>
            <p style="overflow: hidden;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To：&nbsp;&nbsp;<span>{{bankId}}</span></p>
            <p>&nbsp;&nbsp;&nbsp;操作人：&nbsp;&nbsp;<span>{{username}}</span></p>
          </el-card>
          <p class="tips">操作前请确认信息</p>
          <div slot="footer" class="dialog-footer">
            <el-button @click="innerVisible = false">取 消</el-button>
            <el-button type="primary" @click="sure_recharge" :disabled="transferok">确认充值</el-button>
          </div>
        </el-dialog>
        <el-form>
          <el-form-item label="充值数量" label-width="120px">
            <el-input v-model="amount_num"></el-input>
          </el-form-item>
          <el-form-item label="充值币种" label-width="120px">
            <el-input v-model="account_symbol" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="From" label-width="120px">
            <el-select
              v-model="recharge_list_value"
              placeholder="请选择账户"
              style="width:100%">
              <el-option
                v-for="item in robotAdminList"
                :key="item.account"
                :value="item.account">
                <span style="float: left">{{ item.account }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.tag }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="To" label-width="120px">
            <el-input v-model="bankId" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="操作人" label-width="120px">
            <el-input v-model="username" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel(),dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="amount_num&&recharge_list_value ? innerVisible=true : innerVisible=false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--操作记录-->
    <div class="record-box">
      <div class="title-box clearfix">
        <span class="title">操作记录</span>
        <div class="select-bar fr clearfix">
          <div class="select-bar-content currency fl" :class="{'unfold' : !foldBar}">
            <span class="title">币种</span>
            <div class="fr">
              <span class="ellipsis" v-show="coinList.length>3 && foldBar">...</span>
              <span class="amount">{{checkedCoins.length}}</span>
              <i class="fold-button"
                 :class="{'el-icon-caret-left' : foldBar, 'el-icon-caret-bottom' : !foldBar}"
                 v-show="coinList.length>3"
                 @click="foldBar = !foldBar"></i>
            </div>
            <el-checkbox-button :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox-button>
            <el-checkbox-group v-model="checkedCoins" @change="handleCheckedChange">
              <el-checkbox-button v-for="coin in coinList" :label="coin" :key="coin">{{coin}}</el-checkbox-button>
            </el-checkbox-group>
          </div>
        </div>
        <el-date-picker
          class="fr"
          v-model="transactionTime"
          :default-time="['00:00:00', '23:59:59']"
          :clearable="false"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="count-box">
        <span class="fl title">总计: </span>
        <ul class="fl">
          <li class="fl" v-for="(value,key) in recordsCountList">
            <span>{{key}}: </span>
            <span>{{value}}</span>
          </li>
        </ul>
      </div>
      <el-table
        v-loading="transactionLoading"
        :data="recordsList"
        stripe
        style="width: 100%">
        <el-table-column
          label="单号">
          <template slot-scope="scope">
            <span>{{ scope.row.id || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="币种"
          width="180">
          <template slot-scope="scope">
            <i class="iconfont" :class=" 'icon-'+scope.row.coin+'3'"></i>
            <span>{{ scope.row.coin }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作用户">
          <template slot-scope="scope">
            <span>{{ scope.row.user }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作前">
          <template slot-scope="scope">
            <span>{{ scope.row.beforeRecharge }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="成交数量">
          <template slot-scope="scope">
            <span>{{ scope.row.transfer_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作后">
          <template slot-scope="scope">
            <span>{{ scope.row.afterRecharge }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作时间">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '0' ? 'success' : 'danger'"
              disable-transitions>{{scope.row.status === '0' ? '充值成功' : '充值失败'}}</el-tag>
          </template>
        </el-table-column>
       <!-- <el-table-column
          label="来源">
          <template slot-scope="scope">
            <span>{{ scope.row.from_account }}</span>
          </template>
        </el-table-column>-->
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        layout="total, prev, pager, next, sizes"
        :total="recordsCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import ApiConfig from "../config/api-config";
  export default {
    data() {
      return {
        username: localStorage.getItem('username'),
        robotBankList: JSON.parse(sessionStorage.getItem('robotBankList')),
        robotAdminList: JSON.parse(sessionStorage.getItem('robotAdminList')),
        bankId: JSON.parse(sessionStorage.getItem('robotBankList'))[0].account,
        walletInfo: [],  //资产信息列表
        coinList: [],//资产信息包含的币种
        recordsList: [], //操作记录总计
        recordsCountList: [], //操作记录总计列表
        recordsCount: 0, //操作记录总条数
        currentPage: 1, //操作记录页码
        pageSize: 10,
        transactionTime: '', //操作记录时间筛选
        isIndeterminate: true,
        checkAll: false,
        checkedCoins: [],
        transactionLoading: false, //操作记录表格刷新标志
        foldBar: true,
        /*充值弹框参数*/
        amount_num:'',//充值数量
        dialogFormVisible:false,//充值弹框
        transferok:false,
        innerVisible: false,//充值确认弹框
        recharge_list_value: '',//充值时候选择的账户
        account_symbol: '',//充值币种
        Loading: false,
      }
    },
    created() {
      this.init();
    },
    methods: {
      /*页面初始化*/
      init() {
        this.getWalletInfo(this.bankId);
        this.getRecords();
      },
      /*获取资产信息*/
      getWalletInfo(params) {
        axios.post(ApiConfig.GetWalletInfo,{account: params}).then( res => {
          // console.log(res.data.data);
          this.walletInfo = res.data.data;
          this.walletInfo.sort((a,b)=>{
            return a.coin_id - b.coin_id
          })
          this.walletInfo.forEach(item => {
            this.coinList.push(item.coin);
          })
          this.coinList = [...new Set(this.coinList)];
        })
      },
      /*查询操作记录*/
      getRecords(page) {
        this.transactionLoading = true;
        let recordParams = {
          account: this.bankId,
          page: page || '1',
          size: this.pageSize + '',
          min_time: this.transactionTime ? this.transactionTime[0] : '',
          max_time: this.transactionTime ? this.transactionTime[1] : '',
          coin: this.checkedCoins,
        }
        axios.post(ApiConfig.Records,recordParams).then( res => {
          // console.log(res.data.data)
          this.transactionLoading = false;
          this.recordsList = res.data.data.list;
          this.recordsCount = res.data.data.count;
          this.recordsCountList = res.data.data.total;
        }).catch(error => {
          this.transactionLoading = false;
          this.$notify({
            title: '错误',
            message: "服务器崩溃啦，请稍后再试",
            type: 'error',
            duration:'2000',
          });
        })
      },
      //点击充币
      clickRecharge(symbol) {
        this.account_symbol = symbol;
        this.dialogFormVisible = true;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.amount_num = '';
            this.recharge_list_value = '';
            this.transferok = false;
          })
          .catch(_ => {});
      },
      //取消充值
      cancel(){
        this.amount_num = '';
        this.recharge_list_value = '';
        this.transferok = false;
      },
      //弹框确认充值
      sure_recharge(){
        const params = {
          user: this.username,
          from_account: this.recharge_list_value,
          account: this.bankId,
          coin: this.account_symbol,
          amount: this.amount_num,
          opt: '0'
        };
        if(!Number(this.amount_num) || this.amount_num<0.00000001 || this.amount_num>1800000000){
          this.$notify({
            title: '提示',
            message: "数量错误",
            type: 'error',
            duration:'2000',
          });
          return;
        }else{
          this.transferok = true;
          this.Loading = true;
          axios.post(ApiConfig.Transfer,params).then(res=>{
            if(res.data.code === 200){
              this.$notify({
                title: '提示',
                message: '充值 :   '+ this.amount_num  +"  "+  this.account_symbol + '   成功',
                type: 'success',
                duration:'2000',
              });
              this.Loading = false;
              setTimeout(()=>{
                this.init();
              },500)
            }else{
              this.Loading = false;
              this.$notify({
                title: '提示',
                message: res.data.msg,
                type: 'error',
                duration:'2000',
              })
            }
            this.dialogFormVisible = false;
            this.innerVisible = false;
            this.amount_num = '';
            this.recharge_list_value = '';
            this.transferok = false;
          }).catch( error => {
            this.Loading = false;
            this.dialogFormVisible = false;
            this.innerVisible = false;
            this.amount_num = '';
            this.recharge_list_value = '';
            this.transferok = false;
            this.$notify({
              title: '错误',
              message: "服务器崩溃啦，请稍后再试",
              type: 'error',
              duration:'2000',
            });
          });
        }
      },
      //币种筛选
      handleCheckAllChange(val) {
        this.checkedCoins = val ? this.coinList : [];
        this.isIndeterminate = false;
        this.getRecords();
      },
      handleCheckedChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.coinList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.coinList.length;
        this.getRecords();
      },
      //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getRecords();
      },
      handleCurrentChange(val) {
        this.getRecords(val+'');
      },
    },
    watch: {
      //操作记录时间筛选
      transactionTime(val) {
        this.getRecords();
      },
    },
  }
</script>

<style scoped>
  .tips {
    color: red;
    margin-top: 30px;
  }
  .account-box {
    padding: 0 20px;
    line-height: 40px;
  }
  .bank-account {
    font-size: 18px;
    color: rgba(51, 51, 51, 1);
  }
  .record-box {
    background:rgba(255,255,255,1);
    border-radius:4px;
    border:1px solid rgba(119,146,167,1);
    padding: 20px;
    margin: 20px 0 20px 0;
  }
  .title-box {
    /*margin-bottom: 20px;*/
    &>.title {
      display: inline-block;
      /*margin-bottom: 20px;*/
      line-height: 40px;
      font-size:18px;
      color:rgba(51,51,51,1);
    }
  }
  .select-bar-content {
    margin-left: 10px;
    width: 410px;
    padding: 0 10px 0 65px;
    background-color: #fff;
    border-radius:4px;
    border:1px solid rgba(224,224,224,1);
    z-index: 100;
    height: 40px;
    overflow: hidden;
    .amount {
      line-height: 26px;

    }
    .ellipsis {
      position: relative;
      top: -3px;
      left: -13px;
    }
    &.unfold {
      height: auto;
    }
    .title {
      display: inline-block;
      width: 65px;
      text-align: center;
      position: relative;
      left: -65px;
    }
    .fold-button {
      cursor: pointer;
      line-height: 26px;
      color: rgba(192,212,218,1);
    }
  }
  /*操作记录总计*/
  .count-box {
    line-height: 30px;
    color: rgba(51,51,51,1);
    .title {
      font-size: 16px;
      margin-right: 10px;
    }
    li {
      font-size: 15px;
      margin-right: 10px;
      span:first-child {
        font-size: 14px;
        color: rgba(128,128,128,1);
      }
    }
  }
</style>
<style>
  .el-select-dropdown__item.selected .tag {
    float: right;
  }
  .account-box {
    .select-bar-content {
      .el-checkbox-button:last-child .el-checkbox-button__inner, .el-checkbox-button:first-child .el-checkbox-button__inner {
        border-radius: 3px;
      }
      &.pair {
        .el-checkbox-button__inner{
          width: 85px;
        }
        .el-checkbox-group .el-checkbox-button:first-child {
          margin-left: 90px;
        }
      }
      .el-checkbox-button__inner {
        padding: 5px 0;
        width: 58px;
        text-align: center;
        background-color: #C3D3DF;
        border-color: #C3D3DF;
        box-shadow: none;
        color: #fff;
        border-radius: 3px;
        font-size: 12px;
      }
      .el-checkbox-button {
        margin: 0 10px 0 0;
        border-radius: 3px;
      }
      .el-checkbox-button.is-checked .el-checkbox-button__inner {
        background-color: #7792A7;
        border-color: #7792A7;
      }
      .el-checkbox-button.is-focus .el-checkbox-button__inner {
        border-color: #dcdfe6;
      }
      &>.el-checkbox-button {
        margin-left: -69px;
      }
      .el-checkbox-group {
        margin-top: -40px;
        .el-checkbox-button:first-child {
          margin-left: 70px;
        }
      }
    }
  }
</style>
