<template>
  <div class="detail-box">
    <div class="back-button" @click="closeDetails()">
      <i class="el-icon-arrow-left"></i>
      <span>返回</span>
    </div>
    <el-row :gutter="20" class="operation-area">
      <el-col :span="16">
        <div class="dashboard" :class="[(robotDetailInfo.base_status==='abnormal' ||robotDetailInfo.coin_status==='abnormal' || robotDetailInfo.profit_status === 'abnormal') ? 'abnormal' : robotDetailInfo.status || 'normal']">
          <div class="chart-box">
            <p class="title">今日盈亏</p>
            <p class="data" :class="robotInfo.today_profit && robotInfo.today_profit.indexOf('-')!== -1 ? 'lose' : 'gain'">{{robotInfo.today_profit}}</p>
            <div class="type-box">
              <p v-show="robotInfo.status==='normal'" class="type">正在运行</p>
              <p v-show="robotInfo.status==='stop'" class="type">停止运行</p>
              <p>
                <span class="result">总盈亏</span>
                <span class="data" :class="robotInfo.all_profit && robotInfo.all_profit.indexOf('-')!== -1 ? 'lose' : 'gain'">{{robotInfo.all_profit}}</span>
              </p>
            </div>
            <div class="switch">
              <span v-show="value1">关闭</span>
              <span v-show="!value1">开启</span>
              <el-switch
                disabled
                v-model="value1"
                active-color="rgba(119,146,167,1)"
                inactive-color="rgba(236,239,241,1)">
              </el-switch>
            </div>
          </div>
          <div class="dashboard-details">
            <p>
              <span>机器人名称</span>
              <span>{{robotInfo.tag}}</span>
            </p>
            <p>
              <span>交易对</span>
              <span>{{robotInfo.coin}}/{{robotInfo.base}}</span>
            </p>
            <p>
              <span>账户地址</span>
              <span>{{robotInfo.account}}</span>
            </p>
            <p>
              <span>运行状态</span>
              <span v-show="robotInfo.status==='normal'" class="green">正在运行</span>
              <span v-show="robotInfo.status==='stop'" class="red">停止运行</span>
            </p>
            <p>
              <span>交易所</span>
              <span>{{robotInfo.platform}}</span>
            </p>
            <p>
              <span>行情</span>
              <span>{{ticketInfo.price}}{{robotDetailInfo.base}}</span>
              <span class="cny">≈¥{{ticketInfo.value}}</span>
              <br>
              <span :class="[(ticketInfo.rise && ticketInfo.rise.indexOf('-')!== -1) ? 'green' : 'red']">{{ticketInfo.rise}}</span>
            </p>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="handle-box">
          <div class="handle-content" v-loading="Loading" element-loading-text="正在刷新数据">
            <div class="handle">
              <span class="coin-name">{{robotInfo.coin}}</span>
              <span class="button" @click="clickRecharge(robotInfo.coin)">充币</span>
              <span class="button" @click="clickWithdraw(robotInfo.coin)">提币</span>
            </div>
            <p class="item">
              <span class="type-name">可用</span>
              <span>{{coinInfo.active}}</span>
            </p>
            <p class="item">
              <span class="type-name">冻结</span>
              <span>{{coinInfo.frozen}}</span>
            </p>
            <p class="item">
              <span class="type-name">总量</span>
              <span>{{coinInfo.amount}}</span>
            </p>
            <p class="item">
              <span class="type-name">标准</span>
              <span>{{robotInfo.coin_normal}}</span>
            </p>
            <p class="item">
              <span class="type-name">比例</span>
              <span :class="robotInfo.coin_status">{{robotInfo.coin_percent}}（总量/标准）</span>
            </p>
          </div>
          <div class="handle-content" v-loading="Loading" element-loading-text="正在刷新数据">
            <div class="handle">
              <span class="coin-name">{{robotInfo.base}}</span>
              <span class="button" @click="clickRecharge(robotInfo.base)">充币</span>
              <span class="button" @click="clickWithdraw(robotInfo.base)">提币</span>
            </div>
            <p class="item">
              <span class="type-name">可用</span>
              <span>{{baseInfo.active}}</span>
            </p>
            <p class="item">
              <span class="type-name">冻结</span>
              <span>{{baseInfo.frozen}}</span>
            </p>
            <p class="item">
              <span class="type-name">总量</span>
              <span>{{baseInfo.amount}}</span>
            </p>
            <p class="item">
              <span class="type-name">标准</span>
              <span>{{robotInfo.base_normal}}</span>
            </p>
            <p class="item">
              <span class="type-name">比例</span>
              <span :class="robotInfo.base_status">{{robotInfo.base_percent}}（总量/标准）</span>
            </p>
          </div>
          <!-- 充币弹框 -->
          <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>{{robotDetailInfo.account}}</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('0')" :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 robotBankList"
                    :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="robotDetailInfo.account" :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>
          <!-- 提币弹框 -->
          <el-dialog
            title="提币"
            :visible.sync="dialogFormVisible1"
            :before-close="handleClose"
            :close-on-click-modal = "false"
            center>
            <!-- 内层确认弹框 -->
            <el-dialog
              width="40%"
              title="确认提币"
              :visible.sync="innerVisible1"
              :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>{{robotDetailInfo.account}}</span></p>
                <p style="overflow: hidden;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To：&nbsp;&nbsp;<span>{{recharge_list_value}}</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="innerVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="sure_recharge('1')" :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-input v-model="robotInfo.account" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="To" label-width="120px">
                <el-select
                  v-model="recharge_list_value"
                  placeholder="请选择账户"
                  style="width:100%">
                  <el-option
                    v-for="item in robotBankList"
                    :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="操作人" 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(),dialogFormVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="amount_num&&recharge_list_value ? innerVisible1=true : innerVisible1=false">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <!--充提记录-->
    <div class="record-box" v-loading="Loading" element-loading-text="正在刷新数据">
      <div class="title-box clearfix">
        <span class="title">充提记录</span>
        <div class="select-bar fr clearfix">
          <div class="select-bar-content fl">
            <span class="title">类型</span>
            <el-checkbox-button :indeterminate="isIndeterminate2" v-model="checkAll2" @change="handleCheckAllChange2">全部</el-checkbox-button>
            <el-checkbox-group v-model="checkedOptions1" @change="handleCheckedChange2">
              <el-checkbox-button v-for="(option,index) in options1" :label="index+''" :key="option">{{option}}</el-checkbox-button>
            </el-checkbox-group>
          </div>
          <div class="select-bar-content fl">
            <span class="title">状态</span>
            <el-checkbox-button :indeterminate="isIndeterminate3" v-model="checkAll3" @change="handleCheckAllChange3">全部</el-checkbox-button>
            <el-checkbox-group v-model="checkedStates1" @change="handleCheckedChange3">
              <el-checkbox-button v-for="(state,index) in states1" :label="index+''" :key="state">{{state}}</el-checkbox-button>
            </el-checkbox-group>
          </div>
          <div class="select-bar-content fl">
            <span class="title">币种</span>
            <el-checkbox-button :indeterminate="isIndeterminate4" v-model="checkAll4" @change="handleCheckAllChange4">全部</el-checkbox-button>
            <el-checkbox-group v-model="checkedCoins" @change="handleCheckedChange4">
              <el-checkbox-button v-for="coin in coins" :label="coin" :key="coin">{{coin}}</el-checkbox-button>
            </el-checkbox-group>
          </div>
        </div>
        <el-date-picker
          class="fr"
          :clearable="false"
          v-model="transactionTime1"
          :default-time="['00:00:00', '23:59:59']"
          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 class="fl">
          <el-button type="primary" @click="exportExcel" size="mini">导出当前页</el-button>
          <el-button type="primary" @click="exportExcel('all')" size="mini">导出所有</el-button>
        </div>
        <!--隐藏的下载表格按钮-->
        <a id="download" href="" target="blank" hidden download></a>
      </div>
      <el-table
        v-loading="recordsLoading"
        :data="list1"
        stripe
        style="width: 100%">
        <el-table-column
          label="单号">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          label="币种">
          <template slot-scope="scope">
            <span>{{ scope.row.coin }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          label="类型">
          <template slot-scope="scope">
            <span>{{ scope.row.opt }}</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.fee || '--' }}</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="日期"
          width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          label="状态">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '成功' ? 'success' : 'danger'"
              disable-transitions>{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize1"
        layout="total, prev, pager, next, sizes"
        :total="total1">
      </el-pagination>
    </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 fl">
            <span class="title">类型</span>
            <el-checkbox-button :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox-button>
            <el-checkbox-group v-model="checkedOptions" @change="handleCheckedChange">
              <el-checkbox-button v-for="(option, index) in options" :label="index+''" :key="option">{{option}}</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>
      <el-table
        v-loading="transactionLoading"
        :data="list"
        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="类型">
          <template slot-scope="scope">
            <span>{{ scope.row.opt }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="成交价">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</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
          label="成交金额">
          <template slot-scope="scope">
            <span>{{ scope.row.sum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="手续费">
          <template slot-scope="scope">
            <span>{{ scope.row.fee || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="时间"
          width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</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="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Bus from '../assets/js/bus'
  import axios from 'axios';
  import ApiConfig from "../config/api-config";
  export default {
    data(){
      return{
        robotBankList: JSON.parse(sessionStorage.getItem('robotBankList')),
        robotDetailInfo: JSON.parse(sessionStorage.getItem('robotDetailInfo')),
        robotInfo: {},
        ticketInfo: '',//行情
        username: localStorage.getItem('username'),
        value1: true,
        coinInfo: {},//目标币账户信息
        baseInfo: {},//基础币账户信息
        amount_num:'',//充值数量
        dialogFormVisible:false,//充值弹框
        transferok:false,
        innerVisible: false,//充值确认弹框
        dialogFormVisible1:false,//提现弹框
        innerVisible1: false,//提现确认弹框
        recharge_list_value: '',//充值时候选择的账户
        account_symbol: '',//充提币种
        /*交易记录参数*/
        transactionTime: null,// 时间筛选
        pageSize: 10, //表格每页的条数
        currentPage: 1, //分页(当前页数)
        total: 0, //记录总条数
        list: [],//表格数据
        isIndeterminate: true,
        checkAll: false,
        checkedOptions: [],
        options: ["买入", "卖出"],
        /*充提记录参数*/
        transactionTime1: null,// 时间筛选
        pageSize1: 10, //表格每页的条数
        currentPage1: 1, //分页(当前页数)
        total1: 0, //记录总条数
        list1: [],//表格数据
        recordsCountList: [],//充提记录统计
        isIndeterminate2: true,
        checkAll2: false,
        checkedOptions1: [],
        options1: ["充币", "提币"],
        isIndeterminate3: true,
        checkAll3: false,
        checkedStates1: [],
        states1: ["成功", "失败"],
        isIndeterminate4: true,//币种筛选
        checkAll4: false,
        checkedCoins: [],
        coins: [],
        Loading: false,//充提币后数据加载标志
        transactionLoading: false, //充提记录查询加载
        recordsLoading: false,//交易记录查询加载
      }
    },
    created() {
      this.init();
    },
    methods: {
      //页面初始化
      init() {
        this.coins = [this.robotDetailInfo.coin, this.robotDetailInfo.base];
        this.getWalletInfo();
        this.getTransaction();
        this.getRecords();
        this.getCurrentRobot();
        this.getTicket();
      },
      //返回上一页（关闭详情）
      closeDetails() {
        // Bus.$emit('back');
        this.$router.go(-1);
      },
      //查询行情信息
      getTicket() {
        const symbol = this.robotDetailInfo.coin+'/'+this.robotDetailInfo.base;
        const params = {
          symbol: symbol,
          platform: this.robotDetailInfo.platform,
        }
        axios.post(ApiConfig.Ticket,params).then( res => {
          if(res.data.code === 200) {
            this.ticketInfo = res.data.data;
          }
        })
      },
      //查询当前机器人信息
      getCurrentRobot() {
        const symbol = this.robotDetailInfo.coin+'/'+this.robotDetailInfo.base;
        const params = {
          class: 'robot',
          account: this.robotDetailInfo.account,
          symbol: [symbol]
        }
        axios.post(ApiConfig.GetMatchRobots,params).then( res => {
          if (res.data.code === 200) {
            // console.log(res.data.data);
            this.robotInfo = res.data.data[0];
          }
        }).catch( error => {
          this.$notify({
            title: '错误',
            message: "服务器崩溃啦，请稍后再试",
            type: 'error',
            duration:'2000',
          });
        })
      },
      //查询账户资金信息
      getWalletInfo() {
        const params = {
          account: this.robotDetailInfo.account,
          coin: this.robotDetailInfo.coin,
          base: this.robotDetailInfo.base,
        }
        axios.post(ApiConfig.GetWalletInfo,params).then( res=> {
          if (res.data.code === 200) {
            const Data = res.data.data;
            for (let item of Data) {
              this.coinInfo = item.coin === this.robotDetailInfo.coin ? item : this.coinInfo;
              this.baseInfo = item.coin === this.robotDetailInfo.base ? item : this.baseInfo;
            }
          }
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.amount_num = '';
            this.recharge_list_value = '';
            this.transferok = false;
          })
          .catch(_ => {});
      },
      //点击充币
      clickRecharge(symbol) {
        this.account_symbol = symbol;
        this.dialogFormVisible = true;
      },
      //取消充值
      cancel(){
        this.amount_num = '';
        this.recharge_list_value = '';
        this.transferok = false;
      },
      //弹框确认充值
      sure_recharge(key){
        const params = {
          user: this.username,
          from_account: this.recharge_list_value,
          account: this.robotDetailInfo.account,
          coin: this.account_symbol,
          amount: this.amount_num,
          symbol: this.robotDetailInfo.coin + '/' + this.robotDetailInfo.base,
          opt: key
        };
        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: key === "0" ? '充值 :   '+ this.amount_num  +"  "+  this.account_symbol + '   成功' : '提现:   ' + 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.dialogFormVisible1 = false;
            this.innerVisible = false;
            this.innerVisible1 = false;
            this.amount_num = '';
            this.recharge_list_value = '';
            this.transferok = false;
          }).catch( error => {
            this.Loading = false;
            this.dialogFormVisible = false;
            this.dialogFormVisible1 = false;
            this.innerVisible = false;
            this.innerVisible1 = false;
            this.amount_num = '';
            this.recharge_list_value = '';
            this.transferok = false;
            this.$notify({
              title: '错误',
              message: "服务器崩溃啦，请稍后再试",
              type: 'error',
              duration:'2000',
            });
          });
        }
      },
      //点击提币
      clickWithdraw(symbol) {
        this.account_symbol = symbol;
        this.dialogFormVisible1 = true;
      },
      //查询交易记录
      getTransaction(params) {
        this.transactionLoading = true;
        const baseParams = {
          account: this.robotDetailInfo.account,
          coin: this.robotDetailInfo.coin,
          base: this.robotDetailInfo.base,
          page: "1",
          size: this.pageSize+'',
          opt: this.checkedOptions,
          min_time: this.transactionTime ? this.transactionTime[0] : '',
          max_time: this.transactionTime ? this.transactionTime[1] : '',
        };
        params = Object.assign({},baseParams,params);
        axios.post(ApiConfig.Transaction, params).then( res => {
          if (res.data.code === 200){
            this.transactionLoading = false;
            let result = res.data.data;
            this.total = result.count;
            if (result.list) {
              this.list = result.list.map(item => {
                item.opt = item.opt==="0" ? "买入" : "卖出";
                return item;
              })
            }else {
              this.list =[];
            }
          }
        })
      },
      //查询充提记录
      getRecords(params) {
        this.recordsLoading = true;
        const Coin = this.checkedCoins.length !== 0 ? this.checkedCoins : this.coins;
        const baseParams = {
          account: this.robotDetailInfo.account,
          coin: Coin,
          page: "1",
          size: this.pageSize1+'',
          opt: this.checkedOptions1,
          status: this.checkedStates1,
          min_time: this.transactionTime1 ? this.transactionTime1[0] : '',
          max_time: this.transactionTime1 ? this.transactionTime1[1] : '',
        };
        params = Object.assign({},baseParams,params);
        axios.post(ApiConfig.Records, params).then( res => {
          if (res.data.code === 200){
            this.recordsLoading = false;
            let result = res.data.data;
            this.total1 = result.count;
            this.recordsCountList = result.total;
            if (result.list) {
              this.list1 = result.list.map(item => {
                item.opt = item.opt==="0" ? "充币" : "提币";
                item.status = item.status==="0" ? "成功" : "失败";
                return item;
              })
            }else {
              this.list1 = [];
            }
          }
        })
      },
      //交易记录筛选
      handleCheckAllChange(val) {
        this.checkedOptions = val ? ['0','1'] : [];
        this.isIndeterminate = false;
        this.getTransaction();
      },
      handleCheckedChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.options.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
        this.getTransaction();
      },
      //交易记录分页
      handleSizeChange(val) {
        this.pageSize = val+'';
        this.getTransaction();
      },
      handleCurrentChange(val) {
        this.getTransaction({page: val+''});
      },
      /*充提记录筛选*/
      //类型筛选
      handleCheckAllChange2(val) {
        this.checkedOptions1 = val ? ['0', '1'] : [];
        // console.log(this.checkedOptions1);
        this.isIndeterminate2 = false;
        this.getRecords();
      },
      handleCheckedChange2(value) {
        let checkedCount = value.length;
        this.checkAll2 = checkedCount === this.options1.length;
        this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.options1.length;
        this.getRecords();
      },
      //状态筛选
      handleCheckAllChange3(val) {
        this.checkedStates1 = val ? ['0', '1'] : [];
        this.isIndeterminate3 = false;
        this.getRecords();
      },
      handleCheckedChange3(value) {
        let checkedCount = value.length;
        this.checkAll3 = checkedCount === this.states1.length;
        this.isIndeterminate3 = checkedCount > 0 && checkedCount < this.states1.length;
        this.getRecords();
      },
      //币种筛选
      handleCheckAllChange4(val) {
        this.checkedCoins = val ? this.coins : [];
        this.isIndeterminate4 = false;
        this.getRecords();
      },
      handleCheckedChange4(value) {
        let checkedCount = value.length;
        this.checkAll4 = checkedCount === this.coins.length;
        this.isIndeterminate4 = checkedCount > 0 && checkedCount < this.coins.length;
        this.getRecords();
      },
      //分页
      handleSizeChange1(val) {
        this.pageSize1 = val+'';
        this.getRecords();
      },
      handleCurrentChange1(val) {
        this.getRecords({page: val+''});
      },
      //'='拼接key和value
      toQueryPair(key, value) {
        if (typeof value == 'undefined'){
          console.log(key)
          return;
        }
        return key + '=' + (value === null ? '' : String(value));
      },
      //'&'拼接，数组将value转换成','连接的string
      toQueryString(obj) {
        var ret = [];
        for(var key in obj){
          var values = obj[key];
          // key = encodeURIComponent(key);
          if(values && values.constructor == Array){//数组
            var queryValues = values.join(',');
            ret.push(this.toQueryPair(key, queryValues));
          }else{ //字符串
            ret.push(this.toQueryPair(key, values));
          }
        }
        return ret.join('&');
      },
      //导出
      exportExcel(type) {
        let params = {
          account: this.robotDetailInfo.account,
          symbol: this.robotDetailInfo.coin+'/'+this.robotDetailInfo.base,
          opt: this.checkedOptions1,
          status: this.checkedStates1,
          min_time: this.transactionTime1 ? this.transactionTime1[0] : '',
          max_time: this.transactionTime1 ? this.transactionTime1[1] : '',
        }
        if(type !== 'all') {
          Object.assign(params,{
            page: this.currentPage,
            size: this.pageSize,
          })
        }
        let downloadHref = document.getElementById('download');
        const href = ApiConfig.Excle + '?' + this.toQueryString(params);
        downloadHref.setAttribute('href', href);
        downloadHref.click();
      }
    },
    watch: {
      /*$route() {
        this.robotDetailInfo = JSON.parse(sessionStorage.getItem('robotDetailInfo'));
        this.init();
      },*/
      robotDetailInfo() {
        this.init();
      },
      //交易记录时间筛选
      transactionTime(val) {
        this.getTransaction();
      },
      //充提记录时间筛选
      transactionTime1(val) {
        this.getRecords();
      },
    }
  }
</script>

<style scoped>
  .detail-box {
    overflow: hidden;
  }
  .back-button {
    cursor: pointer;
    width: 80px;
    height: 40px;
    line-height: 40px;
    background:rgba(119,146,167,1);
    border-radius:4px;
    font-size:18px;
    color:rgba(255,255,255,1);
    i {
      position: relative;
      left: 5px;
    }
  }
  .operation-area {
    margin-top: 20px;
    .dashboard {
      height: 290px;
      border-radius:4px;
    }
    .normal {
      border:1px solid rgba(146,208,171,1);
      .chart-box {
        border: 3px solid #73C795;
      }
      .type {
        color:rgba(76,171,115,1);
      }
    }
    .stop {
      border:1px solid rgba(208,216,220,1);
      .chart-box {
        border: 3px solid rgba(208,216,220,1);
      }
      .type {
        color:rgba(121,130,134,1);
      }
    }
    .abnormal {
      border:1px solid rgba(217,120,120,1);
      .chart-box {
        border: 3px solid rgba(217,120,120,1);
      }
      .type {
        color:rgba(217,120,120,1);
      }
    }
  }
  .dashboard {
    position: relative;
  }
  .chart-box {
    float: left;
    margin: 43px 0 0 40px;
    width: 154px;
    box-sizing: border-box;
    height: 154px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    padding-top: 43px;
    .title {
      height: 17px;
      font-size:12px;
      color:rgba(128,128,128,1);
      line-height:17px;
    }
    .data {
      font-size:24px;
      line-height:33px;
      &.gain {
        color:rgba(217,120,120,1);
      }
      &.lose {
        color:rgba(76,171,115,1);
      }
      &.none {
        color:rgba(208,216,220,1);
      }
    }
    .type-box {
      height: 40px;
      width: 100%;
      background-color: white;
      position: absolute;
      bottom: -5px;
      .type {
        font-size:14px;
        /*color:rgba(76,171,115,1);*/
        line-height:20px;
        margin: -10px 0 4px 0;
      }
      .result {
        font-size:12px;
        color:rgba(128,128,128,1);
        line-height:17px;
      }
      .data {
        font-size:14px;
        color:rgba(217,120,120,1);
        line-height:20px;
      }
    }
  }
  .chart-box .switch {
    height: 20px;
    position: absolute;
    margin-left: 50%;
    left: -34px;
    bottom: -50px;
  }
  .dashboard-details {
    margin: 43px 0 0 205px;
    p {
      line-height: 20px;
      padding: 0 25px 9px 100px;
      position: relative;
      .cny {
        font-size:12px;
        color:rgba(128,128,128,1);
      }
      .green {
        color: #4CAB73;
      }
      .red {
        color: #D97878;
      }
      .gray {
        color: #D0D8DC;
      }
      span {
        font-size:14px;
        color:rgba(51,51,51,1);
        word-break:break-all;
        &:first-child {
          position: absolute;
          width: 100px;
          height: 20px;
          left: -10px;
          margin-right: 10px;
          text-align: right;
          font-size:12px;
          color:rgba(128,128,128,1);
        }
      }
    }
  }
  .handle-content {
    height: 140px;
    border-radius:4px;
    border:1px solid rgba(119,146,167,1);
    padding: 10px 0 0 20px;
    .handle {
      height: 25px;
      position: relative;
      margin-bottom: 4px;
    }
    .coin-name {
      font-size:18px;
      font-family:PingFang-SC-Bold;
      color:rgba(51,51,51,1);
      line-height:25px;
    }
    .button {
      position: absolute;
      width:60px;
      height:25px;
      top: 0;
      left: 58px;
      background:rgba(119,146,167,1);
      border-radius:4px;
      line-height: 25px;
      text-align: center;
      color:rgba(255,255,255,1);
      font-size:12px;
      cursor: pointer;
      &:last-child {
        left: 128px;
      }
    }
    &:first-child {
      margin-bottom: 10px;
    }
    .item {
      line-height: 18px;
      font-size:13px;
      color:rgba(51,51,51,1);
      .abnormal {
        color: rgb(217,120,120);
        border: none;
      }
      .normal {
        color: rgba(76,171,115,1);
        border: none;
      }
      /*margin-bottom: 4px;*/
      .type-name {
        display: inline-block;
        width: 35px;
        font-size:12px;
        color:rgba(128,128,128,1);
      }
    }
  }
  .tips {
    color: red;
    margin-top: 30px;
  }
  .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 {
    &>.title {
      display: inline-block;
      margin-bottom: 20px;
      line-height: 40px;
      font-size:18px;
      color:rgba(51,51,51,1);
    }
  }
  .select-bar-content {
    width: 255px;
    margin: 0 0 20px 20px;
    background-color: #fff;
    border-radius:4px;
    border:1px solid rgba(224,224,224,1);
    height: 40px;
    line-height: 40px;
    .title {
      display: inline-block;
      width: 40px;
      text-align: center;
      position: relative;
      left: -40px;
      font-size: 12px;
      color:rgba(119,146,167,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>
  /*select组件样式覆盖*/
  .detail-box {
    .count-box .el-button {
      background: rgba(119,146,167,1);
      border: none;
    }
    .select-bar-content {
      padding: 2px 0 0 65px;
      .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 10px 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: -34px;
        .el-checkbox-button:first-child {
          margin-left: 70px;
        }
      }
    }
    .record-box {
      .select-bar-content {
        padding: 0 0 0 40px;
        .el-checkbox-button {
          margin: 0 12px 0 0;
          border-radius: 3px;
        }
        .el-checkbox-button.is-focus .el-checkbox-button__inner {
          border-color: #dcdfe6;
        }
        &>.el-checkbox-button {
          margin-left: -40px;
          position: relative;
          top: -2px;
        }
        .el-checkbox-group {
          margin-top: -41px;
          .el-checkbox-button:first-child {
            margin-left: 72px;
          }
        }
      }
      .select-bar-content.status-select {
        width: 400px;
        &.small {
          width: 255px;
        }
      }
      .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
        width: 370px;
      }
      .el-date-editor .el-range-input, .el-date-editor .el-range-separator {
        margin-right: 5px;
      }

    }
  }
</style>


