<template>
  <div class="bottom">
    <div class="attrList">
      <div class="attr" v-for="attr in data.data" :key="attr.id" >

        <div class="val">
          <template v-if="attr.code == 'FX'">
            {{attr.value == 0 ? "西南" : attr.value}}
          </template>
          <template v-else>
            {{parseFloat((attr.value * fd).toFixed(2))}}
          </template>
          {{attr.unit}}</div>
        <div class="label">{{attr.name}}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {toRefs,ref,onMounted,onBeforeUnmount} from "vue"
const props = defineProps({
  data:{
    type:Object,
    default:new Object()
  }
})
let fds = [1,0.999,1,0.999,1,0.999,1,0.999,1,0.998,1,0.998,1,0.998,1,0.998];
const fd = ref(1);
let i = 0;
let start = false;

function run(){
  if(start){
    fd.value = fds[i % fds.length];
    i++
    setTimeout(run ,900)
  }
}
onMounted(()=>{
  start = true;
  run();
})
onBeforeUnmount(()=>{
  start = false;
})

const {data} = toRefs(props)

</script>

<style lang="scss" scoped>
.bottom {
  width: 100%;
  height: calc(100% - 48px);
  .attrList{
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap:wrap;
    .attr{
      box-sizing: border-box;
      height: 50px;
      width: 24%;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .label{
        font-weight:normal;
        color: #939292;
      }
    }
  }
}

</style>
