<!--
 * @Description: 基本信息
 * @Author: 王晓颖
 * @Date: 2020-09-06 16:17:37
 -->
<template>
  <div class="index-container">
      <!--标题-->
      <div class="index-name">{{data.name}}</div>
      <!--数值 & 单位-->
      <div class="index-data">
        <div class="index-value" :style="{'color':'white'}">
          <dv-digital-flop :config="config" style="width:100%;height:100%" />
        </div>
        <div class="data-right">
          {{data.unit}}
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'panelBoard',
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          color: '' // 数值颜色
        }
      }
    },
    data: {
      type: Object,
      default: () => {
        return {
          name: '拥堵指数', // 标题
          value: '341', // 数值
          unit: ''
        }
      }
    }
  },
  data () {
    return {
      config: {
        number: [this.data.value],
        style: {
          fontSize: 50,
          fill: '#ffffff',
          fontWeight: 'bolder'
        }
      }
    }
  },
  watch: {
    data (val) {
      this.config = {
        number: [val.value],
        style: {
          fontSize: 50,
          fill: '#ffffff',
          fontWeight: 'bolder'
        }
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .index-container{
    margin: 0.1rem;
    width:1.2rem;
    padding:0.15rem 0.2rem 0.05rem 0.2rem;
    align-items: center;
    background: url("../../assets/button_images/board-box.png") no-repeat;
    background-size: 100% 100%;
    .index-name{
      font-size:0.09rem;
      font-weight: bold;
      margin-bottom: 0.02rem;
      color:#01aaff
    }
    .index-data{
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .data-right{
        display: flex;
        justify-content: start;
        font-size:0.09rem;
        margin-bottom: 0.12rem;
        color: #01aaff;
      }
    }
  }
</style>