<template>
    <Card :title="title" :icon="icon" class="community-type">
      <ThreePie :value="value" :legendIcons="legendIcons" class="w-full"></ThreePie>
      <Bar :xAxisData="xAxisData" :seriesData="seriesData" v-if="showBar" class="w-full"></Bar>
    </Card>
  </template>
<script>
// import echarts from 'echarts'
import Card from '@/views/hui-jia/components/card'
import icon from './images/icon-title.png'
import ThreePie from './components/three-pie.vue'
import iconZz from './images/icon-zz.png'
import iconSy from './images/icon-sy.png'
import iconZh from './images/icon-zh.png'
import Bar from './components/bar.vue'
import { huiJiaApi } from '@/api'

export default {
  name: 'CommunityType',
  components: {
    Card,
    ThreePie,
    Bar
  },
  props: {
    showBar: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      xAxisData: [],
      seriesData: [],
      title: '项目类型',
      icon: icon,
      value: [
        {
          value: 100,
          name: '住宅',
          key: 'flatCount'
        },
        {
          value: 200,
          name: '商业',
          key: 'businessCount'
        },
        {
          value: 300,
          name: '综合',
          key: 'otherCount'
        }
      ],
      legendIcons: [
        iconZz,
        iconSy,
        iconZh
      ],
      text: '项目类型',
      subtext: '项目类型占比'
    }
  },
  mounted() {
    this.getCommunityTypeSizeStatistics()
  },
  methods: {
    getCommunityTypeSizeStatistics () {
      huiJiaApi.getCommunityTypeSizeStatistics().then(res => {
        if(res && res.data){
          const _data = res.data.data
          this.xAxisData = [_data.intervalOneName, _data.intervalTwoName, _data.intervalThreeName, _data.intervalFourName, _data.intervalFiveName]
          this.seriesData = [_data.intervalOneCount, _data.intervalTwoCount, _data.intervalThreeCount, _data.intervalFourCount, _data.intervalFiveCount]
          this.value.forEach(item => {
            item.value = res.data.data[item.key]
          })
        }
      })
    }
  }
}
</script>
