<template>
 <div  v-loading="takerlongshortRatioLoading">

     <!-- 时间间隔 -->
    <section class="IntervalROW">        
        <ul class="IntervalBox">
          <template v-for="(item,index) in timeIntervalList" >         
          <li @click="handelTimeInterval(item.value)" :key="item.value" v-if="index < 4">       
          {{ $t(item.label) }}
           </li> 
          </template>            
        </ul>
        <span class="activeInterval">{{ $t(activeInterval(params.interval)) }}  <i class="i ixiaosanjiaodown triangle"></i></span>   
          <!-- hover显示间隔弹窗 -->    
        <div  class="IntervalBoxHover">
            <p>{{$t(`bian.selectCycle`)}}</p>
          <ul>
            <li @click="handelTimeInterval(item.value)" v-for="item in timeIntervalList" :key="item.value"> {{ $t(item.label) }}</li>      
          </ul>
      </div>  
    </section>   
       <!-- 对数线性显示切换 -->  
       <el-row>
      <el-col>    
         <el-button @click="handelLineSwitch"
         style="margin-left:100px;height:35px;border-radius:6px;" 
         >{{ $t(`home.switch`)
          }}<span class="according"> {{ $t(switch3) }}</span></el-button
        >   
      </el-col>
    </el-row>
  <el-row class="choice">
      <!-- <el-col :span="3.5" >
        <el-button size="small" @click="handelLineSwitch"
        style="margin-left:120px;height:35px;border-radius:6px;"
          >{{ $t(`home.switch`)
          }}<span class="according"> {{ $t(switch3) }}</span></el-button
        >
      </el-col> -->
      <!-- symbol选择 -->
      <!-- <el-col :span="3.5"  class="takerTimeBoxS">
      <el-select
          v-model="params.symbol"
          filterable
          size="small"
          :placeholder="$t(`arh.pleaseInterval`)"
          @change="handelSymbol"
        >
          <el-option
            v-for="item in symbolList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
       
        </el-select>
       
    </el-col> -->
      <!-- 时间选择 -->
     <!-- <el-col :span="3.5"  class="takerTimeBoxS">
      <el-select
          v-model="params.interval"
          filterable
          size="small"
          :placeholder="$t(`arh.pleaseInterval`)"
          @change="handelTimeInterval"
        >
          <el-option
            v-for="item in timeIntervalList"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          >
          </el-option>
        </el-select>
    </el-col> -->
    <!-- <el-col :span="4" class="takerTime" >
       <div class="timeChooseBox2" >
      
          <el-date-picker         
            size="small"
            :picker-options="pickerOptions0"
            v-model="chooseTime"         
            value-format="yyyy-MM-dd"
             @change="handelTime"
            type="daterange"
            :default-value="timeDefaultShow"
            range-separator="-"
            :start-placeholder="$t(`home.startDate`)"
            :end-placeholder="$t(`home.endDate`)"
            unlink-panels
            editables
            style="width: 99%"
            class="timeBox"
          >
          </el-date-picker>
          </div>
    </el-col> -->
   
    <!-- <el-col :span="1"  class="takerBtn">
      <span class="btn" @click="handelTakerBtn">{{$t(`arh.search`)}}</span>
    </el-col> -->
  </el-row>
    <el-row >
      <el-col :span="24">      
        <div
          id="takerlongshortRatioBox"
          style="width: 100%; min-height: 700px"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
.choice {
  // outline: 1px solid red;
  display: flex;
  justify-content: left;
  align-items: center;
}
.takerTimeBoxS {
  // outline: 1px solid red;
  padding: 10px 5px;
}
.takerBtn {
  // outline: 1px solid red;
  // padding: 7px 0px;
  cursor: pointer;
  .btn {
    display: inline-block;
    // outline: 1px solid red;
    line-height: 30px;
    width: 80%;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    font-size: 14px;
  }
  .btn:hover {
    background: rgba(168, 177, 245, 0.3);
  }
}
.takerTime{
  //  outline: 1px solid red;
    padding: 7px 0px;
  //  display: flex;
  //  align-items: center;
}
::v-deep .takerTimeBoxS .el-input__inner{
  margin-top: 0px;
  // outline: 1px solid red;
}

//  ::v-deep .timeChooseBox .el-range-editor--small .el-input__inner{
//   height: 32px;
//   outline: 1px solid red;
//   background: goldenrod;
//  }
.IntervalROW{
  padding-left: 7%;
  display: flex;
  // outline: 1px solid red;
  position: relative; 
  // width: 22%;
    .activeInterval{
    position: relative; 
    // outline: 1px solid red;
    font-size: 13px;
    color: #f7931a;   
    margin-left: 5px; 
    // outline: 1px solid red;
  } 
  .triangle{
    position: absolute;
    // outline: 1px solid red;
    top: 0;
    left: 100%;
    font-size: 20px;
    line-height: 10px;
    color: #000;
    
  }
  .triangle:hover + .IntervalBoxHover{
    color: #f7931a;
    display: block;
  }

}

.IntervalBox{
  // outline: 1px solid red;  
  display: flex;
  align-items: center;  
  justify-content: left;
  margin-bottom: 20px;
  padding: 0px 10px;
  position: relative;

  li{
    font-size: 12px; 
    margin-left: 20px;
    cursor: pointer;
    // outline: 1px solid red;

   
  }
  li:hover{
    color: #f7931a;

  }
  
}
.activeInterval:hover +.IntervalBoxHover{
  display: block;
  // background: #f7931a;
  // outline: 1px solid red;
}
.IntervalBoxHover{
  // outline: 1px solid red;
  width: 260px;
  min-height: 100px;
  position: absolute;
  left: 28%;  
  // left:100%;
  top: 16px;
  background: #23282d;
  padding: 10px;
  z-index: 99;
  transition: 0.5s;
  display: none;

  p{
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    color: #f7931a;
    margin: 0%;
    padding-left: 8px;

  }
  ul{
    width: 100%;
    // outline: 1px solid red;
    min-height: 100px;
    display: flex;
    color: #eaecef;
    flex-wrap: wrap;  
    justify-content: center;
    background: #23282d;
    // box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.1) ; 
  //  padding: 5px 0px;
    li{
      width: calc(100% / 4);
      // outline: 1px solid red;
      padding: 5px 3px;
      // height: 30px;     
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #353b42;
      margin: 5px  5px;
      border-radius: 3px;
      
    }
    li:hover{
      background: #423e28;
      color: #f0b90b;
    }
  }
}
.IntervalBoxHover:hover{
  display: block;
}
</style>
<style >
.timeChooseBox2 .el-input__inner{
  height: 32px;
   margin-top: 0px;
  /* outline: 1px solid red; */
  /* background: goldenrod; */
 }
</style>