<template>
<!--  -->
 <div v-loading="USTreasuriesYieldsLoading">
        <!-- 时间间隔 -->
        <section class="IntervalROW">  
          <div id="loadingText" style="position: fixed; top: 50%; left: 60%; transform: translate(-50%, -50%); background-color: #000; color: #fff; padding: 10px; display: none;z-index: 9999;">{{ draggingText }}</div>      
      
         
          <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.limit)) }}  <i class="i ixiaosanjiaodown triangle"></i></span>   
          <!-- hover显示间隔弹窗 -->
          <div class="IntervalBoxHoverBigBox">  
            <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>  
       </div> 
    </section>          
 
    <el-row>
      <el-col :span="24">      
        <div
        @mousedown="handelMouse(true)"
        @mouseup="handelMouse(false)"
          id="USTreasuriesYieldsBox"
        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>
.body {
  margin: 0px;
  padding: 0px;

}

.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;
    font-weight: 600;
  } 
  .triangle{
    position: absolute;
    // outline: 1px solid red;
    top: 0;
    left: 100%;
    font-size: 20px;
    line-height: 10px;
    color: #000;
    
  }
  .triangle:hover + .IntervalBoxHoverBigBox{
    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 +.IntervalBoxHoverBigBox{
  display: block;
  // background: #f7931a;
  // outline: 1px solid red;
}
.IntervalBoxHoverBigBox{
  // outline: 1px solid red;
  display: none;
  width: 300px;
  position: relative;
}
.IntervalBoxHover{
  // outline: 1px solid red;
  width: 260px;
  min-height: 100px;
  position: absolute;
  left: 2%;  
  // left:100%;
  top: 16px;
  background: #23282d;
  padding: 10px;
  z-index: 99;
  transition: 0.5s;
  

  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;
    }
  }
}
.IntervalBoxHoverBigBox:hover{
  display: block;
}


</style>