<!--
 * @Description: 道路交通指数
 * @Author: 王晓颖
 * @Date: 2020-09-01 17:24:43
 -->
<template>
  <div class="index-container">
    <scroll-board :config="options"/>
  </div>
</template>

<script>
import ScrollBoard from '@/components/board/ScrollBoard'
export default {
  name: 'roadTrafficIndex',
  components: {ScrollBoard},
  props: {
    header: {
      type: Array,
      default: () => {
        return []
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      options: {
        header: ['道路名称', '拥堵指数'],
        rowNum: 5,
        hoverColor: true,
        headerBGC: 'transparent',
        oddRowBGC: '',
        evenRowBGC: '',
        headerFontSize: '0.07rem', // 表头字体大小
        rowFontSize: '0.07rem', // 行字体大小
        headerColor: '#FFFFFF',
        rowColor: '#09f2ff',
        data: []
      }
    }
  },
  watch: {
    data (val) {
      this.options.data = val
      this.$set(this.options, 'data', this.data)
    },
    header (val) {
      this.options.header = val
    }
  },
  mounted () {
    this.options.data = this.data
    this.options.header = this.header
    this.$set(this.options, 'data', this.data)
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.index-container{
  width:100%;
  height:100%;
  overflow: hidden;
  padding-left:0.1rem;
  padding-right:0.1rem;
  /*display:flex;*/
  /*justify-content: space-between;*/
  /*align-items: center;*/
}
</style>