<template>
  <div class="overview">
    <div class="overview-title">
      <span>机器人监控</span>
    </div>
    <ul class="classify-overview">
      <li class="normal" :class="{ 'filter' : robotStatus === 'normal'}" @click="statusFilter('normal')">
        <p>{{robotStatusList.status_normal}}</p>
        <p>正在运行(台)</p>
      </li>
      <li class="stop" :class="{ 'filter' : robotStatus === 'stop'}" @click="statusFilter('stop')">
        <p>{{robotStatusList.status_stop}}</p>
        <p>停止运行(台)</p>
      </li>
      <li class="abnormal" :class="{ 'filter' : robotStatus === 'profit'}" @click="statusFilter('profit')">
        <p>{{robotStatusList.profit_status_abnormal}}</p>
        <p>盈利异常(台)</p>
      </li>
      <li class="abnormal" :class="{ 'filter' : robotStatus === 'coin'}" @click="statusFilter('coin')">
        <p>{{robotStatusList.coin_status_abnormal}}</p>
        <p>目标币数量异常(台)</p>
      </li>
      <li class="abnormal" :class="{ 'filter' : robotStatus === 'base'}" @click="statusFilter('base')">
        <p>{{robotStatusList.base_status_abnormal}}</p>
        <p>基础币数量异常(台)</p>
      </li>
    </ul>
    <div class="filter-box clearfix">
      <span class="subtitle">{{subtitle}}</span>
      <div class="select-bar clearfix" v-show="!robotStatus">
        <div v-show="showWebFilter" class="select-bar-content exchange" :class="{'unfold' : !foldExchange}">
          <span class="title">交易所</span>
          <div class="fr">
            <span class="ellipsis" v-show="webs.length>3 && foldExchange">...</span>
            <span class="amount">{{checkedWebs.length}}</span>
            <i class="fold-button"
               :class="{'el-icon-caret-left' : foldExchange, 'el-icon-caret-bottom' : !foldExchange}"
               v-show="webs.length>3"
               @click="clickFoldExchange('web')"></i>
          </div>
          <el-checkbox-button :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox-button>
          <el-checkbox-group v-model="checkedWebs" @change="handleCheckedChange">
            <el-checkbox-button v-for="web in webs" :label="web" :key="web">{{web}}</el-checkbox-button>
          </el-checkbox-group>
        </div>
        <div v-show="showCurrencyFilter" class="select-bar-content currency" :class="{'unfold' : !foldExchange0}">
          <span class="title">币种</span>
          <div class="fr">
            <span class="ellipsis" v-show="currencies.length>3 && foldExchange0">...</span>
            <span class="amount">{{checkedCurrencies.length}}</span>
            <i class="fold-button"
               :class="{'el-icon-caret-left' : foldExchange0, 'el-icon-caret-bottom' : !foldExchange0}"
               v-show="currencies.length>3"
               @click="clickFoldExchange('currency')"></i>
          </div>
          <el-checkbox-button :indeterminate="isIndeterminate0" v-model="checkAll0" @change="handleCheckAllChange0">全部</el-checkbox-button>
          <el-checkbox-group v-model="checkedCurrencies" @change="handleCheckedChange0">
            <el-checkbox-button v-for="currency in currencies" :label="currency" :key="currency">{{currency}}</el-checkbox-button>
          </el-checkbox-group>
        </div>
        <div v-show="showPairFilter" class="select-bar-content pair" :class="{'unfold' : !foldExchange1}">
          <span class="title">交易对</span>
          <div class="fr">
            <span class="ellipsis" v-show="pairs.length>3 && foldExchange1">...</span>
            <span class="amount">{{checkedPairs.length}}</span>
            <i class="fold-button"
               :class="{'el-icon-caret-left' : foldExchange1, 'el-icon-caret-bottom' : !foldExchange1}"
               v-show="pairs.length>2"
               @click="clickFoldExchange('pair')"></i>
          </div>
          <el-checkbox-button :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1">全部交易对</el-checkbox-button>
          <el-checkbox-group v-model="checkedPairs" @change="handleCheckedChange1">
            <el-checkbox-button v-for="pair in pairs" :label="pair" :key="pair">{{pair}}</el-checkbox-button>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <ul class="robots-box">
      <li v-for="(item,index) in robotList" :key="item.tag"
          :class="[(item.base_status==='abnormal' ||item.coin_status==='abnormal' || item.profit_status === 'abnormal') ? 'abnormal' : item.status || 'normal']">
        <div class="operations">
          <div class="detail" @click="showDetails(index)">
            <span>查看详情</span>
            <i class="el-icon-caret-right"></i>
          </div>
          <div class="switch">
            <span v-show="value1">关闭</span>
            <span v-show="!value1">开启</span>
            <el-switch
              v-model="value1"
              active-color="rgba(119,146,167,1)"
              inactive-color="rgba(236,239,241,1)"
              @change="clickSwitch"
              disabled>
            </el-switch>
          </div>
        </div>
        <p class="robot-name">{{item.tag}}</p>
        <div class="chart-box">
          <p class="title">今日盈亏</p>
          <p class="data" :class="item.today_profit && item.today_profit.indexOf('-')!== -1 ? 'lose' : 'gain'">{{item.today_profit}}</p>
          <div>
            <p v-show="item.status==='normal'" class="type">正在运行</p>
            <p v-show="item.status==='stop'" class="type">停止运行</p>
            <p>
              <span class="result">总盈亏</span>
              <span class="data" :class="item.all_profit && item.all_profit.indexOf('-')!== -1 ? 'lose' : 'gain'">{{item.all_profit}}</span>
            </p>
          </div>
        </div>
        <div class="coin">
          <span>{{item.coin}}余额</span>
          <div class="sum">
            <span>{{item.coin_amount}}</span>
            <span>{{item.coin}}</span>
          </div>
        </div>
        <div class="base">
          <span>{{item.base}}余额</span>
          <div class="sum">
            <span>{{item.base_amount}}</span>
            <span>{{item.base}}</span>
          </div>
        </div>
      </li>
    </ul>
    <p v-if="robotList === null" class="no-data">暂无数据</p>
  </div>
</template>
<script>
  import Bus from '../assets/js/bus'
  import axios from 'axios';
  import ApiConfig from "../config/api-config";
  export default {
    data() {
      return {
        platform: '',//导航选中的交易所
        value1: true, //是否开启机器人
        robotStatus: '', //机器人状态
        robotStatusList: [],//状态预警信息
        RobotListParams: {
          class: "robot",			//账户级别
          coin: [],				//目标币种，用于首页里的筛选和币种监控 	可选参数
          symbol: [],		//币种对，用于网站监控里的筛选			可选参数
          status: "",			//机器人运行状态							可选参数
          abnormal: "",		//有profit,coin,base这三种异常类别			可选参数
          platform: []		//交易所种类								可选参数
        },//筛选机器人参数
        robotList: [],//符合条件的机器人列表
        robotDetailInfo: '',
        subtitle: '所有机器人', //副标题
        checkAll: false, //交易所筛选
        checkedWebs: [],
        webs: [],
        isIndeterminate: true,
        foldExchange: true,
        checkAll0: false, //币种筛选
        checkedCurrencies: [],
        allCurrencies: [],//所有币种
        currencies: [],
        isIndeterminate0: true,
        foldExchange0: true,
        checkAll1: false, //交易对筛选
        checkedPairs: [],
        pairs: [],
        isIndeterminate1: true,
        foldExchange1: true,
        showWebFilter: false,//是否显示交易所过滤
        showCurrencyFilter: false,//是否显示币种过滤
        showPairFilter: false,//是否显示交易对过滤
      };
    },
    props: ['platInfo'],
    created() {
      this.init();
      Bus.$on('refresh', ()=>{
        setTimeout(()=>{
          this.init();
        },0)
      });
      /*Bus.$on('back', ()=>{
        let Params = {
          class: "robot",			//账户级别
          coin: [],				//目标币种，用于首页里的筛选和币种监控 	可选参数
          symbol: [],		//币种对，用于网站监控里的筛选			可选参数
          status: "",			//机器人运行状态							可选参数
          abnormal: "",		//有profit,coin,base这三种异常类别			可选参数
          platform: []		//交易所种类								可选参数
        };
        if (this.robotStatus==='normal' || this.robotStatus==='stop') {
          Params.status = this.robotStatus;
        }else {
          Params.abnormal = this.robotStatus;
        }
        if(!this.robotStatus) {
          Params.coin = this.checkedCurrencies;
          Params.symbol = this.checkedPairs;
          Params.platform = this.checkedWebs;
        }
        this.getRobotList(Params);
      })*/
    },
    methods: {
      init() {
        this.robotStatus = '', //机器人状态
        this.webs = this.webs.length === 0 && sessionStorage.getItem('webs') ? JSON.parse(sessionStorage.getItem('webs')) : this.webs;
        this.currencies = this.currencies.length === 0 && sessionStorage.getItem('currencies') ? JSON.parse(sessionStorage.getItem('currencies')) : this.currencies;
        const RoutePath = this.$route.params.name;
        // console.log(RoutePath);
        var StatusParams = {platform: '', coin: ''};//预警状态查询入参
        switch (RoutePath) {
          case 'home':
            this.showWebFilter = this.showCurrencyFilter = true;
            this.showPairFilter = false;
            this.RobotListParams.coin = [];
            this.RobotListParams.platform = [];
            break;
          case 'BTY':
          case 'YCC':
            this.showWebFilter = true;
            this.showCurrencyFilter = this.showPairFilter = false;
            StatusParams.coin = RoutePath;
            this.RobotListParams.coin = [RoutePath];
            this.RobotListParams.platform = [];
            break;
          default:
            if (RoutePath) {
              this.showPairFilter = true;
              this.showWebFilter = this.showCurrencyFilter = false;
              var index = +RoutePath;
              this.pairs = JSON.parse(sessionStorage.getItem('platInfo'))[index].symbol;
              this.platform = JSON.parse(sessionStorage.getItem('platInfo'))[index].platform;
              StatusParams.platform = this.platform;
              this.RobotListParams.platform = [this.platform];
              this.RobotListParams.coin = [];
            }
            break;
        }
        this.getRobotStatus(StatusParams);
        this.getRobotList(this.RobotListParams);
      },
      //机器人预警状态查询
      getRobotStatus(params) {
        axios.post(ApiConfig.GetRobotStatus,params).then( res => {
          if (res.data.code === 200) {
            // console.log(res.data)
            this.robotStatusList = res.data.data;
          }
        })
      },
      //获取符合筛选条件的机器人列表
      getRobotList(params) {
        axios.post(ApiConfig.GetMatchRobots,params).then( res => {
          if (res.data.code === 200) {
            // console.log(res.data.data);
            this.robotList = res.data.data;
          }
        }).catch( error => {
          this.$notify({
            title: '错误',
            message: "服务器崩溃啦，请稍后再试",
            type: 'error',
            duration:'2000',
          });
        })
      },
      //交易所过滤
      handleCheckAllChange(val) {
        this.checkedWebs = val ? this.webs : [];
        this.isIndeterminate = false;
        this.currencies = this.allCurrencies;
        this.checkedCurrencies = [];
        this.checkAll0 = false;
        let ListParams =  this.RobotListParams;
        ListParams.platform = [];
        ListParams.coin = [];
        this.getRobotList(ListParams);
      },
      handleCheckedChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.webs.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.webs.length;
        this.checkedCurrencies = [];
        this.checkAll0 = false;
        //动态筛选币种
        if (value.length === 0) {
          this.currencies = this.allCurrencies;
        }else {
          this.currencies = [];
          for (let item of value) {
            for (let platItem of this.platInfo) {
              if (platItem.platform === item) {
                this.currencies = [...new Set(this.currencies.concat(platItem.coin))];
              }
            }
          }
        }
        //筛选符合条件的机器人
        let ListParams =  this.RobotListParams;
        ListParams.platform = value;
        this.getRobotList(ListParams);
      },
      //币种过滤
      handleCheckAllChange0(val) {
        this.checkedCurrencies = val ? this.currencies : [];
        this.isIndeterminate0 = false;
        let ListParams = this.RobotListParams;
        ListParams.platform = this.checkedWebs;
        ListParams.coin = [];
        this.getRobotList(ListParams);
      },
      handleCheckedChange0(value) {
        let checkedCount = value.length;
        this.checkAll0 = checkedCount === this.currencies.length;
        this.isIndeterminate0 = checkedCount > 0 && checkedCount < this.currencies.length;
        let ListParams = this.RobotListParams;
        ListParams.platform = this.checkedWebs;
        ListParams.coin = value;
        this.getRobotList(ListParams);
      },
      //交易对过滤
      handleCheckAllChange1(val) {
        this.checkedPairs = val ? this.pairs : [];
        this.isIndeterminate1 = false;
        this.getRobotList(this.RobotListParams);
      },
      handleCheckedChange1(value) {
        let checkedCount = value.length;
        this.checkAll1 = checkedCount === this.pairs.length;
        this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.pairs.length;
        let ListParams = Object.assign({},this.RobotListParams);
        ListParams.symbol = value;
        this.getRobotList(ListParams);
      },
      showDetails(index) {
        sessionStorage.setItem('robotDetailInfo', JSON.stringify(this.robotList[index]));
        this.$router.push(`/monitor/${this.$route.params.name}/RobotDetail`);
      },
      clickSwitch(val) {
        const Tips = val ? '此操作将开启机器人, 是否继续?' : '此操作将关闭机器人, 是否继续?';
        const Message = val ? '开启机器人成功' : '关闭机器人成功';
        this.$confirm( Tips, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: Message
          });
        }).catch(() => {
          this.value1 = !val;
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      //通过机器人状态筛选
      statusFilter(status) {
        this.robotStatus = status;
        this.subtitle = status === 'normal' ? '正在运行机器人' :
          (status === 'stop' ? '停止运行机器人' :
            (status === 'profit' ? '盈利异常机器人' :
              (status === 'coin' ? '目标币异常机器人' :
                (status === 'base' ? '基础币异常机器人':'所有机器人'))));
        //筛选机器人参数
        const path = this.$route.params.name;
        let Coin = path === 'BTY' || path === 'YCC' ? [path] : [];
        let Platform = (path!=='home'&&path!=='BTY'&&path !== 'YCC') ? [this.platform] : [];
        var ListParams =  {
          class: "robot",			//账户级别
          coin: Coin,				//目标币种，用于首页里的筛选和币种监控 	可选参数
          symbol: [],		//币种对，用于网站监控里的筛选			可选参数
          status: "",			//机器人运行状态							可选参数
          abnormal: "",		//有profit,coin,base这三种异常类别			可选参数
          platform: Platform,		//交易所种类								可选参数
        };
        if (status==='normal' || status==='stop') {
          ListParams.status = status;
        }else {
          ListParams.abnormal = status;
        }
        this.getRobotList(ListParams);
      },
      clickFoldExchange(type) {
        switch (type) {
          case 'web':
            this.foldExchange = !this.foldExchange;
            break;
          case 'currency':
            this.foldExchange0 = !this.foldExchange0;
            break;
          case 'pair':
            this.foldExchange1 = !this.foldExchange1;
            break;
          default:
            break
        }
      }
    },
    watch:{
      platInfo(val){
        this.webs = [];
        //获取所有的交易所和币种
        for (let item of this.platInfo){
          this.webs.push(item.platform);
          this.currencies = this.allCurrencies = [...new Set(this.currencies.concat(item.coin))];
          sessionStorage.setItem('webs', JSON.stringify(this.webs));
          sessionStorage.setItem('currencies', JSON.stringify(this.currencies));
        }
      }
    }
  };
</script>

<style scoped>
  .overview-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    font-size:18px;
    color:rgba(51,51,51,1);
  }
  ul.classify-overview {
    height: 100px;
    li {
      cursor: pointer;
      position: relative;
      float: left;
      width: 18.8%;
      height: 100px;
      margin-right: 1.5%;
      text-align: center;
      box-sizing: border-box;
      border-radius:4px;
      padding-top: 16px;
      &:last-child {
        margin-right: 0;
      }
      p {
        font-size:12px;
        &:first-child {
          font-size:24px;
          margin-bottom: 13px;
        }
      }
    }
    li.normal {
      background:rgba(241,250,244,1);
      border:1px solid rgba(166,216,186,1);
      color:rgba(76,171,115,1);
    }
    li.stop {
      background:rgba(239,243,245,1);
      border:1px solid rgba(199,217,225,1);
      color:rgba(121,130,134,1);
    }
    li.abnormal {
      background:rgba(248,243,243,1);
      border:1px solid rgba(236,184,184,1);
      color:rgba(217,120,120,1);
    }
    li.filter {
      height: 120px;
      top: -10px;
      color: #fff;
      &.normal {
        background-color: rgba(76,171,115,1);
      }
      &.stop {
        background-color:rgba(121,130,134,1);
      }
      &.abnormal {
        background-color: rgba(217,120,120,1);
      }
    }
  }
  .filter-box {
    position: relative;
    z-index: 10;
    margin: 25px 0 20px 0;
  }
  .subtitle {
    font-size:18px;
    color:rgba(51,51,51,1);
  }
  .select-bar {
    float: right;
    .select-bar-content {
      float: left;
      margin-left: 10px;
      width: 410px;
      padding: 5px 10px 0 65px;
      background-color: #fff;
      border-radius:4px;
      border:1px solid rgba(224,224,224,1);
      z-index: 100;
      height: 38px;
      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);
      }
    }
  }
  .robots-box {
    width: calc(100% + 20px);
  }
  ul.robots-box>li{
    float: left;
    margin: 0 20px 20px 0;
    width:306px;
    height:340px;
    background:rgba(255,255,255,1);
    border-radius:4px;
    padding: 13px 23px 0 20px;
    &.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);
      }
    }
  }
  .operations {
    color:rgba(119,146,167,1);
    font-size:14px;
    line-height: 20px;
  }
  .operations .detail{
    display: inline-block;
    cursor: pointer;
  }
  .operations .switch {
    height: 20px;
    float: right;
  }
  .el-icon-caret-right {
    color: rgba(192,212,218,1);
  }
  .robot-name {
    font-size:14px;
    font-weight: 600;
    color:rgba(51,51,51,1);
    line-height:20px;
    text-align: center;
    margin: 12px 0 20px 0;
  }
  .chart-box {
    margin: auto;
    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);
      }
    }
    div {
      height: 40px;
      width: 100%;
      background-color: white;
      position: absolute;
      bottom: -5px;
      .type {
        font-size:14px;
        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;
        line-height:20px;
      }
    }
  }
  .coin,.base {
    height: 20px;
    line-height: 20px;
    font-size:12px;
    color:rgba(128,128,128,1);
    .sum {
      float: right;
      font-size:14px;
      color:rgba(51,51,51,1);
    }
  }
  .coin {
    margin: 19px 0 10px 0;
  }
  .no-data {
    text-align: center;
    font-size: 20px;
    margin-top: 100px;
  }
</style>
<style>
  /*select组件样式覆盖*/
  .overview {
    .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;
        }
      }
    }
  }
</style>
