<template>
  <div v-loading="exchangeRateLoading"  class="exchangeRate">
    

    <div>
      <ul class="tableBox">
        <li style="font-weight: 600">
          <span>{{$t(`formula.name`)}}</span>
          <span>{{$t(`formula.name`)}}</span>
          <span>{{$t(`formula.newData`)}}</span>
          <span>{{$t(`arh.time`)}}</span>
        </li>
        <li v-for="item in tableData" :key="item.symbol" @click="handelLi(item)">
          <span :class="{symbolActive:item.symbol == params.symbol}">{{ item.cn }}</span>
          <span :class="{symbolActive:item.symbol == params.symbol}">{{ item.symbol }}</span>
          <span>{{ item.value }}</span>
          <span>{{ item.date }}</span>
        </li>
      </ul>
    </div>
   
    <el-row>
      <el-col :span="24" class="chartsBox"  >
        <div class="nameRefresh" > <span>{{ params.symbol }}</span>  <i @click="handelRefresh"  class="i ishuaxin1 Refresh"></i> </div>
        <div
        v-loading="chartLoading"
          id="exchangeRateBox"
          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>
.exchangeRate{
  padding: 0px 20px;
}
.tableBox {
  // outline: 1px solid red;
  border: 1px solid rgba(0, 0, 0, 0.2);
  min-height: 300px;
  li {
    // outline: 1px solid red;
    cursor: pointer;
    height: 25px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 12px;
    align-items: center;
    span {
      // outline: 1px solid red;
      width: 20%;
      text-align: center;
    }
  }
  li:hover{
    background: rgba(0, 0, 0, 0.1);
  }
}
.chartsBox{
  outline: 1PX solid rgba(0, 0, 0, 0.2); 
  margin-top: 20px;
 .nameRefresh{
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  .Refresh{
    margin-left: 5px;
  }
 
 }

}

.symbolActive{
  color: #f7931a;
  font-weight: 600;
}
</style>