<template>
  <div class="disaster">
    <div class="info">
      <p><span>严重灾情小区</span><m-count :value="153" :decimal="0" style="color:#D82B2B;fontSize:1.2rem;"/></p>
      <p><span>轻微灾情小区</span><m-count :value="1079" :decimal="0" style="color:#f7b500;fontSize:1.2rem;"/></p>
    </div>
    <div class="chart-wrapper">
      <m-chart :config="config" :data="data" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Disaster',
  data() {
    return {
      config: {
        colors: ['#0388ef'],
        legend: {
          hide: true,
        },
        yAxis: {
          axisLabel: {show: false},
          max: 600,
        },
        shape: [
          {key: 'value', type: 'bar', barWidth: '30%', label: {show: true, position: 'top', color: '#fff'}},
        ],
        xAxis: {
          key: 'name',
        },
      },
      data: [
        {name: '空中坠物', value: 102},
        {name: '树木倒伏', value: 494},
        {name: '小区积水', value: 209},
        {name: '车库进水', value: 43},
        {name: '人员受伤', value: 6},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.disaster
  height 100%
  overflow hidden
  .info
    display flex
    align-items center
    justify-content space-around
    color $light-blue
    span
      margin-right .5rem
  .chart-wrapper
    height 90%
</style>
