<template>
<!-- 黄金比例乘数 -->
 <div v-loading="volumeProfileLoading">

   <!-- 对数线性显示切换 -->

    <!-- <el-row class="switch">
      <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> -->
      <!-- 时间导航 -->
    
      <div class="timeBox">
      <el-row>
        <el-col :span="24">
          <!-- <el-select
            class="symbol"
            v-model="KlineParams.symbol"
            @change="handelChang"
            size="small"
            filterable
          >
            <el-option
              v-for="item in symbolValueList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            > 
            </el-option>
          </el-select> -->

          <ul class="timeList"  @click="handelTimeList">
            <li title="1m">{{$t(`bian.oneMinutes`)}}</li>
            <li title="15m">{{$t(`bian.minutes15`)}}</li>
            <li title="4h">{{$t(`bian.hours4`)}}</li>
            <li title="1d">{{$t(`bian.day`)}}</li>
            <li title="1w">{{$t(`bian.weekly`)}}</li>
            <li class="highlight"> {{ $t(handelHighlight(KlineParams.interval) )  }}</li>
            <!-- <li><i class="i ixiaosanjiaodown triangle"></i></li> -->
          </ul>
          
          <span class="triangleBox"          
            >
           
            <i class="i ixiaosanjiaodown triangle"></i
          ></span>
          <!-- 弹窗导航 -->
          <div class="popup">
            <p>{{$t(`bian.selectCycle`)}}</p>
            <ul class="popupList" @click="handelPopupList">
              <li title="1m" class="separate">{{$t(`bian.oneMinutes`)}}</li>
              <li title="3m">{{$t(`bian.minutes3`)}}</li>
              <li title="5m">{{$t(`bian.minutes5`)}}</li>
              <li title="15m" class="separate">{{$t(`bian.minutes15`)}}</li>
              <li title="30m">{{$t(`bian.minutes30`)}}</li>
              <li title="1h" class="separate">{{$t(`bian.hours1`)}}</li>
              <li title="2h">{{$t(`bian.hours2`)}}</li>
              <li title="4h" class="separate">{{$t(`bian.hours4`)}}</li>
              <li title="6h">{{$t(`bian.hours6`)}}</li>
              <li title="8h">{{$t(`bian.hours8`)}}</li>
              <li title="12h">{{$t(`bian.hours12`)}}</li>
              <li title="1d" class="separate">{{$t(`bian.day`)}}</li>
              <li title="3d">{{$t(`bian.day3`)}}</li>
              <li title="1w" class="separate">{{$t(`bian.weekly`)}}</li>
              <li title="1M">{{$t(`bian.month`)}}</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="24">      
        <div
        @mousedown="handelMouse(true)"
        @mouseup="handelMouse(false)"
          id="volumeProfileBox"
        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;

}

//头部显示页面
.header {
  height: 40px;
  line-height: 40px;
  padding-left: 30px;
}
.img {
  width: 20px;
  object-fit: cover;
}
.navLabel {
  color: rgba(0, 0, 0, 0.6);
}


.timeList {
  display: flex;
  // outline: 1px solid red;
  width: 100%;
  height: 35px;
  font-size: 12px;
  // background: rgba(0, 0, 0, 0.8);
  color: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  align-items: center;
  margin-left: -5px;
  padding-left: 7%;
}
.timeList li {
  width: 50px;
  text-align: center;
  cursor: pointer;
}
.timeList li:hover {
  color: #f0b90b;
}
.timeBox {
  position: relative;
  margin: 0px;
  padding: 0px 10px;
}
// --------下拉框-------
.symbol {
  position: absolute;
  top: 9px;
  left: 10px;
}
.popup {
  background: #23282d;
  top: 30px;
  left: 25%;
  z-index: 99;
  height: 170px;
  width: 260px;
  position: absolute;
  padding: 0px 10px;
  display: none;
  transition: 0.5s;
}
.popup:hover {
  display: block;
  z-index: 99;
}
.popup p {
  width: 100%;
  height: 15px;
  margin: 3px 7px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.popupList {
  display: flex;
  flex-wrap: wrap;
}
.popupList li {
  width: 55px;
  height: 25px;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 8px;
  margin-top: 8px;
  text-align: center;
  font-size: 10px;
  line-height: 25px;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
}
.popupList li:hover {
  background: rgba(255, 255, 255, 0.3);
}
.popupList .separate {
  background: rgba(240, 185, 11, 0.3);
  color: #f0b90b;
}
.triangleBox:hover + .popup {
  display: block;
  z-index: 99;
}
.triangleBox {
  position: absolute;
  // background: red;
  left: 380PX;
  top: 3px;
  height: 30px;
  cursor: pointer;
}
.triangle {
  color: #000;
  font-size: 22px;

}
// --------------动态展示数据盒子-------------------
.dynamicValueBox {
  background: #100c2a;
  width: calc(100vw - 320px);
  height: 30px;
  display: flex;
  font-size: 12px;
  color: #76808f;
  align-items: center;
  margin-left: -5px;
  padding-left: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dynamicValueBox li {
  // background: #f0b90b;
  margin-left: 10px;
  padding: 2px 2px;
}
//底部样式
.describe {
  // height: 150px;
  // padding-left: 100px;
  background: rgba(0, 0, 0, 0.1);
  /* background: pink; */
  padding: 10px 20px;
  // background: gold;
  margin-top: 30px;
  outline: 1px solid rgba(0, 0, 0, 0.2);
}
// --------币种显示----------------
.Assets {
  // background: gold;
  width: 100%;
  height: 30px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.describe .tltle1 {
  height: 50px;
  // line-height: 50px;
  //  background: pink;

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-left: 10px;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.8);
}
.describe p {
  /* outline: 1px solid red; */
  /* color: rgba(0, 0, 0, 0.4); */
  color: rgba(0, 0, 0, 0.7);
  font-size: 12px;
  // padding-left: 10px;
}
.timeBox .el-input__inner{
  color: #000;
}
.highlight{
  font-size: 13px;
  color:#f7931a ;
  font-weight: 600;
  margin-left: -10px;
}

</style>