<template>
  <div class="community-type" v-if="data.length > 0">
    <m-chart :config="config" :data="data"/>
    <div class="legend">
      <div v-for="(item, i) in data" :key="item.name">
        <span :style="`background:${config.colors[i]}`"/>
        <p>{{item.name}}</p>
        <b><m-count :value="item.value" :decimal="0"/></b>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommunityType',
  data() {
    return {
      config: {
        colors: ['#0091ff', '#583eff', '#f7b500', '#6dd401'],
        legend: {hide: true},
        shape: [
          {type: 'pie', startAngle: -30, radius: [0, 50 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
        ],
      },
    }
  },
  computed: {
    data() {
      const {communityType} = this.$store.state
      if (communityType.length === 0) return []
      return [
        {name: '商品房', value: +communityType.find(item => item.ST_KIND === '商品房').KINDNUMBER || 0},
        {name: '直管公房', value: +communityType.find(item => item.ST_KIND === '直管公房').KINDNUMBER || 0},
        {name: '混合', value: +communityType.find(item => item.ST_KIND === '混合').KINDNUMBER || 0},
        {name: '其他', value: communityType.filter(item => item.ST_KIND !== '商品房' && item.ST_KIND !== '直管公房' && item.ST_KIND !== '混合').reduce((acc, cur) => acc + (+cur.KINDNUMBER || 0), 0)},
      ]
    },
  }
}
</script>

<style lang="stylus" scoped>
  .community-type
    width 100%
    height 100%
    position relative
    .legend
      position absolute
      right 0
      top 50%
      transform translateY(-50%)
      width 45%
      >div
        display flex
        align-items center
        margin .5rem 0
        >span
          width 1rem
          height @width
        >p
          color $light-blue
          width 5rem
          margin 0 .5rem

</style>
