<template>
  <div class="green">
    <div class="chart" v-if="showChart"><m-chart :config="config" :data="data" /></div>
    <div class="info">
      <div v-for="(item, i) in data" :key="item.name">
        <span class="dot" :style="`border-color:${config.colors[i]}`"/>
        <p>{{item.name}}</p>
        <m-count class="count" :value="item.value" :decimal="0" :style="`color:${config.colors[i]}`"/>
        <span class="unit">个</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Green',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#fe7403', '#ffd400', '#33c5ff'],
        legend: {hide: true},
        shape: [
          {name: '环卫公厕', type: 'donut', },
          {name: '生活垃圾收集', type: 'donut', },
          {name: '小型压缩站', type: 'donut'},
        ],
      },
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 100)
  },
  computed: {
    data() {
      return this.$store.state.greenInfo
    }
  }
}
</script>

<style lang="stylus" scoped>
.green
  display flex
  .chart
    width 40%
    height 100%
  .info
    width 60%
    height 100%
    display flex
    flex-direction column
    justify-content center
    padding-left .1rem
    >div
      margin-bottom .1rem
    .dot
      display inline-block
      width .08rem
      height @width
      border .02rem solid
      border-radius 50%
    p
      width 50%
      margin 0 .05rem
      display inline-block
    .count
      font-size .12rem
    .unit
      color #aaa
      font-size .08rem
</style>
